{{#linked-block
  (concat
    "vault.cluster.secrets.backend."
    (if (eq @item.keyType "ca") "sign" "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." (if (eq @item.keyType "ca") "sign" "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>
          <br>
          <span class="tag has-text-grey-dark">{{@item.keyType}}</span>
          {{#if @item.zeroAddress}}
            <span class="has-text-grey is-size-7">Zero-Address</span>
          {{/if}}
        </div>
      </LinkTo>
    </div>
    <div class="column has-text-right">
      {{#if (eq @backendType 'ssh')}}
        <PopupMenu @name="role-ssh-nav">
          <Confirm as |c|>
            <nav class="menu">
              <ul class="menu-list">
                {{#if (eq @item.keyType 'otp')}}
                  {{#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-ssh-link="generate">
                        Generate Credentials
                      </LinkTo>
                    </li>
                  {{/if}}
                {{else if (eq @item.keyType 'ca')}}
                  {{#if @item.signPath.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.sign" @model={{@item.id}} data-test-role-ssh-link="generate">
                        Sign Keys
                      </LinkTo>
                    </li>
                  {{/if}}
                {{/if}}
                {{#if @item.canEditZeroAddress}}
                  {{#if @item.zeroAddress}}
                    <li class="action">
                      <button type="button" disabled={{get this (concat "loading-" @item.id)}} class="link button is-transparent
                        {{if (get this (concat "loading-" @item.id)) 'is-loading'}} " {{on "click" @toggleZeroAddress}}>
                        Disable Zero Address
                      </button>
                    </li>
                  {{else}}
                    <li class="action">
                      <button
                        type="button"
                        disabled={{get this (concat "loading-" @item.id)}}
                        class="link button is-transparent {{if (get this (concat "loading-" @item.id)) 'is-loading'}}"
                        {{on "click" @toggleZeroAddress}}
                      >
                        Enable Zero Address
                      </button>
                    </li>
                  {{/if}}
                {{/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-ssh-role-delete/>
                    </li>
                  {{/if}}
                {{/if}}
              </ul>
            </nav>
          </Confirm>
        </PopupMenu>
      {{/if}}
    </div>
  </div>
{{/linked-block}}