<ListCollection
  class="consul-node-list"
  @items={{@items}}
as |item index|>
  <BlockSlot @name="header">
    <dl class={{item.Status}}>
      <dt>
        Health
      </dt>
      <dd>
        <Tooltip @position="top-start">
          {{#if (eq 'critical' item.Status)}}
            At least one health check on this node is failing.
          {{else if (eq 'warning' item.Status)}}
            At least one health check on this node has a warning.
          {{else if (eq 'passing' item.Status)}}
            All health checks are passing.
          {{else}}
            There are no health checks.
          {{/if}}
        </Tooltip>
      </dd>
    </dl>
    <a data-test-node href={{href-to "dc.nodes.show" item.Node}}>
      {{item.Node}}
    </a>
  </BlockSlot>
  <BlockSlot @name="details">
  {{#if (eq item.Address @leader.Address)}}
    <span class="leader" data-test-leader={{@leader.Address}}>Leader</span>
  {{/if}}
    <span>
      {{format-number item.MeshServiceInstances.length}} {{pluralize item.MeshServiceInstances.length 'Service' without-count=true}}
    </span>
    <dl>
      <dt>
        <span>Address</span>
      </dt>
      <dd>
        <CopyButton
          @value={{item.Address}}
          @name="Address"
        />
        {{item.Address}}
      </dd>
    </dl>
  </BlockSlot>
</ListCollection>
