%ul.nav.nav-tabs#workflow-run-tabs{ role: 'tablist' }
  %li.nav-item{ role: 'presentation' }
    %a.nav-link{ id: "incoming-webhook-tab#{id}", data: { 'bs-toggle': 'tab' }, href: "#incoming-webhook-tab-content#{id}",
                 role: 'tab', aria: { controls: "incoming-webhook-tab-content#{id}", selected: 'false' } }
      Webhook from #{scm_vendor}
  %li.nav-item{ role: 'presentation' }
    %a.nav-link{ id: "workflow-configuration-tab#{id}", data: { 'bs-toggle': 'tab' }, href: "#workflow-configuration-tab-content#{id}",
                 role: 'tab', aria: { controls: "workflow-configuration-tab-content#{id}", selected: 'false' } }
      Workflow Configuration
  %li.nav-item{ role: 'presentation' }
    %a.nav-link{ id: "scm-reports-tab#{id}", data: { 'bs-toggle': 'tab' }, href: "#scm-reports-tab-content#{id}",
                 role: 'tab', aria: { controls: "scm-reports-tab-content#{id}", selected: 'false' } }
      Reports to the SCM
  %li.nav-item{ role: 'presentation' }
    %a.nav-link{ id: "artifacts#{id}", data: { 'bs-toggle': 'tab' }, href: "#artifacts-tab-content#{id}",
                 role: 'tab', aria: { controls: "artifacts-tab-content#{id}", selected: 'false' } }
      Artifacts
.tab-content.p-3#workflow-run-tabs-content
  .tab-pane.fade{ id: "incoming-webhook-tab-content#{id}", role: 'tabpanel',
                  aria: { labelledby: "incoming-webhook-tab#{id}" } }
    - if response_url.present?
      %h5 Webhook URL
      %pre.border.p-2#response-url
        = response_url
    %h5 Webhook Request Headers
    %pre.border.p-2#request-headers
      = request_headers
    - if response_body.present?
      %h5 Webhook Response Body
      %pre.border.p-2#response-body
        = response_body
    - if pretty_request_payload.present?
      %h5 Webhook Request Payload
      %pre.border.p-2#request-payload
        = pretty_request_payload
  .tab-pane.fade{ id: "workflow-configuration-tab-content#{id}", role: 'tabpanel',
                  aria: { labelledby: "workflow-configuration-tab#{id}" } }
    = workflow_configuration_data
  .tab-pane.fade{ id: "scm-reports-tab-content#{id}", role: 'tabpanel',
                  aria: { labelledby: "scm-reports-tab#{id}" } }
    - if status_reports.any?
      .list-group.list-group-flush
        - status_reports.each do |status_report|
          .list-group-item
            %h5 Response Body
            %p
              %span.badge{ class: status_report.status_class }= status_report.status&.humanize
            - if status_report.response_body.present?
              %pre.border.p-2#status-report-response-body
                = status_report.response_body
            - if status_report.pretty_request_parameters.present?
              %h5 Request Parameters
              %pre.border.p-2#status-report-request-parameters
                = status_report.pretty_request_parameters
              %small.text-nowrap{ title: l(status_report.created_at.utc) }
                Sent
                = render TimeComponent.new(time: status_report.created_at)

    - else
      No status reports
  .tab-pane.fade{ id: "artifacts-tab-content#{id}", role: 'tabpanel',
                  aria: { labelledby: "artifacts#{id}" } }
    %h5 Artifacts
    %ul
      = render(WorkflowArtifactsPerStepComponent.with_collection(artifacts))
