<JobPage @job={{@job}} as |jobPage|>
  <jobPage.ui.Body>
    <jobPage.ui.Error />
    <jobPage.ui.Title @title={{@job.trimmedName}} />
    <jobPage.ui.StatsBox>
      <:before-namespace>
        <span class="pair" data-test-job-stat="parent">
          <span class="term">
            Parent
          </span>
          <LinkTo
            @route="jobs.job"
            @model={{@job.parent}}
            @query={{hash namespace=@job.parent.namespace.name}}
          >
            {{@job.parent.name}}
          </LinkTo>
        </span>
      </:before-namespace>
    </jobPage.ui.StatsBox>
    <jobPage.ui.JobClientStatusSummary />
    <jobPage.ui.Summary @forceCollapsed={{@job.hasClientStatus}} />
    <jobPage.ui.PlacementFailures />
    <jobPage.ui.TaskGroups @sortProperty={{@sortProperty}} @sortDescending={{@sortDescending}} />
    <jobPage.ui.RecentAllocations />
    <div class="boxed-section">
      <div class="boxed-section-head">
        Meta
      </div>
      {{#if @job.definition.Meta}}
        <jobPage.ui.Meta />
      {{else}}
        <div class="boxed-section-body">
          <div data-test-empty-meta-message class="empty-message">
            <h3 class="empty-message-headline">
              No Meta Attributes
            </h3>
            <p class="empty-message-body">
              This job is configured with no meta attributes.
            </p>
          </div>
        </div>
      {{/if}}
    </div>
    <div class="boxed-section">
      <div class="boxed-section-head">
        Payload
      </div>
      <div class="boxed-section-body is-dark">
        {{#if this.payloadJSON}}
          <JsonViewer @json={{this.payloadJSON}} />
        {{else}}
          <pre class="cli-window is-elastic">
            <code>
              {{this.payload}}
            </code>
          </pre>
        {{/if}}
      </div>
    </div>
  </jobPage.ui.Body>
</JobPage>