.banner-callout.compact.milestone-deprecation-message.js-milestone-deprecation-message.prepend-top-20
  .banner-graphic= image_tag 'illustrations/milestone_removing-page.svg'
  .banner-body.prepend-left-10.append-right-10
    %h5.banner-title.prepend-top-0= _('This page will be removed in a future release.')
    %p.milestone-banner-text= _('Use group milestones to manage issues from multiple projects in the same milestone.')
    = button_tag _('Promote these project milestones into a group milestone.'), class: 'btn btn-link js-popover-link text-align-left milestone-banner-link'
    .milestone-banner-buttons.prepend-top-20= link_to _('Learn more'), help_page_url('user/project/milestones/index', anchor: 'promoting-project-milestones-to-group-milestones'), class: 'btn btn-default', target: '_blank'

  %template.js-milestone-deprecation-message-template
    .milestone-popover-body
      %ol.milestone-popover-instructions-list.append-bottom-0
        %li= _('Click any <strong>project name</strong> in the project list below to navigate to the project milestone.').html_safe
        %li= _('Click the <strong>Promote</strong> button in the top right corner to promote it to a group milestone.').html_safe
    .milestone-popover-footer= link_to _('Learn more'), help_page_url('user/project/milestones/index', anchor: 'promoting-project-milestones-to-group-milestones'), class: 'btn btn-link prepend-left-0', target: '_blank'