{{#if (or (eq policyType "acl") (has-feature "Sentinel"))}}
  <PageHeader as |p|>
    <p.levelLeft>
      <h1 class="title is-3">
        {{uppercase policyType}} Policies
        {{#unless (eq policyType "acl")}}
          <span class="tag" aria-label="Enforcement level: {{model.enforcementLevel}}">
            Sentinel
          </span>
        {{/unless}}
      </h1>
    </p.levelLeft>
  </PageHeader>
  <Toolbar>
    {{#if model.meta.total}}
      <ToolbarFilters>
        {{navigate-input
          filterFocusDidChange=(action "setFilterFocus")
          filterDidChange=(action "setFilter")
          filter=filter
          filterMatchesKey=filterMatchesKey
          firstPartialMatch=firstPartialMatch
          extraNavParams=policyType
          placeholder="Filter policies"
          mode="policy"
        }}
        {{#if filterFocused}}
          {{#if filterMatchesKey}}
            <p class="input-hint">
              <kbd>ENTER</kbd> to go to <code>{{or pageFilter filter}}</code>
            </p>
          {{/if}}
          {{#if firstPartialMatch}}
            <p class="input-hint">
              <kbd>TAB</kbd> to complete <code>{{firstPartialMatch.id}}</code>
            </p>
          {{/if}}
        {{/if}}
      </ToolbarFilters>
    {{/if}}
    <ToolbarActions>
      <ToolbarLink
        @type="add"
        @params={{array 'vault.cluster.policies.create'}}
        @data-test-policy-create-link=true
      >
        Create {{uppercase policyType}} policy
      </ToolbarLink>
    </ToolbarActions>
  </Toolbar>
  {{#if model.meta.total}}
    {{#each model as |item|}}
      {{#if (eq item.id "root")}}
        <div class="list-item-row is-flex" data-test-policy-item>
          <Icon
            aria-hidden="true"
            class="has-text-grey-light"
            @glyph="file-outline"
          />
          <div>
            <span class="has-text-weight-semibold has-text-grey" data-test-policy-name>
              {{item.id}}
            </span>
            <p class="help has-text-grey">
              The <code>root</code> policy does not contain any rules but can
              do anything within Vault. It should be used with extreme care.
            </p>
          </div>
        </div>
      {{else}}
        {{#linked-block
          "vault.cluster.policy.show"
          policyType
          item.id
          class="list-item-row"
          data-test-policy-link=item.id
        }}
          <div class="columns is-mobile">
            <div class="column is-10">
              {{#link-to "vault.cluster.policy.show" policyType item.id
                class="has-text-black has-text-weight-semibold"
                data-test-policy-item=true
              }}<Icon
                  aria-hidden="true"
                  class="has-text-grey-light"
                  @glyph="file-outline"
                /><span class="is-underline" data-test-policy-name>{{item.id}}</span>
              {{/link-to}}
            </div>
            <div class="column has-text-right">
              <PopupMenu name="policy-nav">
                <Confirm as |c|>
                  <nav class="menu">
                    <ul class="menu-list">
                      {{#if item.updatePath.isPending}}
                        <li class="action">
                          <button disabled type="button" class="link button is-loading is-transparent">
                            loading
                          </button>
                        </li>
                        <li class="action">
                          <button disabled type="button" class="link button is-loading is-transparent">
                            loading
                          </button>
                        </li>
                      {{else}}
                        {{#if item.canRead}}
                          <li class="action">
                            {{#link-to "vault.cluster.policy.show" policyType item.id data-test-policy-link="show"}}
                              Details
                            {{/link-to}}
                          </li>
                        {{/if}}
                        {{#if item.canEdit}}
                          <li class="action">
                            {{#link-to "vault.cluster.policy.edit" policyType item.id data-test-policy-link="edit"}}
                              Edit
                            {{/link-to}}
                          </li>
                        {{/if}}
                        {{#if item.canDelete}}
                          <li class="action">
                            <c.Message
                              @id={{item.id}}
                              @confirmMessage="This will permanently delete this policy and may affect access to some data"
                              @onConfirm={{action "deletePolicy" item}}
                              data-test-policy-delete={{item.id}}/>
                          </li>
                        {{/if}}
                      {{/if}}
                    </ul>
                  </nav>
                </Confirm>
              </PopupMenu>
            </div>
          </div>
        {{/linked-block}}
      {{/if}}
    {{else}}
      <EmptyState
        @title="No policies matching &quot;{{pageFilter}}&quot;"
      />
    {{/each}}
    {{#if (gt model.meta.lastPage 1) }}
      {{list-pagination
        page=model.meta.currentPage
        lastPage=model.meta.lastPage
        link="vault.cluster.policies.index"
      }}
    {{/if}}
  {{else}}
    <EmptyState
      @title="No {{uppercase policyType}} policies yet"
      @message="A list of policies will be listed here. Create your first {{uppercase policyType}} policy to get started."
    >
      {{#link-to "vault.cluster.policies.create" class="link"}}
        Create {{uppercase policyType}} policy
        <Chevron />
      {{/link-to}}
      <LearnLink @path="/vault/getting-started/policies">
        Learn more
        <Chevron />
      </LearnLink>
    </EmptyState>
  {{/if}}
{{else}}
  {{upgrade-page title="Sentinel" minimumEdition="Vault Enterprise Premium"}}
{{/if}}