.gl-responsive-table-row.deployment{ role: 'row' }
  .table-section.section-15{ role: 'gridcell' }
    .table-mobile-header{ role: 'rowheader' }= _("Status")
    .table-mobile-content
      = render_deployment_status(deployment)

  .table-section.section-10{ role: 'gridcell' }
    .table-mobile-header{ role: 'rowheader' }= _("ID")
    %strong.table-mobile-content{ data: { testid: 'deployment-id' } } ##{deployment.iid}

  .table-section.section-10{ role: 'gridcell' }
    .table-mobile-header{ role: 'rowheader' }= _("Triggerer")
    .table-mobile-content
      - if deployment.deployed_by
        = user_avatar(user: deployment.deployed_by, size: 26, css_class: "mr-0 float-none")

  .table-section.section-25{ role: 'gridcell' }
    .table-mobile-header{ role: 'rowheader' }= _("Commit")
    = render 'projects/deployments/commit', deployment: deployment

  .table-section.section-10.build-column{ role: 'gridcell' }
    .table-mobile-header{ role: 'rowheader' }= _("Job")
    - if deployment.deployable
      .table-mobile-content
        .flex-truncate-parent
          .flex-truncate-child
            = link_to deployment_path(deployment), class: 'build-link' do
              #{deployment.deployable.name} (##{deployment.deployable.id})
    - else
      = gl_badge_tag s_('Deployment|API'), { variant: :info }, { class: 'gl-cursor-help', data: { toggle: 'tooltip' }, title: s_('Deployment|This deployment was created using the API') }

  .table-section.section-10{ role: 'gridcell' }
    .table-mobile-header{ role: 'rowheader' }= _("Created")
    %span.table-mobile-content.flex-truncate-parent
      %span.flex-truncate-child
        = time_ago_with_tooltip(deployment.created_at)

  .table-section.section-10{ role: 'gridcell' }
    .table-mobile-header{ role: 'rowheader' }= _("Deployed")
    - if deployment.deployed_at
      %span.table-mobile-content.flex-truncate-parent
        %span.flex-truncate-child
          = time_ago_with_tooltip(deployment.deployed_at)

  .table-section.section-10.table-button-footer{ role: 'gridcell' }
    .btn-group.table-action-buttons
      = render 'projects/deployments/actions', deployment: deployment
      = render 'projects/deployments/rollback', deployment: deployment
      = render_if_exists 'projects/deployments/approvals', deployment: deployment