{{#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 'set' as |filtered|}}
      {{#tabular-collection
          data-test-services
          items=filtered as |item index|
      }}
          {{#block-slot 'header'}}
              <th>Service</th>
              <th>Port</th>
              <th>Tags</th>
          {{/block-slot}}
          {{#block-slot 'row'}}
              <td data-test-service-name="{{item.Service}}">
                <a href={{href-to 'dc.services.show' item.Service}}>
                  <span data-test-external-source="{{service/external-source item}}" style={{{ concat 'background-image: ' (css-var (concat '--' (service/external-source item) '-color-svg') 'none')}}}></span>
                  {{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 class="tags">
                  {{#if (gt item.Tags.length 0)}}
                    {{#each item.Tags as |item|}}
                      <span>{{item}}</span>
                    {{/each}}
                  {{/if}}
              </td>
          {{/block-slot}}
      {{/tabular-collection}}
    {{/block-slot}}
    {{#block-slot 'empty'}}
      <p>
        There are no services.
      </p>
    {{/block-slot}}
  {{/changeable-set}}