{{title 'Services'}}
<AppView @class="service list">
    <BlockSlot @name="header">
        <h1>
            Services <em>{{format-number items.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>
    <BlockSlot @name="content">
        <ChangeableSet @dispatcher={{searchable}}>
          <BlockSlot @name="set" as |filtered|>
            <ConsulServiceList @routeName="dc.services.show" @items={{filtered}} />
          </BlockSlot>
          <BlockSlot @name="empty">
            <p>
              There are no services.
            </p>
          </BlockSlot>
        </ChangeableSet>
    </BlockSlot>
</AppView>