{{#if (gt items.length 0) }}
  <input type="checkbox" id="toolbar-toggle" />
  <form class="filter-bar">
    <FreetextFilter @searchable={{searchable}} @value={{s}} @placeholder="Search" />
  </form>
{{/if}}
  <ChangeableSet @dispatcher={{searchable}}>
    <BlockSlot @name="set" as |filtered|>
      {{#tabular-collection
          data-test-instances
          items=filtered as |item index|
      }}
          <BlockSlot @name="header">
            <th>ID</th>
            <th>Node</th>
            <th>Address</th>
            <th>Node Checks</th>
            <th>Service Checks</th>
          </BlockSlot>
          <BlockSlot @name="row">
            <td data-test-id={{item.Service.ID}}>
              <a href={{href-to 'dc.services.instance' item.Service.Service item.Node.Node (or item.Service.ID item.Service.Service)}}>
            {{#let (service/external-source item.Service) as |externalSource| }}
              {{#if externalSource }}
                <span data-test-external-source={{externalSource}} style={{concat 'background-image: var(--' externalSource '-icon)'}}></span>
              {{else}}
                <span></span>
              {{/if}}
            {{/let}}
                {{or item.Service.ID item.Service.Service}}
              </a>
            </td>
            <td data-test-node>
              <a href={{href-to 'dc.nodes.show' item.Node.Node}}>{{item.Node.Node}}</a>
            </td>
            <td data-test-address>
                {{item.Service.Address}}:{{item.Service.Port}}
            </td>
            <td>
              {{#with (reject-by 'ServiceID' '' item.Checks) as |checks|}}
                <HealthcheckInfo @passing={{filter-by "Status" "passing" checks}} @warning={{filter-by "Status" "warning" checks}} @critical={{filter-by "Status" "critical" checks}} />
              {{/with}}
            </td>
            <td>
              {{#with (filter-by 'ServiceID' '' item.Checks) as |checks|}}
                <HealthcheckInfo @passing={{filter-by "Status" "passing" checks}} @warning={{filter-by "Status" "warning" checks}} @critical={{filter-by "Status" "critical" checks}} />
              {{/with}}
            </td>
          </BlockSlot>
      {{/tabular-collection}}
    </BlockSlot>
    <BlockSlot @name="empty">
      <p>
        There are no services.
      </p>
    </BlockSlot>
  </ChangeableSet>