<div data-test-deployment-task-groups class="boxed-section">
  <div class="boxed-section-head">
    Task Groups
  </div>
  <div class="boxed-section-body is-full-bleed">
    <ListTable
      @source={{@deployment.taskGroupSummaries}}
      @class="task-groups" as |t|>
      <t.head>
        <th>Name</th>
        <th>Needs Promotion?</th>
        <th>Auto Revert?</th>
        <th>Canaries</th>
        <th>Allocs</th>
        <th>Healthy Allocs</th>
        <th>Unhealthy Allocs</th>
        <th>Progress Deadline</th>
      </t.head>
      <t.body as |row|>
        <tr data-test-deployment-task-group>
          <td data-test-deployment-task-group-name>{{row.model.name}}</td>
          <td data-test-deployment-task-group-promotion>
            {{#if row.model.requiresPromotion}}
              {{if row.model.promoted "No" "Yes"}}
            {{else}}
              N/A
            {{/if}}
          </td>
          <td data-test-deployment-task-group-auto-revert>{{if row.model.autoRevert "Yes" "No"}}</td>
          <td data-test-deployment-task-group-canaries>{{or row.model.placedCanaries 0}} / {{row.model.desiredCanaries}}</td>
          <td data-test-deployment-task-group-allocs>{{row.model.placedAllocs}} / {{row.model.desiredTotal}}</td>
          <td data-test-deployment-task-group-healthy>{{row.model.healthyAllocs}}</td>
          <td data-test-deployment-task-group-unhealthy>{{row.model.unhealthyAllocs}}</td>
          <td data-test-deployment-task-group-progress-deadline>
            <span class="nowrap">{{format-ts row.model.requireProgressBy}}</span>
          </td>
        </tr>
      </t.body>
    </ListTable>
  </div>
</div>

