<div
  class="consul-acl-list"
  ...attributes
>
  <TabularCollection
    @items={{@items}}
    as |item index|
  >
    <BlockSlot @name="header">
      <th>Name</th>
      <th>Type</th>
    </BlockSlot>
    <BlockSlot @name="row">
      <td data-test-acl={{item.Name}}>
        <a href={{href-to 'dc.acls.edit' item.ID}}>{{item.Name}}</a>
      </td>
      <td>
        {{#if (eq item.Type 'management')}}
          <strong>{{item.Type}}</strong>
        {{else}}
          <span>{{item.Type}}</span>
        {{/if}}
      </td>
    </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.edit' item.ID}}>
{{#if (can "write acl" item=item)}}
            Edit
{{else}}
            View
{{/if}}
              </a>
            </li>
  {{#if (eq item.ID token.SecretID) }}
            <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
                        {{on 'click' (fn @onuse item)}}
                        data-test-confirm-use
                        tabindex="-1"
                        type="button"
                      >
                        Use
                      </button>
                    </li>
                    <li>
                      <label for={{concat confirm 'use'}}>Cancel</label>
                    </li>
                  </ul>
                </div>
              </div>
            </li>
  {{/if}}
{{#if (can "duplicate acl" item=item)}}
            <li role="none">
                <button role="menuitem" tabindex="-1" type="button" data-test-clone {{action @onclone item}}>Duplicate</button>
            </li>
{{/if}}
{{#if (can "delete acl" item=item)}}
            <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 @ondelete item}}>Delete</button>
                    </li>
                    <li>
                      <label for={{concat confirm 'delete'}}>Cancel</label>
                    </li>
                  </ul>
                </div>
              </div>
            </li>
  {{/if}}
        </BlockSlot>
      </PopoverMenu>
    </BlockSlot>
  </TabularCollection>
</div>
