{{#global-header class="page-header"}}
  {{#each breadcrumbs as |breadcrumb|}}
    {{#link-to params=breadcrumb.args class="breadcrumb"}}{{breadcrumb.label}}{{/link-to}}
  {{/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}}">{{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><strong>Type:</strong> {{model.type}} | </span>
        <span><strong>Priority:</strong> {{model.priority}} </span>
        {{#if (and model.namespace system.shouldShowNamespaces)}}
          <span> | <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 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">{{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 placement-failures">
        <div class="boxed-section-head">
          Placement Failures
        </div>
        <div class="boxed-section-body">
          {{#each model.taskGroups as |taskGroup|}}
            {{#if taskGroup.placementFailures}}
              {{#with taskGroup.placementFailures as |failures|}}
                  <h3 class="title is-5">
                    {{taskGroup.name}}
                    <span class="badge is-light">{{inc failures.coalescedFailures}} unplaced</span>
                  </h3>
                  <ul class="simple-list">
                    {{#if (eq failures.nodesEvaluated 0)}}
                      <li>No nodes were eligible for evaluation</li>
                    {{/if}}
                    {{#each-in failures.nodesAvailable as |datacenter available|}}
                      {{#if (eq available 0)}}
                        <li>No nodes are available in datacenter {{datacenter}}</li>
                      {{/if}}
                    {{/each-in}}
                    {{#each-in failures.classFiltered as |class count|}}
                      <li>Class {{class}} filtered {{count}} {{pluralize "node" count}}</li>
                    {{/each-in}}
                    {{#each-in failures.constraintFiltered as |constraint count|}}
                      <li>Constraint <code>{{constraint}}</code> filtered {{count}} {{pluralize "node" count}}</li>
                    {{/each-in}}
                    {{#if failures.nodesExhausted}}
                      <li>Resources exhausted on {{failures.nodesExhausted}} {{pluralize "node" failures.nodesExhausted}}</li>
                    {{/if}}
                    {{#each-in failures.classExhausted as |class count|}}
                      <li>Class {{class}} exhausted on {{count}} {{pluralize "node" count}}</li>
                    {{/each-in}}
                    {{#each-in failures.dimensionExhausted as |dimension count|}}
                      <li>Dimension {{dimension}} exhausted on {{count}} {{pluralize "node" count}}</li>
                    {{/each-in}}
                    {{#each-in failures.quotaExhausted as |quota dimension|}}
                      <li>Quota limit hit {{dimension}}</li>
                    {{/each-in}}
                    {{#each-in failures.scores as |name score|}}
                      <li>Score {{name}} = {{score}}</li>
                    {{/each-in}}
                  </ul>
              {{/with}}
            {{/if}}
          {{/each}}
        </div>
      </div>
    {{/if}}

    {{#if model.runningDeployment}}
      <div class="boxed-section is-info active-deployment">
        <div class="boxed-section-head">
          <div class="boxed-section-row">
            Active Deployment
            <span class="badge is-white is-subtle bumper-left">{{model.runningDeployment.shortId}}</span>
            {{#if model.runningDeployment.version.submitTime}}
              <span class="pull-right 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 active-deployment-details-toggle" {{action (toggle "isShowingDeploymentDetails" this)}}>
            {{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 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>
              <td>{{row.model.shortId}}</td>
              <td>{{row.model.priority}}</td>
              <td>{{row.model.triggeredBy}}</td>
              <td>{{row.model.status}}</td>
              <td>
                {{#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}}