<form {{on "submit" (perform this.save)}}>
  <div class="box is-sideless is-fullwidth is-marginless">
    <MessageError @errorMessage={{this.errorBanner}} class="has-top-margin-s" />
    {{! ARG TODO write a test for namespace reminder }}
    <NamespaceReminder @mode={{if @role.isNew "create" "update"}} @noun="PKI role" />
    {{#each @role.formFieldGroups as |fieldGroup|}}
      {{#each-in fieldGroup as |group fields|}}
        {{! DEFAULT VIEW }}
        {{#if (eq group "default")}}
          {{#each fields as |attr|}}
            {{#if (and (eq attr.name "issuerRef") @issuers)}}
              <div class="has-top-margin-m {{unless this.showDefaultIssuer 'has-bottom-margin-xs' 'has-bottom-margin-m'}}">
                <FormFieldLabel
                  for={{attr.name}}
                  @label="Issuer ref"
                  @helpText={{(if this.showHelpText attr.options.helpText)}}
                  @subText={{attr.options.subText}}
                />
                <Toggle
                  @name={{concat attr.name "-toggle"}}
                  @status="success"
                  @size="small"
                  @checked={{this.showDefaultIssuer}}
                  @onChange={{this.toggleShowDefaultIssuer}}
                >
                  <span class="has-text-grey">Use default issuer</span>
                </Toggle>
              </div>
              {{#unless this.showDefaultIssuer}}
                <div class="has-top-margin-xs has-bottom-margin-l">
                  <div class="select is-fullwidth">
                    <Select
                      @name={{attr.name}}
                      @options={{this.issuers}}
                      @valueAttribute={{"issuerDisplayName"}}
                      @labelAttribute={{"issuerDisplayName"}}
                      @isFullwidth={{true}}
                      @selectedValue={{@role.issuerRef}}
                      @onChange={{action (mut @role.issuerRef)}}
                    />
                  </div>
                </div>
              {{/unless}}
            {{else}}
              <FormField
                data-test-field={{attr}}
                @attr={{attr}}
                @model={{@role}}
                @modelValidations={{this.modelValidations}}
                @showHelpText={{false}}
              >
                <PkiNotValidAfterForm @attr={{attr}} @model={{@role}} />
              </FormField>
            {{/if}}
          {{/each}}
        {{else}}
          {{#let (camelize (concat "show" group)) as |prop|}}
            <ToggleButton
              @isOpen={{get @role prop}}
              @openLabel={{concat "Hide " group}}
              @closedLabel={{group}}
              @onClick={{fn (mut (get @role prop))}}
              class="is-block"
              data-test-toggle-group={{group}}
            />
            {{#if (get @role prop)}}
              <div class="box is-tall is-marginless" data-test-toggle-div={{group}}>
                {{#let (get @role.fieldGroupsInfo group) as |toggleGroup|}}
                  {{! HEADER }}
                  {{#if toggleGroup.header}}
                    <div class="has-bottom-margin-s">
                      <FormFieldLabel
                        for={{toggleGroup.header.name}}
                        @label={{toggleGroup.header.label}}
                        @subText={{toggleGroup.header.text}}
                        @docLink={{toggleGroup.header.docLink}}
                      />
                    </div>
                  {{/if}}
                  {{! FIELDS }}
                  {{#if (eq group "Key usage")}}
                    <PkiKeyUsage @model={{@role}} />
                  {{else if (eq group "Key parameters")}}
                    <PkiKeyParameters @model={{@role}} @fields={{fields}} />
                  {{else}}
                    {{#each fields as |attr|}}
                      <FormField
                        data-test-field={{true}}
                        @attr={{attr}}
                        @model={{@role}}
                        @modelValidations={{@roleValidations}}
                        @showHelpText={{false}}
                      >
                        {{yield attr}}
                      </FormField>
                    {{/each}}
                  {{/if}}
                  {{! FOOTER }}
                  {{#if toggleGroup.footer}}
                    <p class="sub-text">
                      <Icon @name="info" />
                      {{toggleGroup.footer.text}}
                      {{#if toggleGroup.footer.docLink}}
                        <DocLink @path={{toggleGroup.footer.docLink}}>
                          {{toggleGroup.footer.docText}}
                        </DocLink>
                      {{/if}}
                    </p>
                  {{/if}}
                {{/let}}
              </div>
            {{/if}}
          {{/let}}
        {{/if}}
      {{/each-in}}
    {{/each}}
  </div>
  <div class="has-top-padding-s">
    <button
      type="submit"
      class="button is-primary {{if this.save.isRunning 'is-loading'}}"
      disabled={{this.save.isRunning}}
      data-test-pki-role-save
    >
      {{if @role.isNew "Create" "Update"}}
    </button>
    <button
      type="button"
      class="button has-left-margin-s"
      disabled={{this.save.isRunning}}
      {{on "click" @onCancel}}
      data-test-pki-role-cancel
    >
      Cancel
    </button>
    {{#if this.modelValidations.targets.errors}}
      <AlertInline @type="danger" @message={{join ", " this.modelValidations.targets.errors}} @paddingTop={{true}} />
    {{/if}}
    {{#if this.invalidFormAlert}}
      <div class="control">
        <AlertInline @type="danger" @paddingTop={{true}} @message={{this.invalidFormAlert}} @mimicRefresh={{true}} />
      </div>
    {{/if}}
  </div>
</form>