- affix_offset = local_assigns.fetch(:affix_offset, "50")
- project = local_assigns[:project]

%aside.right-sidebar.js-right-sidebar{ data: { "offset-top" => affix_offset, "spy" => "affix", "always-show-toggle" => true }, class: sidebar_gutter_collapsed_class, 'aria-live' => 'polite', 'aria-label': _('Milestone') }
  .issuable-sidebar.milestone-sidebar
    .block.milestone-progress.issuable-sidebar-header
      %a.gutter-toggle.float-right.js-sidebar-toggle.has-tooltip{ role: "button", href: "#", "aria-label" => s_('MilestoneSidebar|Toggle sidebar'), title: sidebar_gutter_tooltip_text, data: { container: 'body', placement: 'left', boundary: 'viewport' } }
        = sidebar_gutter_toggle_icon
      .title.hide-collapsed
        %strong.bold== #{milestone.percent_complete}%
        %span.hide-collapsed
          = s_('MilestoneSidebar|complete')
      .value.hide-collapsed
        = milestone_progress_bar(milestone)

    .block.milestone-progress.hide-expanded
      .sidebar-collapsed-icon.has-tooltip{ title: milestone_progress_tooltip_text(milestone), data: { container: 'body', html: 'true', placement: 'left', boundary: 'viewport' } }
        %span== #{milestone.percent_complete}%
        = milestone_progress_bar(milestone)

    .block.start_date.hide-collapsed
      .title
        = s_('MilestoneSidebar|Start date')
        - if @project && can?(current_user, :admin_milestone, @project)
          = link_to s_('MilestoneSidebar|Edit'), edit_project_milestone_path(@project, @milestone), class: 'js-sidebar-dropdown-toggle edit-link float-right'
      .value
        %span.value-content{ data: { qa_selector: 'start_date_content' } }
          - if milestone.start_date
            %span.bold= milestone.start_date.to_s(:medium)
          - else
            %span.no-value= s_('MilestoneSidebar|No start date')

    .block.due_date
      .sidebar-collapsed-icon
        %span{ 'aria-hidden': 'true' }
          = sprite_icon('calendar')
        %span.collapsed-milestone-date
          - if milestone.start_date && milestone.due_date
            - if milestone.start_date.year == milestone.due_date.year
              .milestone-date.has-tooltip{ title: milestone_time_for(milestone.start_date, :start), data: { container: 'body', html: 'true', placement: 'left', boundary: 'viewport' } }
                = milestone.start_date.strftime('%b %-d')
            - else
              .milestone-date.has-tooltip{ title: milestone_time_for(milestone.start_date, :start), data: { container: 'body', html: 'true', placement: 'left', boundary: 'viewport' } }
                = milestone.start_date.strftime('%b %-d %Y')
            .date-separator -
            .due_date.has-tooltip{ title: milestone_time_for(milestone.due_date, :end), data: { container: 'body', html: 'true', placement: 'left', boundary: 'viewport' } }
              = milestone.due_date.strftime('%b %-d %Y')
          - elsif milestone.start_date
            = s_('MilestoneSidebar|From')
            .milestone-date.has-tooltip{ title: milestone_time_for(milestone.start_date, :start), data: { container: 'body', html: 'true', placement: 'left', boundary: 'viewport' } }
              = milestone.start_date.strftime('%b %-d %Y')
          - elsif milestone.due_date
            = s_('MilestoneSidebar|Until')
            .milestone-date.has-tooltip{ title: milestone_time_for(milestone.due_date, :end), data: { container: 'body', html: 'true', placement: 'left', boundary: 'viewport' } }
              = milestone.due_date.strftime('%b %-d %Y')
          - else
            .has-tooltip{ title: milestone_time_for(milestone.start_date, :start), data: { container: 'body', html: 'true', placement: 'left', boundary: 'viewport' } }
              = s_('MilestoneSidebar|None')
      .title.hide-collapsed
        = s_('MilestoneSidebar|Due date')
        - if @project && can?(current_user, :admin_milestone, @project)
          = link_to s_('MilestoneSidebar|Edit'), edit_project_milestone_path(@project, @milestone), class: 'js-sidebar-dropdown-toggle edit-link float-right'
      .value.hide-collapsed
        %span.value-content{ data: { qa_selector: 'due_date_content' } }
          - if milestone.due_date
            %span.bold= milestone.due_date.to_s(:medium)
          - else
            %span.no-value= s_('MilestoneSidebar|No due date')
        - remaining_days = remaining_days_in_words(milestone.due_date, milestone.start_date)
        - if remaining_days.present?
          = surround '(', ')' do
            %span.remaining-days= remaining_days

    - if !project || can?(current_user, :read_issue, project)
      .block.issues
        .sidebar-collapsed-icon.has-tooltip{ title: milestone_issues_tooltip_text(milestone), data: { container: 'body', html: 'true', placement: 'left', boundary: 'viewport' } }
          %strong
            = custom_icon('issues')
          %span= milestone.issues_visible_to_user(current_user).count
        .title.hide-collapsed
          = s_('MilestoneSidebar|Issues')
          = gl_badge_tag milestone.issues_visible_to_user(current_user).count, variant: :muted, size: :sm
          - if show_new_issue_link?(project)
            = link_to new_project_issue_path(project, issue: { milestone_id: milestone.id }), class: "float-right", title: s_('MilestoneSidebar|New Issue') do
              = s_('MilestoneSidebar|New issue')
        .value.hide-collapsed.bold
          %span.milestone-stat
            = link_to milestones_browse_issuables_path(milestone, type: :issues) do
              = s_('MilestoneSidebar|Open:')
              = milestone.issues_visible_to_user(current_user).opened.count
          %span.milestone-stat
            = link_to milestones_browse_issuables_path(milestone, type: :issues, state: 'closed') do
              = s_('MilestoneSidebar|Closed:')
              = milestone.issues_visible_to_user(current_user).closed.count

    .block
      #issuable-time-tracker{ data: { time_estimate: @milestone.total_time_estimate,
        time_spent: @milestone.total_time_spent,
        human_time_estimate: @milestone.human_total_time_estimate,
        human_time_spent: @milestone.human_total_time_spent,
        iid: @milestone.iid,
        limit_to_hours: Gitlab::CurrentSettings.time_tracking_limit_to_hours.to_s } }

    = render_if_exists 'shared/milestones/weight', milestone: milestone

    - if milestone.merge_requests_enabled?
      .block.merge-requests
        .sidebar-collapsed-icon.has-tooltip{ title: milestone_merge_requests_tooltip_text(milestone), data: { container: 'body', html: 'true', placement: 'left', boundary: 'viewport' } }
          %strong
            = custom_icon('mr_bold')
          %span= milestone.merge_requests.count
        .title.hide-collapsed
          = s_('MilestoneSidebar|Merge requests')
          = gl_badge_tag milestone.merge_requests.count, variant: :muted, size: :sm
        .value.hide-collapsed.bold
          - if !project || can?(current_user, :read_merge_request, project)
            %span.milestone-stat
              = link_to milestones_browse_issuables_path(milestone, type: :merge_requests) do
                = s_('MilestoneSidebar|Open:')
                = milestone.merge_requests.opened.count
            %span.milestone-stat
              = link_to milestones_browse_issuables_path(milestone, type: :merge_requests, state: 'closed') do
                = s_('MilestoneSidebar|Closed:')
                = milestone.merge_requests.closed.count
            %span.milestone-stat
              = link_to milestones_browse_issuables_path(milestone, type: :merge_requests, state: 'merged') do
                = s_('MilestoneSidebar|Merged:')
                = milestone.merge_requests.merged.count
          - else
            %span.milestone-stat
              = s_('MilestoneSidebar|Open:')
              = milestone.merge_requests.opened.count
            %span.milestone-stat
              = s_('MilestoneSidebar|Closed:')
              = milestone.merge_requests.closed.count
            %span.milestone-stat
              = s_('MilestoneSidebar|Merged:')
              = milestone.merge_requests.merged.count

    - if project
      - recent_releases, total_count, more_count = recent_releases_with_counts(milestone, current_user)
      .block.releases
        .sidebar-collapsed-icon.has-tooltip{ title: milestone_releases_tooltip_text(milestone), data: { container: 'body', placement: 'left', boundary: 'viewport' } }
          %strong
            = sprite_icon("rocket")
          %span= total_count
        .title.hide-collapsed= n_('Release', 'Releases', total_count)
        .hide-collapsed
          - if total_count == 0
            .no-value= s_('MilestoneSidebar|None')
          - else
            .font-weight-bold
              - recent_releases.each do |release|
                = link_to release.name, project_releases_path(project, :anchor => release.tag)
                - unless release == recent_releases.last
                  %span.font-weight-normal •
              - if more_count > 0
                %span.font-weight-normal •
                = link_to n_('%{count} more release', '%{count} more releases', more_count) % { count: more_count }, project_releases_path(project), class: 'font-weight-normal'

    - milestone_ref = milestone.try(:to_reference, full: true)
    - if milestone_ref.present?
      .block.reference
        .sidebar-collapsed-icon.js-dont-change-state
          = clipboard_button(text: milestone_ref, title: s_('MilestoneSidebar|Copy reference'), placement: "left", boundary: 'viewport')
        .gl-display-flex.gl-align-items-center.gl-justify-content-space-between.gl-mb-2.hide-collapsed
          %span.gl-overflow-hidden.gl-text-overflow-ellipsis.gl-white-space-nowrap
            = s_('MilestoneSidebar|Reference:')
            %span{ title: milestone_ref }
              = milestone_ref
          = clipboard_button(text: milestone_ref, title: s_('MilestoneSidebar|Copy reference'), placement: "left", boundary: 'viewport')