{{#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) }}<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 data-test-service-tags class="tags">
{{#if (gt item.Tags.length 0)}}
{{#each item.Tags as |item|}}
<span>{{item}}</span>
{{/each}}
{{/tabular-collection}}
{{#block-slot 'empty'}}
<p>
There are no services.
</p>
{{/changeable-set}}