{{!
  Copyright (c) HashiCorp, Inc.
  SPDX-License-Identifier: MPL-2.0
~}}

<div class="boxed-section">
  <div class="boxed-section-head">
    Recent Allocations
    <span class="pull-right is-padded">
      <Toggle
        @isActive={{this.showSubTasks}}
        @onToggle={{this.toggleShowSubTasks}}
        title="Show tasks of allocations"
      >Show Tasks</Toggle>
    </span>
  </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 {{if this.showSubTasks "with-collapsed-borders"}}" 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}}
            @showSubTasks={{this.showSubTasks}}
            {{keyboard-shortcut
              enumerated=true
              action=(action "gotoAllocation" row.model)
            }}
          />

          {{#if this.showSubTasks}}
            {{#each row.model.states as |task|}}
              <TaskSubRow @namespan="9" @taskState={{task}} @active={{eq @activeTask (concat task.allocation.id "-" task.name)}} @onSetActiveTask={{@setActiveTaskQueryParam}} />
            {{/each}}
          {{/if}}
        </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>