{{title 'Nodes'}}
<AppView @class="node list">
  <BlockSlot @name="header">
    <h1>
      Nodes <em>{{format-number items.length}} total</em>
    </h1>
    <label for="toolbar-toggle"></label>
  </BlockSlot>
  <BlockSlot @name="toolbar">
{{#if (gt items.length 0) }}
    <CatalogFilter @searchable={{array searchableHealthy searchableUnhealthy}} @search={{s}} @status={{filters.status}} @onchange={{action "filter"}} />
{{/if}}
  </BlockSlot>
  <BlockSlot @name="content">
{{#if (gt unhealthy.length 0) }}
      <div class="unhealthy">
        <h2>Unhealthy Nodes</h2>
        <div>
          {{! think about 2 differing views here }}
          <ul>
            <ChangeableSet @dispatcher={{searchableUnhealthy}}>
              <BlockSlot @name="set" as |unhealthy|>
                {{#each unhealthy as |item|}}
                  <HealthcheckedResource @tagName="li" @data-test-node={{item.Node}} @href={{href-to "dc.nodes.show" item.Node}} @name={{item.Node}} @address={{item.Address}} @checks={{item.Checks}}>
                    <BlockSlot @name="icon">
                      {{#if (eq item.Address leader.Address)}}
                        <span data-test-leader={{leader.Address}} data-tooltip="Leader">Leader</span>
                      {{/if}}
                    </BlockSlot>
                  </HealthcheckedResource>
                {{/each}}
              </BlockSlot>
              <BlockSlot @name="empty">
                <p>
                  There are no unhealthy nodes for that search.
                </p>
              </BlockSlot>
            </ChangeableSet>
          </ul>
        </div>
      </div>
{{/if}}
{{#if (gt healthy.length 0) }}
      <div class="healthy">
        <h2>Healthy Nodes</h2>
        <ChangeableSet @dispatcher={{searchableHealthy}}>
          <BlockSlot @name="set" as |healthy|>
            <GridCollection @cellHeight={{92}} @items={{healthy}} as |item index|>
              <HealthcheckedResource @data-test-node={{item.Node}} @href={{href-to "dc.nodes.show" item.Node}} @name={{item.Node}} @address={{item.Address}} @checks={{item.Checks}}>
                <BlockSlot @name="icon">
                  {{#if (eq item.Address leader.Address)}}
                    <span data-test-leader={{leader.Address}} data-tooltip="Leader">Leader</span>
                  {{/if}}
                </BlockSlot>
              </HealthcheckedResource>
            </GridCollection>
          </BlockSlot>
          <BlockSlot @name="empty">
            <p>
              There are no healthy nodes for that search.
            </p>
          </BlockSlot>
        </ChangeableSet>
      </div>
{{/if}}
{{#if (and (eq healthy.length 0) (eq unhealthy.length 0)) }}
      <EmptyState @allowLogin={{true}}>
        <BlockSlot @name="header">
          <h2>Welcome to Nodes</h2>
        </BlockSlot>
        <BlockSlot @name="body">
          <p>
            There don't seem to be any nodes, or you may not have access to view nodes yet.
          </p>
        </BlockSlot>
        <BlockSlot @name="actions">
          <li class="docs-link">
            <a href="{{env 'CONSUL_DOCS_URL'}}" rel="noopener noreferrer" target="_blank">Documentation on nodes</a>
          </li>
          <li class="learn-link">
            <a href="{{env 'CONSUL_DOCS_LEARN_URL'}}/consul/" rel="noopener noreferrer" target="_blank">Read the guide</a>
          </li>
        </BlockSlot>
      </EmptyState>
{{/if}}
  </BlockSlot>
</AppView>