{{#let (options-for-backend @model.engineType "" @isEngine) as |options|}}
  <PageHeader as |p|>
    <p.top>
      <KeyValueHeader
        @baseKey={{@baseKey}}
        @path="vault.cluster.secrets.backend.list"
        @root={{@backendCrumb}}
        @isEngine={{@isEngine}}
      >
        <li>
          <span class="sep">
            /
          </span>
          {{#if @isEngine}}
            <LinkToExternal @route="secrets">secrets</LinkToExternal>
          {{else}}
            <LinkTo @route="vault.cluster.secrets">
              secrets
            </LinkTo>
          {{/if}}
        </li>
      </KeyValueHeader>
    </p.top>
    <p.levelLeft>
      <h1 class="title is-3">
        <Icon @name={{@model.icon}} @size="24" class="has-text-grey-light" />
        {{@model.id}}

        {{#if this.isPki}}
          {{#if @isEngine}}
            <span>
              <LinkToExternal
                @route="secretsListRoot"
                class="tag is-borderless is-underline has-text-weight-semibold has-extra-padding"
                data-test-new-pki-beta-button
              >
                <Icon @name="arrow-left" />
                Return to old PKI
              </LinkToExternal>
            </span>
          {{else}}
            {{#if this.shouldHidePkiBetaModal}}
              <span>
                <LinkTo
                  @route="vault.cluster.secrets.backend.pki.overview"
                  class="tag is-success is-borderless is-underline has-text-weight-semibold has-extra-padding"
                >
                  <Icon @name="key" />
                  New PKI UI available
                </LinkTo>
              </span>
            {{else}}
              <button
                type="button"
                class="tag is-success is-v-centered text-button is-underline has-text-weight-semibold has-extra-padding"
                {{on "click" (fn (mut this.modalOpen) true)}}
                data-test-old-pki-beta-button
              >
                <Icon @name="key" />
                New PKI UI available
              </button>
              <Modal
                @title="New PKI Beta"
                @onClose={{fn (mut this.modalOpen) false}}
                @isActive={{this.modalOpen}}
                @showCloseButton={{true}}
              >
                <section class="modal-card-body">
                  The new PKI beta includes, among other things:
                  <ul class="bullet">
                    <li>Multiple issuers can now be generated and managed in the UI.</li>
                    <li>Cross-signing: cross-sign multiple intermediates in a single step.</li>
                    <li>UI upgrades: smoother configuration, an overview page, and more certificate information.</li>
                  </ul>
                  <br />
                  You will always be able to return to this version.
                  <br />
                  <br />
                  You can also copy the following URL and bookmark it to always go to the beta version:
                  <br />
                  <code class="has-text-danger has-background-white-bis">
                    {{this.windowOrigin}}/ui/vault/secrets/{{@model.id}}/pki/overview
                  </code>
                  <br />
                  <br />
                  <Input
                    id="hide-beta-modal"
                    @type="checkbox"
                    @checked={{this.hidePkiBetaModal}}
                    {{on "change" this.toggleHidePkiBetaModal}}
                  />

                  <label class="has-text-weight-semibold" for="hide-beta-modal">
                    Don't show me this again
                  </label>
                </section>
                <footer class="modal-card-foot modal-card-foot-outlined">
                  <button type="button" class="button is-primary" {{on "click" this.transitionToNewPki}}>
                    Go to beta
                  </button>
                  <button
                    type="button"
                    class="button is-secondary"
                    {{on "click" (fn (mut this.modalOpen) false)}}
                    data-test-cancel-pki-beta-modal
                  >
                    Cancel
                  </button>
                </footer>
              </Modal>
            {{/if}}
          {{/if}}
        {{/if}}

        {{#if this.isKV}}
          <span class="tag" data-test-kv-version-badge>
            Version
            {{or @model.version "1"}}
          </span>
        {{/if}}
      </h1>

    </p.levelLeft>
  </PageHeader>
  {{#if options.tabs}}
    <div class="tabs-container box is-bottomless is-marginless is-fullwidth is-paddingless">
      <nav class="tabs" aria-label="secret tabs">
        {{#if @isEngine}}
          <ul>
            {{#each options.tabs as |oTab|}}
              <SecretListHeaderTab
                @displayName={{options.displayName}}
                @id={{@model.id}}
                @label={{oTab.label}}
                @link={{oTab.link}}
                @isEngine={{@isEngine}}
              />
            {{/each}}
          </ul>
        {{else}}
          <ul>
            {{#if options.hasOverview}}
              <LinkTo @route="vault.cluster.secrets.backend.overview" data-test-tab="overview">
                Overview
              </LinkTo>
            {{/if}}
            {{#each options.tabs as |oTab|}}
              <SecretListHeaderTab
                @displayName={{options.displayName}}
                @id={{@model.id}}
                @path={{oTab.checkCapabilitiesPath}}
                @label={{oTab.label}}
                @tab={{or oTab.tab ""}}
              />
            {{/each}}
            <LinkTo @route="vault.cluster.secrets.backend.configuration" data-test-configuration-tab={{true}}>
              Configuration
            </LinkTo>
          </ul>
        {{/if}}
      </nav>
    </div>
  {{else}}
    {{! if there are no tabs in the options, we'll hardcode them here }}
    <div class="tabs-container box is-bottomless is-marginless is-fullwidth is-paddingless">
      <nav class="tabs" aria-label="tabs">
        <ul>
          {{#if (includes @model.engineType (supported-secret-backends))}}
            <LinkTo
              @route="vault.cluster.secrets.backend.list-root"
              @current-when="vault.cluster.secrets.backend.list-root vault.cluster.secrets.backend.list"
            >
              {{capitalize (pluralize options.item)}}
            </LinkTo>
          {{/if}}
          <LinkTo @route="vault.cluster.secrets.backend.configuration" data-test-configuration-tab={{true}}>
            Configuration
          </LinkTo>
        </ul>
      </nav>
    </div>
  {{/if}}
{{/let}}