{{#if (gt items.length 0)}}
<ListCollection
  class="consul-intention-permission-list{{if (not onclick) ' readonly'}}"
  @scroll="native"
  @items={{items}}
  @partial={{5}}
as |item|>
  <BlockSlot @name="details">
    <div onclick={{action (optional onclick) item}}>
      <strong class={{concat 'intent-' item.Action}}>{{capitalize item.Action}}</strong>
{{#if (gt item.HTTP.Methods.length 0)}}
        <dl class="permission-methods">
          <dt>
            <Tooltip>
              Methods
            </Tooltip>
          </dt>
          <dd>
{{#each item.HTTP.Methods as |item|}}
            {{item}}
{{/each}}
          </dd>
        </dl>
{{/if}}
{{#if item.HTTP.Path}}
        <dl class="permission-path">
          <dt>
            <Tooltip>
              {{item.HTTP.PathType}}
            </Tooltip>
          </dt>
          <dd>
            {{item.HTTP.Path}}
          </dd>
        </dl>
{{/if}}
{{#each item.HTTP.Header as |item|}}
        <dl class="permission-header">
          <dt>
            <Tooltip>
              Header
            </Tooltip>
          </dt>
          <dd>
            {{item.Name}} {{route-match item}}
          </dd>
        </dl>
{{/each}}
    </div>
  </BlockSlot>
{{#if onclick}}
  <BlockSlot @name="actions" as |Actions|>
    <Actions as |Action|>
      <Action data-test-edit-action @onclick={{action (optional onclick) item}} @close={{true}}>
        <BlockSlot @name="label">
          Edit
        </BlockSlot>
      </Action>
      <Action data-test-delete-action @onclick={{action ondelete item}} class="dangerous">
        <BlockSlot @name="label">
          Delete
        </BlockSlot>
        <BlockSlot @name="confirmation" as |Confirmation|>
          <Confirmation class="warning">
            <BlockSlot @name="header">
              Confirm delete
            </BlockSlot>
            <BlockSlot @name="body">
              <p>
                Are you sure you want to delete this permission?
              </p>
            </BlockSlot>
            <BlockSlot @name="confirm" as |Confirm|>
              <Confirm>Delete</Confirm>
            </BlockSlot>
          </Confirmation>
        </BlockSlot>
      </Action>
    </Actions>
  </BlockSlot>
{{/if}}
</ListCollection>
{{/if}}