{{#app-view class="service show"}}
    {{#block-slot 'breadcrumbs'}}
        <ol>
            <li><a href={{href-to 'dc.services'}}>All Services</a></li>
        </ol>
    {{/block-slot}}
    {{#block-slot 'header'}}
        <h1>
            {{ item.Service.Service }}
        </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>
                {{join ', ' item.Tags}}
            </dd>
        </dl>
{{/if}}
{{#if (gt unhealthy.length 0) }}
        <div 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
                        address=item.Node.Address
                        checks=item.Checks
                    }}
    {{/each}}
                </ul>
            </div>
        </div>
{{/if}}
{{#if (gt healthy.length 0) }}
        <div class="healthy">
            <h2>Healthy Nodes</h2>
            {{#list-collection
                items=healthy
                cell-layout=(percentage-columns-layout healthy.length columns 100) as |item index|
            }}
                {{healthchecked-resource
                    href=(href-to 'dc.nodes.show' item.Node.Node)
                    data-test-node=item.Node.Node
                    name=item.Node.Node
                    address=item.Node.Address
                    checks=item.Checks
                    status=item.Checks.[0].Status
                }}
            {{/list-collection}}
        </div>
{{/if}}
    {{/block-slot}}
{{/app-view}}