{{#linked-block
  (concat
    "vault.cluster.secrets.backend."
    "credentials"
    (unless @item.id "-root")
  )
  @item.id
  class="list-item-row"
  data-test-secret-link=@item.id
  encode=true
}}
  <div class="columns is-mobile">
    <div class="column is-10">
      <LinkTo @route={{concat "vault.cluster.secrets.backend." "credentials" (unless @item.id "-root") }} @model={{@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>
        </div>
      </LinkTo>
    </div>
    <div class="column has-text-right">
      <PopupMenu @name="role-aws-nav" @contentClass="is-wide">
        <Confirm as |c|>
          <nav class="menu">
            <ul class="menu-list">
              {{#if @item.generatePath.isPending}}
                <li class="action">
                  <button disabled type="button" class="link button is-loading is-transparent">
                    loading
                  </button>
                </li>
              {{else if @item.canGenerate}}
                <li class="action">
                  <LinkTo @route="vault.cluster.secrets.backend.credentials" @model={{@item.id}} data-test-role-aws-link="generate">
                    Generate credentials
                  </LinkTo>
                </li>
              {{/if}}
              {{#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">
                    <LinkTo @route="vault.cluster.secrets.backend.show" @model={{@item.id}} data-test-role-ssh-link="show">
                      Details
                    </LinkTo>
                  </li>
                {{/if}}
                {{#if @item.canEdit}}
                  <li class="action">
                    <LinkTo @route="vault.cluster.secrets.backend.edit" @model={{@item.id}} data-test-role-ssh-link="edit">
                      Edit
                    </LinkTo>
                  </li>
                {{/if}}
                {{#if @item.canDelete}}
                  <li class="action">
                    <c.Message
                      @id={{@item.id}}
                      @onConfirm={{@delete}}
                      data-test-aws-role-delete={{@item.id}}/>
                  </li>
                {{/if}}
              {{/if}}
            </ul>
          </nav>
        </Confirm>
      </PopupMenu>
    </div>
  </div>
{{/linked-block}}