{{#app-view class="service show"}}
    {{#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 }}
        <span data-test-external-source="{{service/external-source item.Service}}" style="background-image: {{css-var (concat '--' (service/external-source item.Service) '-color-svg') 'none'}}" data-tooltip="Registered via {{service/external-source item.Service}}">Registered via {{service/external-source item.Service}}</span>
      </h1>
    {{/block-slot}}
    {{#block-slot 'toolbar'}}
{{#if (gt items.length 0) }}
        {{catalog-filter filters=healthFilters search=filters.s status=filters.status onchange=(action 'filter')}}
{{/if}}
    {{/block-slot}}
    {{#block-slot 'content'}}
{{#if (gt item.Tags.length 0)}}
        <dl>
            <dt>Tags</dt>
            <dd data-test-tags>
              {{#each item.Tags as |item|}}
                <span>{{item}}</span>
              {{/each}}
            </dd>
        </dl>
{{/if}}
{{#if (gt unhealthy.length 0) }}
        <div data-test-unhealthy class="unhealthy">
            <h2>Unhealthy Nodes</h2>
            <div>
                <ul>
    {{#each unhealthy as |item|}}
                    {{healthchecked-resource
                        tagName='li'
                        data-test-node=item.Node.Node
                        href=(href-to 'dc.nodes.show' item.Node.Node)
                        name=item.Node.Node
                        service=item.Service.ID
                        address=(concat item.Service.Address ':' item.Service.Port)
                        checks=item.Checks
                    }}
    {{/each}}
                </ul>
            </div>
        </div>
{{/if}}
{{#if (gt healthy.length 0) }}
        <div data-test-healthy class="healthy">
            <h2>Healthy Nodes</h2>
            {{#list-collection
                items=healthy
                cell-layout=(percentage-columns-layout healthy.length columns 113) as |item index|
            }}
                {{healthchecked-resource
                    href=(href-to 'dc.nodes.show' item.Node.Node)
                    data-test-node=item.Node.Node
                    name=item.Node.Node
                    service=item.Service.ID
                    address=(concat item.Service.Address ':' item.Service.Port)
                    checks=item.Checks
                    status=item.Checks.[0].Status
                }}
            {{/list-collection}}
        </div>
{{/if}}
    {{/block-slot}}
{{/app-view}}