<div class="boxed-section">
  <div class="boxed-section-head">
    Task Groups
  </div>
  <div class="boxed-section-body is-full-bleed">
    <ListTable
      @source={{this.sortedTaskGroups}}
      @sortProperty={{this.sortProperty}}
      @sortDescending={{this.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="volumes.length">
          Volume
        </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|>
        <TaskGroupRow
          @data-test-task-group={{row.model.name}}
          @taskGroup={{row.model}}
          @onClick={{fn this.gotoTaskGroup row.model}}
        />
      </t.body>
    </ListTable>
  </div>
</div>