.gl-responsive-table-row.px-md-3
  .table-section.section-25.section-wrap.commit
    .table-mobile-header{ role: 'rowheader' }= _('Job')
    .table-mobile-content
      .branch-commit.cgray
        - if can?(current_user, :read_build, @project)
          = link_to project_job_path(@project, artifact.job) do
            %span.build-link ##{artifact.job_id}
        - else
          %span.build-link ##{artifact.job_id}

        - if artifact.job.ref
          .icon-container.gl-display-inline-block{ "aria-label" => artifact.job.tag? ? _('Tag') : _('Branch') }
            = artifact.job.tag? ? sprite_icon('tag', css_class: 'sprite') : sprite_icon('branch', css_class: 'sprite')
          = link_to artifact.job.ref, project_ref_path(@project, artifact.job.ref), class: 'ref-name'
        - else
          .light= _('none')
        .icon-container.commit-icon{ "aria-label" => _('Commit') }
          = sprite_icon('commit')

        - if artifact.job.sha
          = link_to artifact.job.short_sha, project_commit_path(@project, artifact.job.sha), class: 'commit-sha mr-0'

  .table-section.section-15.section-wrap
    .table-mobile-header{ role: 'rowheader' }= _('Name')
    .table-mobile-content
      = artifact.job.name

  .table-section.section-20
    .table-mobile-header{ role: 'rowheader' }= _('Creation date')
    .table-mobile-content
      %p.finished-at
        = sprite_icon("calendar")
        %span= time_ago_with_tooltip(artifact.created_at)

  .table-section.section-20
    .table-mobile-header{ role: 'rowheader' }= _('Expiration date')
    .table-mobile-content
      - if artifact.expire_at
        %p.finished-at
          = sprite_icon("calendar")
          %span= time_ago_with_tooltip(artifact.expire_at)

  .table-section.section-10
    .table-mobile-header{ role: 'rowheader' }= _('Size')
    .table-mobile-content
      = number_to_human_size(artifact.size, precision: 2)

  .table-section.table-button-footer.section-10
    .table-action-buttons
      .btn-group
        - if can?(current_user, :read_build, @project)
          = link_to download_project_job_artifacts_path(@project, artifact.job), rel: 'nofollow', download: '', title: _('Download artifacts'), data: { placement: 'top', container: 'body' }, ref: 'tooltip', aria: { label: _('Download artifacts') }, class: 'gl-button btn btn-default btn-icon has-tooltip' do
            = sprite_icon('download', css_class: 'gl-icon')

          = link_to browse_project_job_artifacts_path(@project, artifact.job), rel: 'nofollow', title: _('Browse artifacts'), data: { placement: 'top', container: 'body' }, ref: 'tooltip', aria: { label: _('Browse artifacts') }, class: 'gl-button btn btn-default btn-icon has-tooltip' do
            = sprite_icon('folder-open', css_class: 'gl-icon')

        - if can?(current_user, :destroy_artifacts, @project)
          = link_to project_artifact_path(@project, artifact), data: { placement: 'top', container: 'body', confirm: _('Are you sure you want to delete these artifacts?') }, method: :delete, title: _('Delete artifacts'), ref: 'tooltip', aria: { label: _('Delete artifacts') }, class: 'gl-button btn btn-danger btn-icon has-tooltip' do
            = sprite_icon('remove', css_class: 'gl-icon')