<HeaderCredentials @role={{this.role}} @scope={{this.scope}} />
<Toolbar>
  {{#if this.model.meta.total}}
    <ToolbarFilters>
      <NavigateInput
        @filterFocusDidChange={{action "setFilterFocus"}}
        @filterDidChange={{action "setFilter"}}
        @filter={{this.filter}}
        @filterMatchesKey={{this.filterMatchesKey}}
        @firstPartialMatch={{this.firstPartialMatch}}
        @placeholder="Filter credentials by serial number"
        @urls={{hash
          create="vault.cluster.secrets.backend.kmip.credentials.generate"
          list="vault.cluster.secrets.backend.kmip.scope.roles"
          show="vault.cluster.secrets.backend.kmip.credentials"
        }}
      />
      {{#if this.filterFocused}}
        {{#if this.filterMatchesKey}}
          <p class="input-hint">
            <kbd>ENTER</kbd>
            to go to
            <code>{{this.filter}}</code>
            roles
          </p>
        {{/if}}
        {{#if this.firstPartialMatch}}
          <p class="input-hint">
            <kbd>TAB</kbd>
            to complete
            <code>{{this.firstPartialMatch.id}}</code>
          </p>
        {{/if}}
      {{/if}}
    </ToolbarFilters>
  {{/if}}
  <ToolbarActions>
    <ToolbarLink @route={{"credentials.generate"}} @type="add" data-test-kmip-link-generate-credentials>
      Generate credentials
    </ToolbarLink>
  </ToolbarActions>
</Toolbar>
<ListView @items={{this.model}} @itemNoun="credentials" @paginationRouteName="credentials.index" as |list|>
  {{#if list.empty}}
    <list.empty
      @title="No credentials yet for this role"
      @message="You can generate new credentials that will be limited to this role's allowed operations, then you can distribute them to your KMIP clients."
    >
      <LinkTo @route="credentials.generate">
        Generate credentials
      </LinkTo>
    </list.empty>
  {{else if list.item}}
    <ListItem
      @linkPrefix={{this.mountPoint}}
      @linkParams={{array "credentials.show" this.scope this.role list.item.id}}
      as |Item|
    >
      <Item.content>
        <Icon @name="file-text" class="has-text-grey-light" />{{list.item.id}}
      </Item.content>
      <Item.menu as |m|>
        <li class="action">
          <LinkTo @route="credentials.show" @models={{array this.scope this.role list.item.id}} class="is-block">
            View credentials
          </LinkTo>
        </li>
        {{#if list.item.deletePath.canDelete}}
          <MenuLoader @loadingParam={{list.item.deletePath.isPending}}>
            <m.Message
              @id={{list.item.id}}
              @triggerText="Revoke credentials"
              @title="Revoke this?"
              @message="Any client using these credentials will no longer be able to."
              @confirmButtonText="Revoke"
              @onConfirm={{action
                (perform
                  Item.callMethod
                  "destroyRecord"
                  list.item
                  "Successfully revoked credentials"
                  "There was an error revoking the credentials"
                  (action "refresh")
                )
              }}
            />
          </MenuLoader>
        {{/if}}
      </Item.menu>
    </ListItem>
  {{else}}
    <ListItem as |Item|>
      <Item.content>
        There are no credentials that match
        {{this.filter}}, press
        <kbd>ENTER</kbd>
        to add one.
      </Item.content>
    </ListItem>
  {{/if}}
</ListView>