.gl-responsive-table-row{ id: dom_id(runner) }
  .table-section.section-10.section-wrap
    .table-mobile-header{ role: 'rowheader' }= _('Type')
    .table-mobile-content
      - if runner.group_type?
        = gl_badge_tag s_('Runners|group'), variant: :success, size: :sm
      - else
        = gl_badge_tag s_('Runners|specific'), variant: :info, size: :sm
      - if runner.locked?
        = gl_badge_tag s_('Runners|locked'), variant: :warning, size: :sm
      - unless runner.active?
        = gl_badge_tag s_('Runners|paused'), { variant: :danger, size: :sm }, { title: s_('Runners|Not accepting jobs'), data: { toggle: 'tooltip', container: 'body' } }

  .table-section.section-30
    .table-mobile-header{ role: 'rowheader' }= s_('Runners|Runner')
    .table-mobile-content
      = link_to("##{runner.id} (#{runner.short_sha})", group_runner_path(@group, runner))
      .gl-text-truncate
        %span{ title: runner.description, data: { toggle: 'tooltip', container: 'body' } }
          = runner.description

  .table-section.section-10
    .table-mobile-header{ role: 'rowheader' }= _('Version')
    .table-mobile-content.str-truncated.has-tooltip{ title: runner.version }
      = runner.version

  .table-section.section-10
    .table-mobile-header{ role: 'rowheader' }= _('IP Address')
    .table-mobile-content.str-truncated.has-tooltip{ title: runner.ip_address }
      = runner.ip_address

  .table-section.section-5
    .table-mobile-header{ role: 'rowheader' }= _('Projects')
    .table-mobile-content
      - if runner.group_type?
        \-
      - else
        = runner.runner_projects.count(:all)

  .table-section.section-5
    .table-mobile-header{ role: 'rowheader' }= _('Jobs')
    .table-mobile-content
      = limited_counter_with_delimiter(runner.builds)

  .table-section.section-10.section-wrap
    .table-mobile-header{ role: 'rowheader' }= _('Tags')
    .table-mobile-content
      - runner.tags.map(&:name).sort.each do |tag|
        = gl_badge_tag tag, { variant: :info }, { class: 'str-truncated has-tooltip', title: tag }

  .table-section.section-10
    .table-mobile-header{ role: 'rowheader' }= _('Last contact')
    .table-mobile-content
      - contacted_at = runner_contacted_at(runner)
      - if contacted_at
        = time_ago_with_tooltip contacted_at
      - else
        = _('Never')

  .table-section.table-button-footer.section-10
    .btn-group.table-action-buttons
      .btn-group
        = link_to edit_group_runner_path(@group, runner), class: 'gl-button btn btn-default btn-icon has-tooltip', title: _('Edit'), ref: 'tooltip', aria: { label: _('Edit') }, data: { placement: 'top', container: 'body'} do
          = sprite_icon('pencil', css_class: 'gl-icon')
      .btn-group
        - if runner.active?
          = link_to pause_group_runner_path(@group, runner), method: :post, class: 'gl-button btn btn-default btn-icon', title: s_('Runners|Pause from accepting jobs'), ref: 'tooltip', aria: { label: _('Pause') }, data: { toggle: 'tooltip', container: 'body', confirm: _('Are you sure?') } do
            = sprite_icon('pause', css_class: 'gl-icon')
        - else
          = link_to resume_group_runner_path(@group, runner), method: :post, class: 'gl-button btn btn-default btn-icon', title: s_('Runners|Resume accepting jobs'), ref: 'tooltip', aria: { label: _('Resume') }, data: { toggle: 'tooltip', container: 'body'} do
            = sprite_icon('play', css_class: 'gl-icon')
      - if runner.belongs_to_more_than_one_project?
        - delete_runner_tooltip = _('Multi-project Runners cannot be removed')
        .btn-group.has-tooltip{ data: { container: 'body', placement: 'top' }, title: delete_runner_tooltip }
          .gl-button.btn.btn-danger.btn-icon{ 'aria-label' => delete_runner_tooltip, disabled: 'disabled' }
            = sprite_icon('close', css_class: 'gl-icon')
      - else
        .btn-group
          = link_to group_runner_path(@group, runner), method: :delete, class: 'gl-button btn btn-danger btn-icon has-tooltip', title: _('Remove'), ref: 'tooltip', aria: { label: _('Remove') }, data: { placement: 'top', container: 'body', confirm: _('Are you sure?'), confirm_btn_variant: "danger" } do
            = sprite_icon('close', css_class: 'gl-icon')