<PageHeader as |p|>
  <p.top>
    <nav class="breadcrumb">
      <ul>
        <li>
          <span class="sep">&#x0002f;</span>
          {{#if @model.isNew}}
            <LinkTo @route="vault.cluster.access.oidc.keys">
              Keys
            </LinkTo>
          {{else}}
            <LinkTo @route="vault.cluster.access.oidc.keys.key.details" @model={{@model.name}}>
              Details
            </LinkTo>
          {{/if}}
        </li>
      </ul>
    </nav>
  </p.top>
  <p.levelLeft>
    <h1 class="title is-3" data-test-oidc-key-title>
      {{if @model.isNew "Create" "Edit"}}
      key
    </h1>
  </p.levelLeft>
</PageHeader>

<form {{on "submit" (perform this.save)}}>
  <div class="box is-sideless is-fullwidth is-bottomless">
    <MessageError @errorMessage={{this.errorBanner}} class="has-top-margin-s" />
    {{#each @model.formFields as |attr|}}
      <FormField @attr={{attr}} @model={{@model}} @modelValidations={{this.modelValidations}} />
    {{/each}}
  </div>
  {{! RADIO CARD + SEARCH SELECT }}
  <div class="box is-sideless is-fullwidth is-marginless has-top-padding-xxl">
    <h4 class="title is-4">Allowed applications</h4>
    <div class="is-flex-row">
      <RadioCard
        data-test-oidc-radio="allow-all"
        @title="Allow every application to use"
        @description="All applications can use this key for authentication requests."
        @icon="globe"
        @value="allow_all"
        @groupValue={{this.radioCardGroupValue}}
        @onChange={{this.handleClientSelection}}
      />
      <RadioCard
        data-test-oidc-radio="limited"
        @title="Limit access to selected application"
        @description="Only selected applications can use this key for authentication requests."
        @icon="globe-private"
        @value="limited"
        @groupValue={{this.radioCardGroupValue}}
        @onChange={{this.handleClientSelection}}
        @disabled={{@model.isNew}}
        @disabledTooltipMessage="This option has been disabled for now. To limit access, you must first create an application that references this key."
      />
    </div>
    {{#if (eq this.radioCardGroupValue "limited")}}
      <SearchSelect
        @id="allowedClientIds"
        @label="Application name"
        @subText="Select which applications are allowed to use this key. Only applications that currently reference this key will appear in the dropdown."
        @models={{array "oidc/client"}}
        @inputValue={{@model.allowedClientIds}}
        @onChange={{this.handleClientSelection}}
        @disallowNewItems={{true}}
        @fallbackComponent="string-list"
        @passObject={{true}}
        @objectKeys={{array "clientId"}}
        @queryObject={{this.filterDropdownOptions}}
      />
    {{/if}}
  </div>
  <div class="field box is-fullwidth is-bottomless">
    <div class="control">
      <button
        type="submit"
        class="button is-primary {{if this.save.isRunning 'is-loading'}}"
        disabled={{this.save.isRunning}}
        data-test-oidc-key-save
      >
        {{if @model.isNew "Create" "Update"}}
      </button>
      <button
        type="button"
        class="button has-left-margin-s"
        disabled={{this.save.isRunning}}
        {{on "click" this.cancel}}
        data-test-oidc-key-cancel
      >
        Cancel
      </button>
    </div>
    {{#if this.invalidFormAlert}}
      <div class="control">
        <AlertInline @type="danger" @paddingTop={{true}} @message={{this.invalidFormAlert}} @mimicRefresh={{true}} />
      </div>
    {{/if}}
  </div>
</form>