<ul data-test-healthchecks>
{{#each (sort-by (action 'sortChecksByImportance') items) as |item| }}
{{! TODO: this component and its child should be moved to a single component }}
  {{#healthcheck-output
    data-test-node-healthcheck=item.Name
    class=item.Status
    tagName='li'
    }}
      {{#block-slot name='header'}}
        <h3>{{item.Name}}</h3>
      {{/block-slot}}
      {{#block-slot name='content'}}
      <dl>
        <dt>ServiceName</dt>
        <dd>{{or item.ServiceName '-'}}</dd>
      </dl>
      <dl>
        <dt>CheckID</dt>
        <dd>{{or item.CheckID '-'}}</dd>
      </dl>
      <dl>
        <dt>Type</dt>
        <dd>
          {{item.Type}}
{{#if (and exposed (contains item.Type (array 'http' 'grpc')))}}
          <em data-test-exposed="true" data-tooltip="Expose.checks is set to true, so all registered HTTP and gRPC check paths are exposed through Envoy for the Consul agent.">Exposed</em>
{{/if}}
        </dd>
      </dl>
      <dl>
        <dt>Notes</dt>
        <dd>{{or item.Notes '-'}}</dd>
      </dl>
      <dl>
{{#if (not-eq item.Type 'ttl')}}
        <dt>Output</dt>
        <dd>
            <pre><code>{{item.Output}}</code></pre>
    {{#feedback-dialog type='inline'}}
      {{#block-slot name='action' as |success error|}}
          {{copy-button success=(action success) error=(action error) clipboardText=item.Output title='copy output to clipboard'}}
      {{/block-slot}}
      {{#block-slot name='success' as |transition|}}
        <p class={{transition}}>
          Copied output!
        </p>
      {{/block-slot}}
      {{#block-slot name='error' as |transition|}}
        <p class={{transition}}>
          Sorry, something went wrong!
        </p>
      {{/block-slot}}
    {{/feedback-dialog}}
        </dd>
{{/if}}
      </dl>
      {{/block-slot}}
    {{/healthcheck-output}}
{{/each}}
</ul>
