{{#app-view class=(concat 'token ' (if (and isEnabled (not isAuthorized)) 'edit' 'list')) loading=isLoading authorized=isAuthorized enabled=isEnabled}}
  {{#block-slot name='notification' as |status type subject|}}
    {{partial 'dc/acls/tokens/notifications'}}
  {{/block-slot}}
  {{#block-slot name='header'}}
    <h1>
      Access Controls
    </h1>
{{#if isAuthorized }}
    {{partial 'dc/acls/nav'}}
{{/if}}
  {{/block-slot}}
  {{#block-slot name='disabled'}}
    {{partial 'dc/acls/disabled'}}
  {{/block-slot}}
  {{#block-slot name='authorization'}}
    {{partial 'dc/acls/authorization'}}
  {{/block-slot}}
  {{#block-slot name='actions'}}
      <a data-test-create href="{{href-to 'dc.acls.tokens.create'}}" class="type-create">Create</a>
  {{/block-slot}}
  {{#block-slot name='content'}}
{{#if (gt items.length 0) }}
    <form class="filter-bar">
      {{freetext-filter searchable=searchable value=s placeholder="Search"}}
    </form>
{{/if}}
{{#if (token/is-legacy items)}}
    <p data-test-notification-update class="notice info"><strong>Update.</strong> We have upgraded our ACL System to allow the creation of reusable policies that can be applied to tokens. Read more about the changes and how to upgrade legacy tokens in our <a href="{{env 'CONSUL_DOCS_URL'}}/guides/acl-migrate-tokens.html" target="_blank" rel="noopener noreferrer">documentation</a>.</p>
{{/if}}
    {{#changeable-set dispatcher=searchable}}
      {{#block-slot name='set' as |filtered|}}
        {{#tabular-collection
            items=(sort-by 'CreateTime:desc' filtered) as |item index|
        }}
          {{#block-slot name='header'}}
              <th>Accessor ID</th>
              <th>Scope</th>
              <th>Description</th>
              <th>Roles &amp; Policies</th>
              <th>&nbsp;</th>
          {{/block-slot}}
          {{#block-slot name='row'}}
              <td data-test-token="{{item.AccessorID}}" class={{if (eq item.AccessorID token.AccessorID) 'me' }}>
                  <a href={{href-to 'dc.acls.tokens.edit' item.AccessorID}}>{{truncate item.AccessorID 8 false}}</a>
              </td>
              <td>
                {{if item.Local 'local' 'global' }}
              </td>
              <td data-test-description>
                <p>{{default item.Description item.Name}}</p>
              </td>
              <td colspan={{if (not-eq item.AccessorID token.AccessorID) '2' }}>
{{#if (token/is-legacy item) }}
                  <p>Legacy tokens have embedded rules.</p>
{{ else }}
                  {{#each (append item.Policies item.Roles) as |item|}}
                    <strong data-test-policy class={{policy/typeof item}}>{{item.Name}}</strong>
                  {{/each}}
{{/if}}
              </td>
{{#if (eq item.AccessorID token.AccessorID)}}
              <td>Your token</td>
{{/if}}
          {{/block-slot}}
          {{#block-slot name='actions' as |index change checked|}}
            {{#popover-menu
              expanded=(if (eq checked index) true false)
              onchange=(action change index)
              keyboardAccess=false
              submenus=(array 'logout' 'use' 'delete')
            }}
              {{#block-slot name='trigger'}}
                More
              {{/block-slot}}
              {{#block-slot name='menu' as |confirm send keypressClick|}}
                  <li role="none">
                    <a data-test-edit role="menuitem" tabindex="-1" href={{href-to 'dc.acls.tokens.edit' item.AccessorID}}>Edit</a>
                  </li>
{{#if (not (token/is-legacy item))}}
                  <li role="none">
                      <button role="menuitem" tabindex="-1" type="button" data-test-clone {{action 'sendClone' item}}>Duplicate</button>
                  </li>
{{/if}}
{{#if (eq item.AccessorID token.AccessorID) }}
                  <li role="none">
                    <label for={{concat confirm 'logout'}} role="menuitem" tabindex="-1" onkeypress={{keypressClick}} data-test-logout>Stop using</label>
                    <div role="menu">
                      <div class="confirmation-alert warning">
                        <div>
                          <header>
                            Confirm logout
                          </header>
                          <p>
                            Are you sure you want to stop using this ACL token? This will log you out.
                          </p>
                        </div>
                        <ul>
                          <li class="dangerous">
                            <button tabindex="-1" type="button" onclick={{action send 'logout' item}}>Logout</button>
                          </li>
                          <li>
                            <label for={{concat confirm 'logout'}}>Cancel</label>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </li>
{{else}}
                  <li role="none">
                    <label for={{concat confirm 'use'}} role="menuitem" tabindex="-1" onkeypress={{keypressClick}} data-test-use>Use</label>
                    <div role="menu">
                      <div class="confirmation-alert warning">
                        <div>
                          <header>
                            Confirm use
                          </header>
                          <p>
                            Are you sure you want to use this ACL token?
                          </p>
                        </div>
                        <ul>
                          <li class="dangerous">
                            <button data-test-confirm-use tabindex="-1" type="button" onclick={{action send 'use' item}}>Use</button>
                          </li>
                          <li>
                            <label for={{concat confirm 'use'}}>Cancel</label>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </li>
{{/if}}
{{#unless (or (token/is-anonymous item) (eq item.AccessorID token.AccessorID)) }}
                  <li role="none" class="dangerous">
                    <label for={{concat confirm 'delete'}} role="menuitem" tabindex="-1" onkeypress={{keypressClick}} data-test-delete>Delete</label>
                    <div role="menu">
                      <div class="confirmation-alert warning">
                        <div>
                          <header>
                            Confirm Delete
                          </header>
                          <p>
                            Are you sure you want to delete this token?
                          </p>
                        </div>
                        <ul>
                          <li class="dangerous">
                            <button tabindex="-1" type="button" class="type-delete" onclick={{action send 'delete' item}}>Delete</button>
                          </li>
                          <li>
                            <label for={{concat confirm 'delete'}}>Cancel</label>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </li>
{{/unless}}
              {{/block-slot}}
            {{/popover-menu}}
          {{/block-slot}}
        {{/tabular-collection}}
      {{/block-slot}}
      {{#block-slot name='empty'}}
        <p>
          There are no Tokens.
        </p>
      {{/block-slot}}
    {{/changeable-set}}
  {{/block-slot}}
{{/app-view}}