<EventSource @src={{items}} />
<div class="tab-section">
{{#let

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

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

  items

as |sort filters items|}}
{{#if (gt items.length 0)}}
    <input type="checkbox" id="toolbar-toggle" />
    <Consul::Upstream::SearchBar
      @search={{search}}
      @onsearch={{action (mut search) value="target.value"}}

      @sort={{sort}}

      @filter={{filters}}
      />
{{/if}}
      <p>
        Upstreams are services that may receive traffic from this gateway. Learn more about configuring gateways in our <a href="{{env 'CONSUL_DOCS_URL'}}/connect/ingress-gateway" target="_blank" rel="noopener noreferrer">documentation</a>.
      </p>
      <DataCollection
        @type="service"
        @sort={{sort.value}}
        @filters={{filters}}
        @search={{search}}
        @items={{items}}
      as |collection|>
        <collection.Collection>
          <Consul::Upstream::List
            @items={{collection.items}}
            @dc={{dc}}
            @nspace={{nspace}}
          >
          </Consul::Upstream::List>
        </collection.Collection>
        <collection.Empty>
          <EmptyState>
            <BlockSlot @name="body">
              <p>
                There are no upstreams{{#if (gt items.length 0)}} matching that search{{/if}}.
              </p>
            </BlockSlot>
          </EmptyState>
        </collection.Empty>
      </DataCollection>
{{/let}}
</div>
