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

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

  .table-section.section-25.build-column{ role: 'gridcell' }
    .table-mobile-header{ role: 'rowheader' }= _("Job")
    - if deployment.deployable
      .table-mobile-content
        .flex-truncate-parent
          .flex-truncate-child
            = link_to [@project.namespace.becomes(Namespace), @project, deployment.deployable], class: 'build-link' do
              #{deployment.deployable.name} (##{deployment.deployable.id})
        - if deployment.deployed_by
          %div
            by
            = user_avatar(user: deployment.deployed_by, size: 20, css_class: "mr-0 float-none")

  .table-section.section-15{ role: 'gridcell' }
    .table-mobile-header{ role: 'rowheader' }= _("Created")
    - if deployment.deployed_at
      %span.table-mobile-content= time_ago_with_tooltip(deployment.deployed_at)

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