.detail-page-header.milestone-page-header
  = gl_badge_tag milestone_status_string(milestone), { variant: milestone_badge_variant(milestone) }, { class: 'gl-mr-3' }

  .header-text-content
    %span.identifier
      %strong
        = _('Milestone')
    - if milestone.due_date || milestone.start_date
      = milestone_date_range(milestone)

  .milestone-buttons
    - if can?(current_user, :admin_milestone, @group || @project)
      = render Pajamas::ButtonComponent.new(href: edit_milestone_path(milestone), button_options: { class: 'btn-grouped' }) do
        = _('Edit')

      - if milestone.project_milestone? && milestone.project.group
        = render Pajamas::ButtonComponent.new(button_options: { class: 'js-promote-project-milestone-button btn-grouped', data: { milestone_title: milestone.title, group_name: milestone.project.group.name, url: promote_project_milestone_path(milestone.project, milestone) }, disabled: true }) do
          = _('Promote')
        #promote-milestone-modal

      - if milestone.active?
        = render Pajamas::ButtonComponent.new(href: update_milestone_path(milestone, { state_event: :close }), method: :put, button_options: { class: 'btn-grouped btn-close' }) do
          = _('Close milestone')
      - else
        = render Pajamas::ButtonComponent.new(href: update_milestone_path(milestone, { state_event: :activate }), method: :put, button_options: { class: 'btn-grouped' }) do
          = _('Reopen milestone')

      = render 'shared/milestones/delete_button'

    = render Pajamas::ButtonComponent.new(icon: 'chevron-double-lg-left', button_options: { 'aria-label' => _('Toggle sidebar'), class: 'btn-grouped gl-float-right! gl-sm-display-none js-sidebar-toggle' })