{{title item.ID}}
<AppView @class="instance 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>
            <li><a data-test-back href={{href-to 'dc.services.show'}}>Service ({{item.Service}})</a></li>
            <li><strong>Instance</strong></li>
        </ol>
    </BlockSlot>
    <BlockSlot @name="header">
      <h1>
        {{ item.ID }}
{{#let (service/external-source item) 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.Kind 'connect-proxy')}}
        <span class="kind-proxy">Proxy</span>
{{else if (eq item.Kind 'mesh-gateway')}}
        <span class="kind-proxy">Mesh Gateway</span>
{{/if}}
      </h1>
      <dl>
        <dt>Service Name</dt>
        <dd><a href="{{href-to 'dc.services.show' item.Service}}">{{item.Service}}</a></dd>
      </dl>
      <dl>
        <dt>Node Name</dt>
        <dd><a href="{{href-to 'dc.nodes.show' item.Node.Node}}">{{item.Node.Node}}</a></dd>
      </dl>
{{#if proxy.ServiceName}}
      <dl>
{{#if proxy.ServiceProxy.DestinationServiceID}}
        <dt data-test-proxy-type="sidecar-proxy">Sidecar Proxy</dt>
        <dd><a href="{{href-to 'dc.services.instance' proxy.ServiceName proxy.Node proxy.ServiceID}}">{{proxy.ServiceID}}</a></dd>
{{else}}
        <dt data-test-proxy-type="proxy">Proxy</dt>
        <dd><a href="{{href-to 'dc.services.show' proxy.ServiceName}}">{{proxy.ServiceName}}</a></dd>
{{/if}}
      </dl>
{{/if}}
{{#if (eq item.Kind 'connect-proxy')}}
  {{#if item.Proxy.DestinationServiceID}}
      <dl>
        <dt data-test-proxy-destination="instance">Dest. Service Instance</dt>
        <dd><a href="{{href-to 'dc.services.instance' item.Proxy.DestinationServiceName item.Node.Node item.Proxy.DestinationServiceID}}">{{item.Proxy.DestinationServiceID}}</a></dd>
      </dl>
      <dl>
        <dt>Local Service Address</dt>
        <dd>{{item.Proxy.LocalServiceAddress}}:{{item.Proxy.LocalServicePort}}</dd>
      </dl>
  {{else}}
      <dl>
        <dt data-test-proxy-destination="service">Dest. Service</dt>
        <dd><a href="{{href-to 'dc.services.show' item.Proxy.DestinationServiceName}}">{{item.Proxy.DestinationServiceName}}</a></dd>
      </dl>
  {{/if}}
{{/if}}
    </BlockSlot>
    <BlockSlot @name="content">
        <TabNav @items={{
          compact
              (array
                      (hash label="Service Checks" href=(href-to "dc.services.instance.servicechecks") selected=(is-href "dc.services.instance.servicechecks"))
                      (hash label="Node Checks" href=(href-to "dc.services.instance.nodechecks") selected=(is-href "dc.services.instance.nodechecks"))
(if
  (eq item.Kind 'connect-proxy')
                      (hash label="Upstreams" href=(href-to "dc.services.instance.upstreams") selected=(is-href "dc.services.instance.upstreams")) ""
)
(if
  (and (eq item.Kind 'connect-proxy') (gt item.Proxy.Expose.Paths.length 0))
                      (hash label="Exposed Paths" href=(href-to "dc.services.instance.exposedpaths") selected=(is-href "dc.services.instance.exposedpaths")) ""
)
(if
  (eq item.Kind 'mesh-gateway')
                      (hash label="Addresses" href=(href-to "dc.services.instance.addresses") selected=(is-href "dc.services.instance.addresses")) ""
)
                      (hash label="Tags" href=(href-to "dc.services.instance.tags") selected=(is-href "dc.services.instance.tags"))
                      (hash label="Meta Data" href=(href-to "dc.services.instance.metadata") selected=(is-href "dc.services.instance.metadata"))
              )
        }}/>
        {{outlet}}
    </BlockSlot>
</AppView>