{{#app-view class="service 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>
        </ol>
    {{/block-slot}}
    {{#block-slot 'header'}}
      <h1>
        {{ item.Service.Service }}
{{#with (service/external-source item.Service) 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.Service.Kind 'connect-proxy')}}
        <span class="kind-proxy">Proxy</span>
{{/if}}
      </h1>
      <label for="toolbar-toggle"></label>
      {{tab-nav
          items=(compact
            (array
              'Instances'
              'Tags'
            )
          )
          selected=selectedTab
      }}
    {{/block-slot}}
    {{#block-slot '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}}
    {{/block-slot}}
    {{#block-slot 'content'}}
        {{#each
            (compact
                (array
                    (hash id=(slugify 'Instances') partial='dc/services/instances')
                    (hash id=(slugify 'Tags') partial='dc/services/tags')
                )
            ) 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}}
