{{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>
    <BlockSlot @name="content">
        <ChangeableSet @dispatcher={{searchable}}>
          <BlockSlot @name="set" as |filtered|>
            <ConsulServiceList @routeName="dc.services.show" @items={{filtered}}>
              <BlockSlot @name="metadata" as |item|>
                <ul>
                  <ConsulExternalSource @item={{item}} as |ExternalSource|>
                    <li>
                      <ExternalSource />
                    </li>
                  </ConsulExternalSource>
                  <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>
              </BlockSlot>
            </ConsulServiceList>
          </BlockSlot>
          <BlockSlot @name="empty">
            <p>
              There are no services.
            </p>
          </BlockSlot>
        </ChangeableSet>
    </BlockSlot>
</AppView>