{{#if isAuthorized }}
  {{title 'Tokens'}}
{{else}}
  {{title 'Access Controls'}}
{{/if}}
<AppView
  @class="token list"
  @loading={{isLoading}}
  @authorized={{isAuthorized}}
  @enabled={{isEnabled}}
  >
  <BlockSlot @name="notification" as |status type subject|>
    {{partial 'dc/acls/tokens/notifications'}}
  </BlockSlot>
  <BlockSlot @name="header">
    <h1>
      Access Controls
    </h1>
  </BlockSlot>
  <BlockSlot @name="nav">
{{#if isAuthorized }}
    {{partial 'dc/acls/nav'}}
{{/if}}
  </BlockSlot>
  <BlockSlot @name="disabled">
    {{partial 'dc/acls/disabled'}}
  </BlockSlot>
  <BlockSlot @name="authorization">
    {{partial 'dc/acls/authorization'}}
  </BlockSlot>
  <BlockSlot @name="actions">
      <a data-test-create href="{{href-to 'dc.acls.tokens.create'}}" class="type-create">Create</a>
  </BlockSlot>
  <BlockSlot @name="content">
{{#if (gt items.length 0) }}
    <form class="filter-bar">
      <FreetextFilter @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}}
    <ChangeableSet @dispatcher={{searchable}}>
      <BlockSlot @name="set" as |filtered|>
        <TabularCollection @items={{sort-by "CreateTime:desc" filtered}} as |item index|>
          <BlockSlot @name="header">
              <th>Accessor ID</th>
              <th>Scope</th>
              <th>Description</th>
              <th>Roles &amp; Policies</th>
              <th>&nbsp;</th>
          </BlockSlot>
          <BlockSlot @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}}>{{substr item.AccessorID -8}}</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}}
          </BlockSlot>
          <BlockSlot @name="actions" as |index change checked|>
            <PopoverMenu @expanded={{if (eq checked index) true false}} @onchange={{action change index}} @keyboardAccess={{false}} @submenus={{array "logout" "use" "delete"}}>
              <BlockSlot @name="trigger">
                More
              </BlockSlot>
              <BlockSlot @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" class="dangerous">
                    <label for={{concat confirm 'logout'}} role="menuitem" tabindex="-1" onkeypress={{keypressClick}} data-test-logout>Log out</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}}
              </BlockSlot>
            </PopoverMenu>
          </BlockSlot>
        </TabularCollection>
      </BlockSlot>
      <BlockSlot @name="empty">
        <p>
          There are no Tokens.
        </p>
      </BlockSlot>
    </ChangeableSet>
  </BlockSlot>
</AppView>