{{title "Task group " model.name " - Job " model.job.name}}
<div class="tabs is-subnav">
  <ul>
    <li>{{#link-to "jobs.job.task-group" model.job model activeClass="is-active"}}Overview{{/link-to}}</li>
  </ul>
</div>
<section class="section">
  <h1 class="title with-flex">
    <span>{{model.name}}</span>
    {{exec/open-button job=model.job taskGroup=model}}
  </h1>

  <div class="boxed-section is-small">
    <div class="boxed-section-body inline-definitions">
      <span class="label">Task Group Details</span>

      <span class="pair" data-test-task-group-tasks><span class="term"># Tasks</span> {{model.tasks.length}}</span>
      <span class="pair" data-test-task-group-cpu><span class="term">Reserved CPU</span> {{model.reservedCPU}} MHz</span>
      <span class="pair" data-test-task-group-mem><span class="term">Reserved Memory</span> {{model.reservedMemory}} MiB</span>
      <span class="pair" data-test-task-group-disk><span class="term">Reserved Disk</span> {{model.reservedEphemeralDisk}} MiB</span>
    </div>
  </div>

  <div class="boxed-section">
    <div class="boxed-section-head">
      <div>Allocation Status <span class="badge is-white">{{allocations.length}}</span></div>
    </div>
    <div class="boxed-section-body">
      {{#allocation-status-bar allocationContainer=model.summary class="split-view" as |chart|}}
        <ol class="legend">
          {{#each chart.data as |datum index|}}
            <li class="{{datum.className}} {{if (eq datum.label chart.activeDatum.label) "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>

  <div class="boxed-section">
    <div class="boxed-section-head">
      Allocations
      {{search-box
        searchTerm=(mut searchTerm)
        placeholder="Search allocations..."
        onChange=(action resetPagination)
        class="is-inline pull-right"
        inputClass="is-compact"}}
    </div>
    <div class="boxed-section-body is-full-bleed">
      {{#if sortedAllocations}}
        {{#list-pagination
          source=sortedAllocations
          size=pageSize
          page=currentPage
          class="allocations" as |p|}}
          {{#list-table
            source=p.list
            sortProperty=sortProperty
            sortDescending=sortDescending
            class="with-foot" as |t|}}
            {{#t.head}}
              <th class="is-narrow"></th>
              {{#t.sort-by prop="shortId"}}ID{{/t.sort-by}}
              {{#t.sort-by prop="createIndex" title="Create Index"}}Created{{/t.sort-by}}
              {{#t.sort-by prop="modifyIndex" title="Modify Index"}}Modified{{/t.sort-by}}
              {{#t.sort-by prop="statusIndex"}}Status{{/t.sort-by}}
              {{#t.sort-by prop="jobVersion"}}Version{{/t.sort-by}}
              {{#t.sort-by prop="node.shortId"}}Client{{/t.sort-by}}
              <th>Volume</th>
              <th>CPU</th>
              <th>Memory</th>
            {{/t.head}}
            {{#t.body as |row|}}
              {{allocation-row data-test-allocation=row.model.id allocation=row.model context="taskGroup" onClick=(action "gotoAllocation" row.model)}}
            {{/t.body}}
          {{/list-table}}
          <div class="table-foot">
            <nav class="pagination">
              <div class="pagination-numbers">
                {{p.startsAt}}&ndash;{{p.endsAt}} of {{sortedAllocations.length}}
              </div>
              {{#p.prev class="pagination-previous"}} &lt; {{/p.prev}}
              {{#p.next class="pagination-next"}} &gt; {{/p.next}}
              <ul class="pagination-list"></ul>
            </nav>
          </div>
        {{/list-pagination}}
      {{else}}
        {{#if allocations.length}}
          <div class="boxed-section-body">
            <div class="empty-message" data-test-empty-allocations-list>
              <h3 class="empty-message-headline" data-test-empty-allocations-list-headline>No Matches</h3>
              <p class="empty-message-body">No allocations match the term <strong>{{searchTerm}}</strong></p>
            </div>
          </div>
        {{else}}
          <div class="boxed-section-body">
            <div class="empty-message" data-test-empty-allocations-list>
              <h3 class="empty-message-headline" data-test-empty-allocations-list-headline>No Allocations</h3>
              <p class="empty-message-body">No allocations have been placed.</p>
            </div>
          </div>
        {{/if}}
      {{/if}}
    </div>
  </div>

  {{#if model.volumes.length}}
    <div data-test-volumes class="boxed-section">
      <div class="boxed-section-head">
        Volume Requirements
      </div>
      <div class="boxed-section-body is-full-bleed">
        {{#list-table source=model.volumes as |t|}}
          {{#t.head}}
            <th>Name</th>
            <th>Type</th>
            <th>Source</th>
            <th>Permissions</th>
          {{/t.head}}
          {{#t.body as |row|}}
            <tr data-test-volume>
              <td data-test-volume-name>{{row.model.name}}</td>
              <td data-test-volume-type>{{row.model.type}}</td>
              <td data-test-volume-source>{{row.model.source}}</td>
              <td data-test-volume-permissions>{{if row.model.readOnly "Read" "Read/Write"}}</td>
            </tr>
          {{/t.body}}
        {{/list-table}}
      </div>
    </div>
  {{/if}}
</section>