{{#global-header class="page-header"}}
  {{#each breadcrumbs as |breadcrumb index|}}
    <li class="{{if (eq (inc index) breadcrumbs.length) "is-active"}}">
      {{#link-to data-test-breadcrumb=breadcrumb.label params=breadcrumb.args}}{{breadcrumb.label}}{{/link-to}}
    </li>
  {{/each}}
{{/global-header}}
{{#gutter-menu class="page-body" onNamespaceChange=(action "gotoJobs")}}
  {{partial "jobs/job/subnav"}}
  <section class="section">
    <h1 class="title">
      {{model.name}}
      <span class="bumper-left tag {{model.statusClass}}" data-test-job-status>{{model.status}}</span>
      {{#if model.periodic}}
        <span class="tag is-hollow">periodic</span>
      {{else if model.parameterized}}
        <span class="tag is-hollow">parameterized</span>
      {{/if}}
    </h1>

    <div class="boxed-section job-stats">
      <div class="boxed-section-body">
        <span data-test-job-stat="type"><strong>Type:</strong> {{model.type}} | </span>
        <span data-test-job-stat="priority"><strong>Priority:</strong> {{model.priority}} </span>
        {{#if (and model.namespace system.shouldShowNamespaces)}}
          <span data-test-job-stat="namespace"> | <strong>Namespace:</strong> {{model.namespace.name}}</span>
        {{/if}}
      </div>
    </div>

    <div class="boxed-section">
      <div class="boxed-section-head">
        <div>Allocation Status <span class="badge is-white">{{taskGroups.length}}</span></div>
      </div>
      <div class="boxed-section-body">
        {{#allocation-status-bar allocationContainer=model class="split-view" as |chart|}}
          <ol data-test-allocations-legend class="legend">
            {{#each chart.data as |datum index|}}
              <li class="{{datum.className}} {{if (eq datum.index chart.activeDatum.index) "is-active"}} {{if (eq datum.value 0) "is-empty"}}">
                <span class="color-swatch {{if datum.className datum.className (concat "swatch-" index)}}" />
                <span class="value" data-test-legend-value="{{datum.className}}">{{datum.value}}</span>
                <span class="label">
                  {{datum.label}}
                </span>
              </li>
            {{/each}}
          </ol>
        {{/allocation-status-bar}}
      </div>
    </div>

    {{#if model.hasPlacementFailures}}
      <div class="boxed-section is-danger" data-test-placement-failures>
        <div class="boxed-section-head">
          Placement Failures
        </div>
        <div class="boxed-section-body">
          {{#each model.taskGroups as |taskGroup|}}
            {{placement-failure taskGroup=taskGroup}}
          {{/each}}
        </div>
      </div>
    {{/if}}

    {{#if model.runningDeployment}}
      <div class="boxed-section is-info" data-test-active-deployment>
        <div class="boxed-section-head">
          <div class="boxed-section-row">
            Active Deployment
            <span class="badge is-white is-subtle bumper-left" data-test-active-deployment-stat="id">{{model.runningDeployment.shortId}}</span>
            {{#if model.runningDeployment.version.submitTime}}
              <span class="pull-right submit-time" data-test-active-deployment-stat="submit-time">{{moment-from-now model.runningDeployment.version.submitTime}}</span>
            {{/if}}
          </div>
          <div class="boxed-section-row">
            <span class="tag is-info is-outlined">Running</span>
            {{#if model.runningDeployment.requiresPromotion}}
              <span class="tag bumper-left is-warning no-text-transform">Deployment is running but requires promotion</span>
            {{/if}}
          </div>
        </div>
        <div class="boxed-section-body with-foot">
          {{#job-deployment-details deployment=model.runningDeployment as |d|}}
            {{d.metrics}}
            {{#if isShowingDeploymentDetails}}
              {{d.taskGroups}}
              {{d.allocations}}
            {{/if}}
          {{/job-deployment-details}}
        </div>
        <div class="boxed-section-foot">
          <a class="pull-right" {{action (toggle "isShowingDeploymentDetails" this)}} data-test-deployment-toggle-details>
            {{if isShowingDeploymentDetails "Hide" "Show"}} deployment task groups and allocations
          </a>
        </div>
      </div>
    {{/if}}

    <div class="boxed-section">
      <div class="boxed-section-head">
        Task Groups
      </div>
      <div class="boxed-section-body is-full-bleed">
        {{#list-pagination
          source=sortedTaskGroups
          sortProperty=sortProperty
          sortDescending=sortDescending as |p|}}
          {{#list-table
            source=p.list
            sortProperty=sortProperty
            sortDescending=sortDescending as |t|}}
            {{#t.head}}
              {{#t.sort-by prop="name"}}Name{{/t.sort-by}}
              {{#t.sort-by prop="count"}}Count{{/t.sort-by}}
              {{#t.sort-by prop="queuedOrStartingAllocs" class="is-3"}}Allocation Status{{/t.sort-by}}
              {{#t.sort-by prop="reservedCPU"}}Reserved CPU{{/t.sort-by}}
              {{#t.sort-by prop="reservedMemory"}}Reserved Memory{{/t.sort-by}}
              {{#t.sort-by prop="reservedEphemeralDisk"}}Reserved Disk{{/t.sort-by}}
            {{/t.head}}
            {{#t.body as |row|}}
              {{task-group-row data-test-task-group taskGroup=row.model onClick=(action "gotoTaskGroup" row.model)}}
            {{/t.body}}
          {{/list-table}}
        {{/list-pagination}}
      </div>
    </div>

    <div class="boxed-section">
      <div class="boxed-section-head">
        Evaluations
      </div>
      <div class="boxed-section-body is-full-bleed evaluations">
        {{#list-table source=sortedEvaluations as |t|}}
          {{#t.head}}
            <th>ID</th>
            <th>Priority</th>
            <th>Triggered By</th>
            <th>Status</th>
            <th>Placement Failures</th>
          {{/t.head}}
          {{#t.body as |row|}}
            <tr data-test-evaluation="{{row.model.shortId}}">
              <td data-test-id>{{row.model.shortId}}</td>
              <td data-test-priority>{{row.model.priority}}</td>
              <td data-test-triggered-by>{{row.model.triggeredBy}}</td>
              <td data-test-status>{{row.model.status}}</td>
              <td data-test-blocked>
                {{#if (eq row.model.status "blocked")}}
                  N/A - In Progress
                {{else if row.model.hasPlacementFailures}}
                  True
                {{else}}
                  False
                {{/if}}
              </td>
            </tr>
          {{/t.body}}
        {{/list-table}}
      </div>
    </div>
  </section>
{{/gutter-menu}}