{{page-title 'ACLs'}}
{{#let (hash
  kinds=(if kind (split kind ',') undefined)
) as |filters|}}
  {{#let (or sortBy "Name:asc") as |sort|}}
<AppView>
  <BlockSlot @name="notification" as |status type item error|>
    <Consul::Acl::Notifications
      @status={{status}}
      @type={{type}}
      @error={{error}}
    />
  </BlockSlot>
  <BlockSlot @name="header">
    <h1>
        ACL Tokens <em>{{format-number items.length}} total</em>
    </h1>
    <label for="toolbar-toggle"></label>
  </BlockSlot>
  <BlockSlot @name="actions">
    <a data-test-create href="{{href-to 'dc.acls.create'}}" class="type-create">Create</a>
  </BlockSlot>
  <BlockSlot @name="toolbar">
    {{#if (gt items.length 0) }}
      <Consul::Acl::SearchBar
        @search={{search}}
        @onsearch={{action (mut search) value="target.value"}}

        @sort={{sort}}
        @onsort={{action (mut sortBy) value="target.selected"}}

        @filter={{filters}}
        @onfilter={{hash
          kind=(action (mut kind) value="target.selectedItems")
        }}
      />
    {{/if}}
  </BlockSlot>
  <BlockSlot @name="content">
    <DataCollection
      @type="acl"
      @sort={{sort}}
      @filters={{filters}}
      @search={{search}}
      @items={{items}}
    as |collection|>
      <collection.Collection>
        <Consul::Acl::List
          @items={{collection.items}}

          @ondelete={{route-action 'delete'}}
          @onuse={{route-action 'use'}}
          @onclone={{route-action 'clone'}}
        >
        </Consul::Acl::List>
      </collection.Collection>
      <collection.Empty>
        <EmptyState @allowLogin={{true}}>
          <BlockSlot @name="header">
            <h2>
              {{#if (gt items.length 0)}}
                No ACLs found
              {{else}}
                Welcome to ACLs
              {{/if}}
            </h2>
          </BlockSlot>
          <BlockSlot @name="body">
            <p>
              {{#if (gt items.length 0)}}
                No ACLs where found matching that search, or you may not have access to view the ACLs you are searching for.
              {{else}}
                There don't seem to be any ACLs yet, or you may not have access to view ACLs yet.
              {{/if}}
            </p>
          </BlockSlot>
        </EmptyState>
      </collection.Empty>
    </DataCollection>
  </BlockSlot>
</AppView>
  {{/let}}
{{/let}}