- breadcrumb_title _('Runners')
- page_title _('Runners')

- if Feature.enabled?(:runner_list_view_vue_ui, current_user, default_enabled: :yaml)
  #js-runner-list{ data: { registration_token: Gitlab::CurrentSettings.runners_registration_token, runner_install_help_page: 'https://docs.gitlab.com/runner/install/', active_runners_count: @active_runners_count } }
- else
  .row
    .col-sm-6
      .bs-callout
        %p
          = _("Runners are processes that pick up and execute CI/CD jobs for GitLab.")
          %br
          = _('You can register runners as separate users, on separate servers, and on your local machine. Register as many runners as you want.')
          %br

        %div
          %span= _('Runners can be:')
          %ul
            %li
              %span.badge.badge-pill.gl-badge.sm.badge-success= s_('Runners|shared')
              \-
              = _('Runs jobs from all unassigned projects.')
            %li
              %span.badge.badge-pill.gl-badge.sm.badge-success= s_('Runners|group')
              \-
              = _('Runs jobs from all unassigned projects in its group.')
            %li
              %span.badge.badge-pill.gl-badge.sm.badge-info= s_('Runners|specific')
              \-
              = _('Runs jobs from assigned projects.')
            %li
              %span.badge.badge-pill.gl-badge.sm.badge-warning= s_('Runners|locked')
              \-
              = _('Cannot be assigned to other projects.')
            %li
              %span.badge.badge-pill.gl-badge.sm.badge-danger= s_('Runners|paused')
              \-
              = _('Not available to run jobs.')

    .col-sm-6
      .bs-callout
        = render partial: 'ci/runner/how_to_setup_runner',
                  locals: { registration_token: Gitlab::CurrentSettings.runners_registration_token,
                            type: s_('Runners|shared'),
                            reset_token_url: reset_registration_token_admin_application_settings_path,
                            project_path: '',
                            group_path: '' }

  .row
    .col-sm-9
      = form_tag admin_runners_path, id: 'runners-search', method: :get, class: 'filter-form js-filter-form' do
        .filtered-search-wrapper.d-flex
          .filtered-search-box
            = dropdown_tag(_('Recent searches'),
              options: { wrapper_class: 'filtered-search-history-dropdown-wrapper',
              toggle_class: 'gl-button btn btn-default filtered-search-history-dropdown-toggle-button',
              dropdown_class: 'filtered-search-history-dropdown',
              content_class: 'filtered-search-history-dropdown-content' }) do
              .js-filtered-search-history-dropdown{ data: { full_path: admin_runners_path } }
            .filtered-search-box-input-container.droplab-dropdown
              .scroll-container
                %ul.tokens-container.list-unstyled
                  %li.input-token
                    %input.form-control.filtered-search{ search_filter_input_options('runners') }
              #js-dropdown-hint.filtered-search-input-dropdown-menu.dropdown-menu.hint-dropdown
                %ul.filter-dropdown{ data: { dynamic: true, dropdown: true } }
                  %li.filter-dropdown-item{ data: {hint: "#{'{{hint}}'}", tag: "#{'{{tag}}'}", action: "#{'{{hint === \'search\' ? \'submit\' : \'\' }}'}" } }
                    = button_tag class: %w[gl-button btn btn-link] do
                      -# Encapsulate static class name `{{icon}}` inside #{} to bypass
                      -# haml lint's ClassAttributeWithStaticValue
                      %svg
                        %use{ 'xlink:href': "#{'{{icon}}'}" }
                      %span.js-filter-hint
                        {{formattedKey}}
              #js-dropdown-operator.filtered-search-input-dropdown-menu.dropdown-menu
                %ul.filter-dropdown{ data: { dropdown: true, dynamic: true } }
                  %li.filter-dropdown-item{ data: { value: "{{ title }}" } }
                    %button.gl-button.btn.btn-link{ type: 'button' }
                      {{ title }}
                      %span.btn-helptext
                        {{ help }}
              #js-dropdown-admin-runner-status.filtered-search-input-dropdown-menu.dropdown-menu
                %ul{ data: { dropdown: true } }
                  - Ci::Runner::AVAILABLE_STATUSES.each do |status|
                    %li.filter-dropdown-item{ data: { value: status } }
                      = button_tag class: %w[gl-button btn btn-link] do
                        = status.titleize

              #js-dropdown-admin-runner-type.filtered-search-input-dropdown-menu.dropdown-menu
                %ul{ data: { dropdown: true } }
                  - Ci::Runner::AVAILABLE_TYPES.each do |runner_type|
                    %li.filter-dropdown-item{ data: { value: runner_type } }
                      = button_tag class: %w[gl-button btn btn-link] do
                        = runner_type.titleize

            #js-dropdown-admin-runner-type.filtered-search-input-dropdown-menu.dropdown-menu
              %ul{ data: { dropdown: true } }
                - Ci::Runner::AVAILABLE_TYPES.each do |runner_type|
                  %li.filter-dropdown-item{ data: { value: runner_type } }
                    = button_tag class: %w[gl-button btn btn-link] do
                      = runner_type.titleize

            #js-dropdown-runner-tag.filtered-search-input-dropdown-menu.dropdown-menu
              %ul{ data: { dropdown: true } }
                %li.filter-dropdown-item{ data: { value: 'none' } }
                  %button.gl-button.btn.btn-link
                    = _('No Tag')
                %li.divider.droplab-item-ignore
              %ul.filter-dropdown{ data: { dynamic: true, dropdown: true } }
                %li.filter-dropdown-item
                  %button.gl-button.btn.btn-link.js-data-value
                    %span.dropdown-light-content
                      {{name}}

            = button_tag class: %w[clear-search hidden] do
              = sprite_icon('close', size: 16, css_class: 'clear-search-icon')
          .filter-dropdown-container
            = render 'sort_dropdown'

    .col-sm-3.text-right-lg
      = _('Runners currently online: %{active_runners_count}') % { active_runners_count: @active_runners_count }
  - if @runners.any?
    .content-list{ data: { testid: 'runners-table' } }
      .table-holder
        .gl-responsive-table-row.table-row-header{ role: 'row' }
          .table-section.section-10{ role: 'rowheader' }= _('Type/State')
          .table-section.section-30{ role: 'rowheader' }= s_('Runners|Runner')
          .table-section.section-10{ role: 'rowheader' }= _('Version')
          .table-section.section-10{ role: 'rowheader' }= _('IP Address')
          .table-section.section-5{ role: 'rowheader' }= _('Projects')
          .table-section.section-5{ role: 'rowheader' }= _('Jobs')
          .table-section.section-10{ role: 'rowheader' }= _('Tags')
          .table-section.section-10{ role: 'rowheader' }= _('Last contact')
          .table-section.section-10{ role: 'rowheader' }

        - @runners.each do |runner|
          = render 'admin/runners/runner', runner: runner
      = paginate @runners, theme: 'gitlab'
  - else
    .nothing-here-block= _('No runners found')