.detail-page-header
  .detail-page-header-body.gl-flex-wrap
    = 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)
      = 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' })

  - if can?(current_user, :admin_milestone, @group || @project)
    .milestone-buttons.detail-page-header-actions.gl-display-flex.gl-align-self-start
      - if milestone.active?
        = render Pajamas::ButtonComponent.new(href: update_milestone_path(milestone, { state_event: :close }), method: :put, button_options: { class: 'btn-close gl-display-none gl-md-display-inline-block' }) do
          = _('Close milestone')
      - else
        = render Pajamas::ButtonComponent.new(href: update_milestone_path(milestone, { state_event: :activate }), method: :put, button_options: { class: 'gl-display-none gl-md-display-inline-block' }) do
          = _('Reopen milestone')

      .btn-group.gl-md-ml-3.gl-display-flex.dropdown.gl-dropdown.gl-md-w-auto.gl-w-full
        = button_tag type: 'button', class: "btn dropdown-toggle btn-default btn-md gl-button gl-dropdown-toggle btn-default-tertiary dropdown-icon-only dropdown-toggle-no-caret has-tooltip gl-display-none! gl-md-display-inline-flex!", data: { toggle: 'dropdown', title: _('Milestone actions'), testid: 'milestone-actions', 'aria-label': _('Milestone actions') }, aria: { label: _('Milestone actions') } do
          = sprite_icon "ellipsis_v", size: 16, css_class: "dropdown-icon gl-icon"
        = button_tag type: 'button', class: "btn dropdown-toggle btn-default btn-md btn-block gl-button gl-dropdown-toggle gl-md-display-none!", data: { 'toggle' => 'dropdown' } do
          %span.gl-dropdown-button-text= _('Milestone actions')
          = sprite_icon "chevron-down", size: 16, css_class: "dropdown-icon gl-icon"
        .dropdown-menu.dropdown-menu-right
          .gl-dropdown-inner
            .gl-dropdown-contents
              %ul
                %li.gl-dropdown-item
                  = link_to edit_milestone_path(milestone), class: 'menu-item' do
                    .gl-dropdown-item-text-wrapper
                      = _('Edit')
                - if milestone.project_milestone? && milestone.project.group
                  %li.gl-dropdown-item
                    %button.gl-button.btn.btn-link.menu-item.js-promote-project-milestone-button{ data: { milestone_title: milestone.title,
                      group_name: milestone.project.group.name,
                      url: promote_project_milestone_path(milestone.project, milestone)},
                      disabled: true,
                      type: 'button' }
                      .gl-dropdown-item-text-wrapper
                        = _('Promote')
                    #promote-milestone-modal
                - if milestone.active?
                  %li.gl-dropdown-item{ class: "gl-md-display-none!" }
                    = link_to update_milestone_path(milestone, { state_event: :close }), method: :put, class: 'menu-item' do
                      .gl-dropdown-item-text-wrapper
                        = _('Close milestone')
                - else
                  %li.gl-dropdown-item{ class: "gl-md-display-none!" }
                    = link_to update_milestone_path(milestone, { state_event: :activate }), method: :put, class: 'menu-item' do
                      .gl-dropdown-item-text-wrapper
                        = _('Reopen milestone')
                %li.gl-dropdown-item
                  = render 'shared/milestones/delete_button'