{{title 'Services'}}
<AppView @class="service list">
<BlockSlot @name="header">
<h1>
Services <em>{{format-number services.length}} total</em>
</h1>
<label for="toolbar-toggle"></label>
</BlockSlot>
<BlockSlot @name="toolbar">
{{#if (gt items.length 0) }}
<PhraseEditor @placeholder="service:name tag:name status:critical search-term" @value={{slice 0 terms.length terms}} @onchange={{action (mut terms) value='target.value'}} @searchable={{searchable}} />
{{/if}}
<BlockSlot @name="content">
<ChangeableSet @dispatcher={{searchable}}>
<BlockSlot @name="set" as |filtered|>
<ConsulServiceList @routeName="dc.services.show" @items={{filtered}}>
<BlockSlot @name="metadata" as |item|>
<ul>
<li>{{format-number item.InstanceCount}} {{pluralize item.InstanceCount 'Instance' without-count=true}}</li>
{{#if (get withProxies item.Name)}}<li class="proxy">connected with proxy</li>{{/if}}
<li><TagList @items={{item.Tags}}/></li>
</ul>
</ConsulServiceList>
<BlockSlot @name="empty">
<p>
There are no services.
</p>
</ChangeableSet>
</AppView>