{{#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"}}
  {{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.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>
  </section>
{{/gutter-menu}}