{{title item.Service.Service}}
<AppView @class="service show">
  <BlockSlot @name="notification" as |status type|>
    {{partial 'dc/services/notifications'}}
  </BlockSlot>
  <BlockSlot @name="breadcrumbs">
    <ol>
        <li><a data-test-back href={{href-to 'dc.services'}}>All Services</a></li>
    </ol>
  </BlockSlot>
  <BlockSlot @name="header">
    <h1>
      {{item.Service.Service}}
{{#let (service/external-source item.Service) as |externalSource| }}
    {{#if externalSource }}
        <span data-test-external-source={{externalSource}} style={{concat 'background-image: var(--' externalSource '-icon)'}} data-tooltip="Registered via {{externalSource}}">Registered via {{externalSource}}</span>
    {{/if}}
{{/let}}
{{#if (eq item.Service.Kind 'connect-proxy')}}
      <span class="kind-proxy">Proxy</span>
{{else if (eq item.Service.Kind 'mesh-gateway')}}
      <span class="kind-proxy">Mesh Gateway</span>
{{/if}}
    </h1>
    <label for="toolbar-toggle"></label>
    <TabNav @items={{compact (array "Instances" (if (not-eq chain ) "Routing" "") "Tags")}} @selected={{selectedTab}} />
  </BlockSlot>
  <BlockSlot @name="actions">
    {{#if urls.service}}
      {{#templated-anchor data-test-dashboard-anchor href=urls.service vars=(hash Datacenter=dc Service=(hash Name=item.Service.Service)) rel="external"}}Open Dashboard{{/templated-anchor}}
    {{/if}}
  </BlockSlot>
  <BlockSlot @name="content">
    {{#each
      (compact
        (array
                        (hash id=(slugify 'Instances') partial='dc/services/instances')
(if (not-eq chain null) (hash id=(slugify 'Routing') partial='dc/services/routing') '')
                        (hash id=(slugify 'Tags') partial='dc/services/tags')
        )
      ) key="id" as |panel|
    }}
        <TabSection @id={{panel.id}} @selected={{eq (if selectedTab selectedTab "") panel.id}} @onchange={{action "change"}}>
          {{partial panel.partial}}
        </TabSection>
    {{/each}}
  </BlockSlot>
</AppView>