{{#app-view class="instance show"}}
    {{#block-slot 'notification' as |status type|}}
      {{partial 'dc/services/notifications'}}
    {{/block-slot}}
    {{#block-slot '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>
    {{/block-slot}}
    {{#block-slot 'header'}}
      <h1>
        {{ item.ID }}
{{#with (service/external-source item) as |externalSource| }}
  {{#with (css-var (concat '--' externalSource '-color-svg') 'none') as |bg| }}
    {{#if (not-eq bg 'none') }}
        <span data-test-external-source="{{externalSource}}" style={{{ concat 'background-image:' bg }}} data-tooltip="Registered via {{externalSource}}">Registered via {{externalSource}}</span>
    {{/if}}
  {{/with}}
{{/with}}
{{#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}}
    {{/block-slot}}
    {{#block-slot 'content'}}
        {{tab-nav
            items=(compact
              (array
                'Service Checks'
                'Node Checks'
(if
  (eq item.Kind 'connect-proxy')
                'Upstreams' ''
)
(if
  (eq item.Kind 'mesh-gateway')
                'Addresses' ''
)
                'Tags'
                'Meta Data'
              )
            )
            selected=selectedTab
        }}
        {{#each
            (compact
                (array
                    (hash id=(slugify 'Service Checks') partial='dc/services/servicechecks')
                    (hash id=(slugify 'Node Checks') partial='dc/services/nodechecks')
(if
  (eq item.Kind 'connect-proxy')
                    (hash id=(slugify 'Upstreams') partial='dc/services/upstreams') ''
)
(if
  (eq item.Kind 'mesh-gateway')
                    (hash id=(slugify 'Addresses') partial='dc/services/addresses') ''
)
                    (hash id=(slugify 'Tags') partial='dc/services/tags')
                    (hash id=(slugify 'Meta Data') partial='dc/services/metadata')
                )
            ) as |panel|
        }}
            {{#tab-section id=panel.id selected=(eq (if selectedTab selectedTab '') panel.id) onchange=(action "change")}}
                {{partial panel.partial}}
            {{/tab-section}}
        {{/each}}
    {{/block-slot}}
{{/app-view}}