{{#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'}} " {{action "toggleZeroAddress" item backendModel}}>
                        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'}}"
                        {{action "toggleZeroAddress" item backendModel}}
                      >
                        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={{action "delete" item}}
                        data-test-ssh-role-delete/>
                    </li>
                  {{/if}}
                {{/if}}
              </ul>
            </nav>
          </Confirm>
        </PopupMenu>
      {{/if}}
    </div>
  </div>
{{/linked-block}}