{{!
  Copyright IBM Corp. 2016, 2025
  SPDX-License-Identifier: BUSL-1.1
}}

<Page::Header
  @title={{if @form.isNew "Create Role" "Edit Role"}}
  @description="A role in Vault dictates what will be generated for Kubernetes and what kind of rules will be used to do so. It is not a
  Kubernetes role."
>
  <:breadcrumbs>
    <Page::Breadcrumbs @breadcrumbs={{@breadcrumbs}} />
  </:breadcrumbs>
</Page::Header>

<div class="is-flex-row has-top-margin-s">
  {{#each this.generationPreferences as |pref|}}
    <RadioCard
      @title={{pref.title}}
      @description={{pref.description}}
      @icon="token"
      @value={{pref.value}}
      @groupValue={{@form.generationPreference}}
      @onChange={{this.changePreference}}
      data-test-radio-card={{pref.value}}
    />
  {{/each}}
</div>

<div class="has-top-margin-xl has-bottom-margin-l">
  <h2 class="title is-4">
    Role options
  </h2>
  <hr class="is-marginless has-background-gray-200" />
</div>

{{#if @form.generationPreference}}
  <form id="role" {{on "submit" (perform this.save)}} data-test-policy-form>
    {{#if this.errorBanner}}
      <MessageError @errorMessage={{this.errorBanner}} class="has-top-margin-s" />
    {{/if}}

    {{#each @form.formFields as |field|}}
      <FormField @attr={{field}} @model={{@form}} @modelValidations={{this.modelValidations}} />
    {{/each}}

    <div class="has-bottom-margin-s">
      <ToggleButton
        data-test-field="annotations"
        @isOpen={{this.showAnnotations}}
        @openLabel="Hide annotations and labels"
        @closedLabel="Annotations and labels"
        @onClick={{fn (mut this.showAnnotations)}}
      />
      {{#if this.showAnnotations}}
        <div class="box" data-test-annotations>
          {{#each this.extraFields as |field|}}
            <div class={{if (eq field.type "labels") "has-top-margin-xl"}}>
              <h2 class="title is-4">Extra {{field.type}}</h2>
              <p>
                {{field.description}}
                See
                <ExternalLink @href="https://kubernetes.io/docs/concepts/overview/working-with-objects/{{field.type}}/">
                  Kubernetes
                  {{singularize field.type}}
                  documentation here
                </ExternalLink>.
              </p>
              <KvObjectEditor
                class="has-top-margin-m"
                data-test-kv={{field.type}}
                @value={{get @form.data field.key}}
                @onChange={{fn (mut (get @form.data field.key))}}
              />
            </div>
            <hr />
          {{/each}}
        </div>
      {{/if}}
    </div>

    {{#if (eq @form.generationPreference "full")}}
      <div class="has-top-margin-m has-bottom-margin-l" data-test-generated-role-rules>
        <h2 class="title is-4">
          Generated role rules
        </h2>
        <FormFieldLabel
          for="templates"
          @label="Role rules template"
          @subText="Start with a template for role rules based on your use case"
        />
        <div class="select is-fullwidth">
          <select id="templates" data-test-select-template {{on "change" this.selectTemplate}}>
            {{#each this.roleRulesTemplates as |template|}}
              <option selected={{eq this.selectedTemplateId template.id}} value={{template.id}}>
                {{template.label}}
              </option>
            {{/each}}
          </select>
        </div>
        {{#let (find-by "id" this.selectedTemplateId this.roleRulesTemplates) as |template|}}
          <JsonEditor
            class="has-top-margin-l"
            data-test-rules
            @title="Role rules"
            @value={{template.rules}}
            @example={{template.rules}}
            @mode="ruby"
            @valueUpdated={{fn (mut template.rules)}}
            @helpText={{sanitized-html this.roleRulesHelpText}}
            @onSetup={{fn (mut this.codemirrorEditor)}}
            @onRestoreExample={{this.resetRoleRules}}
          />
        {{/let}}
      </div>
    {{/if}}
    {{#if this.invalidFormAlert}}
      <div class="control" data-test-invalid-form-alert>
        <AlertInline @type="danger" class="has-top-padding-s" @message={{this.invalidFormAlert}} />
      </div>
    {{/if}}
  </form>
{{else}}
  <Hds::ApplicationState class="bottom-padding-32 is-marginless" as |A|>
    <A.Header @title="Choose an option above" @titleTag="h2" data-test-empty-state-title />
    <A.Body
      @text="To configure a Vault role, choose what should be generated in Kubernetes by Vault."
      data-test-empty-state-message
    />
  </Hds::ApplicationState>
{{/if}}

<hr class="is-marginless has-background-gray-200" />

<div class="has-top-margin-l has-bottom-margin-s">
  <Hds::Button
    @text="Save"
    @icon={{if this.save.isRunning "loading"}}
    type="submit"
    form="role"
    disabled={{or (not @form.generationPreference) this.save.isRunning}}
    data-test-submit
  />
  <Hds::Button @text="Back" @color="secondary" class="has-left-margin-s" data-test-cancel {{on "click" this.cancel}} />
</div>