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

    {{! MORE OPTIONS TOGGLE }}
    <FormFieldGroups @renderGroup="More options" @model={{@model}} @modelValidations={{this.modelValidations}} />
  </div>
  {{! RADIO CARD + SEARCH SELECT }}
  <div class="box is-sideless is-fullwidth is-marginless has-top-padding-xxl">
    <h4 class="title is-4">Assign access</h4>
    <div class="is-flex-row">
      <RadioCard
        data-test-oidc-radio="allow-all"
        @title="Allow everyone to access existing"
        @description="All Vault entities can authenticate through this application."
        @icon="org"
        @value="allow_all"
        @groupValue={{this.radioCardGroupValue}}
        @onChange={{this.handleAssignmentSelection}}
      />
      <RadioCard
        data-test-oidc-radio="limited"
        @title="Limit access to selected users"
        @description="Choose or create an assignment to give access to selected entities."
        @icon="users"
        @value="limited"
        @groupValue={{this.radioCardGroupValue}}
        @onChange={{this.handleAssignmentSelection}}
      />
    </div>
    {{#if (eq this.radioCardGroupValue "limited")}}
      <SearchSelectWithModal
        @id="assignments"
        @label="Assignment name"
        @subText="Search for an existing assignment, or type a new name to create it."
        @models={{array "oidc/assignment"}}
        @inputValue={{this.modelAssignments}}
        @onChange={{this.handleAssignmentSelection}}
        @excludeOptions={{array "allow_all"}}
        @fallbackComponent="string-list"
        @modalFormTemplate="modal-form/oidc-assignment-template"
        @modalSubtext="Use assignment to specify which Vault entities and groups are allowed to authenticate."
      />
    {{/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-client-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-client-cancel
      >
        Cancel
      </button>
    </div>
    {{#if this.invalidFormAlert}}
      <div class="control">
        <AlertInline @type="danger" @paddingTop={{true}} @message={{this.invalidFormAlert}} @mimicRefresh={{true}} />
      </div>
    {{/if}}
  </div>
</form>