{{page-title "Job " this.job.name " allocations"}}
<JobSubnav @job={{this.job}} />
<section class="section">
  {{#if this.allocations.length}}
    <div class="toolbar">
      <div class="toolbar-item">
        <SearchBox
          data-test-allocations-search
          @searchTerm={{mut this.searchTerm}}
          @onChange={{action this.resetPagination}}
          @placeholder="Search allocations..." />
      </div>
      <div class="toolbar-item is-right-aligned">
        <div class="button-bar">
          <MultiSelectDropdown
            data-test-allocation-status-facet
            @label="Status"
            @options={{this.optionsAllocationStatus}}
            @selection={{this.selectionStatus}}
            @onSelect={{action this.setFacetQueryParam "qpStatus"}}
          />
          <MultiSelectDropdown
            data-test-allocation-client-facet
            @label="Client"
            @options={{this.optionsClients}}
            @selection={{this.selectionClient}}
            @onSelect={{action this.setFacetQueryParam "qpClient"}}
          />
          <MultiSelectDropdown
            data-test-allocation-task-group-facet
            @label="Task Group"
            @options={{this.optionsTaskGroups}}
            @selection={{this.selectionTaskGroup}}
            @onSelect={{action this.setFacetQueryParam "qpTaskGroup"}}
          />
        </div>
      </div>
    </div>
    {{#if this.sortedAllocations}}
      <ListPagination
        @source={{this.sortedAllocations}}
        @size={{this.pageSize}}
        @page={{this.currentPage}}
        @class="allocations" as |p|>
        <ListTable
          @source={{p.list}}
          @sortProperty={{this.sortProperty}}
          @sortDescending={{this.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="taskGroupName">Task Group</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|>
            <AllocationRow
              @data-test-allocation={{row.model.id}}
              @allocation={{row.model}}
              @context="job"
              @onClick={{action "gotoAllocation" row.model}} />
          </t.body>
        </ListTable>
        <div class="table-foot">
          <nav class="pagination">
            <div class="pagination-numbers">
              {{p.startsAt}}&ndash;{{p.endsAt}} of {{this.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>
      </ListPagination>
    {{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 Matches</h3>
          <p class="empty-message-body">No allocations match the term <strong>{{this.searchTerm}}</strong></p>
        </div>
      </div>
    {{/if}}
  {{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}}
</section>