- page_title _("Labels")

%div
  = render Pajamas::ButtonComponent.new(variant: :confirm,
    href: new_admin_label_path,
    button_options: { class: 'float-right' }) do
    = _('New label')
  %h1.page-title.gl-font-size-h-display
    = _('Labels')
%hr
- if @labels.present?
  .labels.labels-container.admin-labels.js-admin-labels-container.gl-bg-gray-10.gl-border-solid.gl-border-1.gl-border-gray-100
    %ul.manage-labels-list
      = render @labels

    = paginate @labels, theme: 'gitlab'

.js-admin-labels-empty-state{ class: ('gl-display-none' if @labels.present?) }
  %section.row.empty-state.gl-text-center
    .col-12
      .svg-content.svg-150
        = image_tag 'illustrations/empty-state/empty-labels-md.svg'
    .col-12
      .gl-mx-auto.gl-my-0.gl-p-5
        %h1.gl-font-size-h-display.gl-line-height-36.h4
          = s_('AdminLabels|Define your default set of project labels')
        %p.gl-mb-0
          = s_('AdminLabels|Labels created here will be automatically added to new projects.')
        %p
          = s_('AdminLabels|They can be used to categorize issues and merge requests.')
        .gl-display-flex.gl-flex-wrap.gl-justify-content-center
          = render Pajamas::ButtonComponent.new(href: new_admin_label_path) do
            = _('New label')