<Route
  @name={{routeName}}
as |route|>
  {{#let

    (hash
      value=(or sortBy "Status:asc")
      change=(action (mut sortBy) value="target.selected")
    )

    (hash
      status=(hash
        value=(if status (split status ',') undefined)
        change=(action (mut status) value="target.selectedItems")
      )
      kind=(hash
        value=(if kind (split kind ',') undefined)
        change=(action (mut kind) value="target.selectedItems")
      )
      check=(hash
        value=(if check (split check ',') undefined)
        change=(action (mut check) value="target.selectedItems")
      )
      searchproperty=(hash
        value=(if (not-eq searchproperty undefined)
          (split searchproperty ',')
          searchProperties
        )
        change=(action (mut searchproperty) value="target.selectedItems")
        default=searchProperties
      )
    )

    item.Checks

  as |sort filters items|}}
      <div class="tab-section">
          {{#if (gt items.length 0) }}
            <input type="checkbox" id="toolbar-toggle" />
            <Consul::HealthCheck::SearchBar

              @search={{search}}
              @onsearch={{action (mut search) value="target.value"}}

              @sort={{sort}}

              @filter={{filters}}
            />
          {{/if}}
          {{#let (find-by "Type" "serf" items) as |serf|}}
            {{#if (and serf (eq serf.Status "critical"))}}
              <Notice
                data-test-critical-serf-notice
                @type="warning"
              as |notice|>
                <notice.Header>
                  <h2>
                    {{t "routes.dc.nodes.show.healthchecks.critical-serf-notice.header"}}
                  </h2>
                </notice.Header>
                <notice.Body>
                  {{t
                    "routes.dc.nodes.show.healthchecks.critical-serf-notice.body"
                    htmlSafe=true
                  }}
                </notice.Body>
              </Notice>
            {{/if}}
          {{/let}}
          <DataCollection
            @type="health-check"
            @sort={{sort.value}}
            @filters={{filters}}
            @search={{search}}
            @items={{items}}
          as |collection|>
            <collection.Collection>
              <Consul::HealthCheck::List
                @items={{collection.items}}
              />
            </collection.Collection>
            <collection.Empty>
              <EmptyState>
                <BlockSlot @name="body">
                    {{t "routes.dc.nodes.show.healthchecks.empty"
                      items=items.length
                      htmlSafe=true
                    }}
                </BlockSlot>
              </EmptyState>
              </collection.Empty>
            </DataCollection>
      </div>
  {{/let}}
</Route>