{{#if (gt items.length 0) }}
  <input type="checkbox" id="toolbar-toggle" />
  <form class="filter-bar">
    <FreetextFilter @searchable={{searchable}} @value={{s}} @placeholder="Search by name/port" />
  </form>
{{/if}}
  <ChangeableSet @dispatcher={{searchable}}>
    <BlockSlot @name="set" as |filtered|>
      {{#tabular-collection
          data-test-services
          items=filtered as |item index|
      }}
          <BlockSlot @name="header">
              <th>Service</th>
              <th>Port</th>
              <th>Tags</th>
          </BlockSlot>
          <BlockSlot @name="row">
              <td data-test-service-name="{{item.Service}}">
                <a href={{href-to 'dc.services.show' item.Service}}>
              {{#let (service/external-source item) as |externalSource| }}
                {{#if externalSource }}
                  <span data-test-external-source={{externalSource}} style={{concat 'background-image: var(--' externalSource '-icon)'}}></span>
                {{else}}
                  <span></span>
                {{/if}}
              {{/let}}
                  {{item.Service}}{{#if (not-eq item.ID item.Service) }}&nbsp;<em data-test-service-id="{{item.ID}}">({{item.ID}})</em>{{/if}}
                </a>
              </td>
              <td data-test-service-port="{{item.Port}}" class="port">
                  {{item.Port}}
              </td>
              <td data-test-service-tags>
                <TagList @items={{item.Tags}} />
              </td>
          </BlockSlot>
      {{/tabular-collection}}
    </BlockSlot>
    <BlockSlot @name="empty">
      <p>
        There are no services.
      </p>
    </BlockSlot>
  </ChangeableSet>