{{#if (gt items.length 0) }}
  <input type="checkbox" id="toolbar-toggle" />
  <form class="filter-bar">
    {{freetext-filter searchable=searchable value=s placeholder="Search by name/port"}}
  </form>
{{/if}}
  {{#changeable-set dispatcher=searchable}}
    {{#block-slot name='set' as |filtered|}}
      {{#tabular-collection
          data-test-services
          items=filtered as |item index|
      }}
          {{#block-slot name='header'}}
              <th>Service</th>
              <th>Port</th>
              <th>Tags</th>
          {{/block-slot}}
          {{#block-slot 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>
                {{tag-list items=item.Tags}}
              </td>
          {{/block-slot}}
      {{/tabular-collection}}
    {{/block-slot}}
    {{#block-slot name='empty'}}
      <p>
        There are no services.
      </p>
    {{/block-slot}}
  {{/changeable-set}}