<div class="boxed-section">
  <div class="boxed-section-head">
    Recent Allocations
  </div>
  <div
    class="boxed-section-body
      {{if this.job.allocations.length "is-full-bleed"}}"
  >
    {{#if this.job.allocations.length}}
      <ListTable
        @source={{this.sortedAllocations}}
        @sortProperty={{this.sortProperty}}
        @sortDescending={{this.sortDescending}}
        @class="with-foot" as |t|
      >
        <t.head>
          <th class="is-narrow"></th>
          <th>
            ID
          </th>
          <th>
            Task Group
          </th>
          <th>
            Created
          </th>
          <th>
            Modified
          </th>
          <th>
            Status
          </th>
          <th>
            Version
          </th>
          <th>
            Client
          </th>
          <th>
            Volume
          </th>
          <th>
            CPU
          </th>
          <th>
            Memory
          </th>
        </t.head>
        <t.body as |row|>
          <AllocationRow
            @data-test-allocation={{row.model.id}}
            @allocation={{row.model}}
            @context="job"
            @onClick={{action "gotoAllocation" row.model}}
          />
        </t.body>
      </ListTable>
    {{else}}
      <div class="empty-message" data-test-empty-recent-allocations>
        <h3
          class="empty-message-headline"
          data-test-empty-recent-allocations-headline
        >
          No Allocations
        </h3>
        <p
          class="empty-message-body"
          data-test-empty-recent-allocations-message
        >
          No allocations have been placed.
        </p>
      </div>
    {{/if}}
  </div>
  {{#if this.job.allocations.length}}
    <div class="boxed-section-foot">
      <p class="pull-right" data-test-view-all-allocations>
        <LinkTo @route="jobs.job.allocations" @model={{this.job}}>
          View all
          {{this.job.allocations.length}}
          {{pluralize "allocation" this.job.allocations.length}}
        </LinkTo>
      </p>
    </div>
  {{/if}}
</div>