{{#linked-block
  "vault.cluster.secrets.backend.show"
  (if this.keyTypeValue (concat 'role/' @item.id) @item.id)
  class="list-item-row"
  data-test-secret-link=@item.id
  encode=true
  queryParams=(secret-query-params @backendType)
}}
  <div class="columns is-mobile">
    <div class="column is-10">
      <LinkTo @route={{concat "vault.cluster.secrets.backend.show" }} @model={{if this.keyTypeValue (concat 'role/' @item.id) @item.id}} class="has-text-black has-text-weight-semibold">
        <Icon
          @glyph="user-square-outline"
          class="has-text-grey-light is-pulled-left"
        />
        <div class="role-item-details">
          <span class="is-underline">{{if (eq @item.id ' ') '(self)' (or @item.keyWithoutParent @item.id)}}</span>
          <span class="tag has-text-grey-dark">{{this.keyTypeValue}}</span>
        </div>
      </LinkTo>
    </div>
    <div class="column has-text-right">
      <PopupMenu name="secret-menu">
        <nav class="menu">
          <ul class="menu-list">
            {{#if @item.canEdit}}
              <li class="action">
                <SecretLink
                  @mode="show"
                  @secret={{@item.id}}
                  @class="has-text-black has-text-weight-semibold">
                  Edit connection
                </SecretLink>
              </li>
            {{/if}}
            {{#if @item.canEditRole}}
              <li class="action">
                <SecretLink
                  @mode="edit"
                  @secret={{concat 'role/' @item.id}}
                  @class="has-text-black has-text-weight-semibold">
                  Edit Role
                </SecretLink>
              </li>
            {{/if}}
            {{#if @item.canReset}}
              <li class="action">
                <button type="button" class="link" {{on "click" (fn this.resetConnection @item.id)}}>
                  Reset connection
                </button>
              </li>
            {{/if}}
            {{#if @item.canGenerateCredentials}}
              <li class="action">
                <LinkTo @route="vault.cluster.secrets.backend.credentials" @model={{@item.id}} @query={{hash roleType=this.keyTypeValue}}>
                  Generate credentials
                </LinkTo>
              </li>
            {{/if}}
            {{#if @item.canRotateRoot}}
              <li class="action">
                <button type="button" class="link" {{on "click" (fn this.rotateRootCred @item.id)}}>
                  Rotate root credentials
                </button>
              </li>
            {{/if}}
          </ul>
        </nav>
      </PopupMenu>
    </div>
  </div>
{{/linked-block}}