{{title 'Nodes'}}
{{#let (selectable-key-values
    (array "" "All (Any Status)")
    (array "critical" "Critical Checks")
    (array "warning" "Warning Checks")
    (array "passing" "Passing Checks")
      selected=filterBy
  )
  as |filter|
}}
<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) }}
      <SearchBar
        data-test-catalog-filter
        @value={{search}}
        @onsearch={{action (mut search) value="target.value"}}
        @selected={{filter.selected}}
        @options={{filter.items}}
        @onchange={{action (mut filterBy) value='target.value'}}
      />
{{/if}}
  </BlockSlot>
  <BlockSlot @name="content">
{{#let (filter-by "Checks" (action "isUnhealthy") items) as |unhealthy|}}
  {{#if (gt unhealthy.length 0) }}
      <div class="unhealthy">
        <h2>Unhealthy Nodes</h2>
        <div>
          {{! think about 2 differing views here }}
          <ul>
            <ChangeableSet
              @dispatcher={{
                searchable
                  'unhealthyNode'
                  (if (eq filter.selected.key "")
                    unhealthy
                    (filter-by "Checks" (action "hasStatus" filter.selected.key) unhealthy filter.selected.key)
                  )
              }}
              @terms={{search}}
            >
              <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">
                <li class="empty">
                  <EmptyState>
                    <BlockSlot @name="header">
                      <h2>No nodes found</h2>
                    </BlockSlot>
                    <BlockSlot @name="body">
                      <p>
                        There don't seem to be any nodes matching that search.
                      </p>
                    </BlockSlot>
                  </EmptyState>
                </li>
              </BlockSlot>
            </ChangeableSet>
          </ul>
        </div>
      </div>
  {{/if}}
{{/let}}
{{#let (filter-by "Checks" (action "isHealthy") items) as |healthy|}}
  {{#if (gt healthy.length 0) }}
      <div class="healthy">
        <h2>Healthy Nodes</h2>
        <ChangeableSet
          @dispatcher={{
            searchable
              'healthyNode'
              (if (eq filter.selected.key "")
                healthy
                (filter-by "Checks" (action "hasStatus" filter.selected.key) healthy filter.selected.key)
              )
          }}
          @terms={{search}}
        >
          <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">
            <EmptyState>
              <BlockSlot @name="header">
                <h2>No nodes found</h2>
              </BlockSlot>
              <BlockSlot @name="body">
                <p>
                  There don't seem to be any nodes matching that search.
                </p>
              </BlockSlot>
            </EmptyState>
          </BlockSlot>
        </ChangeableSet>
      </div>
  {{/if}}
{{/let}}
{{#if (eq items.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>
      </EmptyState>
{{/if}}
  </BlockSlot>
</AppView>
{{/let}}