<form {{action (queue (action "preSave" this.model) (perform this.save this.model)) on="submit"}}>
  <MessageError @model={{this.model}} data-test-edit-form-error />
  <div class="box is-sideless is-fullwidth is-marginless">
    <NamespaceReminder @mode="save" />
    {{#if (eq @mode "create")}}
      <FormField data-test-field @attr={{hash name="name" type="string"}} @model={{this.model}} />
    {{/if}}
    <div class="control is-flex box is-shadowless is-fullwidth is-marginless">
      <input
        data-test-input="operationNone"
        id="operationNone"
        type="checkbox"
        class="switch is-rounded is-success is-small"
        checked={{not this.model.operationNone}}
        onchange={{action "toggleOperationSpecial" value="target.checked"}}
      />
      <label for="operationNone">
        Allow this role to perform KMIP operations
      </label>
    </div>
    {{#unless this.model.operationNone}}
      <Toolbar>
        <h3 class="title is-6 has-left-padding-s">
          Allowed Operations
        </h3>
      </Toolbar>
      <div class="box">
        <FormField
          @attr={{hash name="operationAll" type="boolean" options=(hash label="Allow this role to perform all operations")}}
          @model={{this.model}}
        />
        <hr />
        <div class="is-flex">
          <div class="kmip-role-allowed-operations">
            {{#each-in this.model.operationFormFields.firstObject as |groupName fieldsInGroup|}}
              <h4 class="title is-7">{{groupName}}</h4>
              {{#each fieldsInGroup as |attr|}}
                <FormField
                  data-test-field
                  @disabled={{or this.model.operationNone this.model.operationAll}}
                  @attr={{attr}}
                  @model={{compute (action "placeholderOrModel") this.model.operationAll attr}}
                  @showHelpText={{false}}
                />
              {{/each}}
            {{/each-in}}
          </div>
          <div class="kmip-role-allowed-operations">
            {{#each (drop 1 (or this.model.operationFormFields (array))) as |group|}}
              <div class="kmip-role-allowed-operations">
                {{#each-in group as |groupName fieldsInGroup|}}
                  <h4 class="title is-7">{{groupName}}</h4>
                  {{#each fieldsInGroup as |attr|}}
                    <FormField
                      data-test-field
                      @disabled={{or this.model.operationNone this.model.operationAll}}
                      @attr={{attr}}
                      @model={{compute (action "placeholderOrModel") this.model.operationAll attr}}
                      @showHelpText={{false}}
                    />
                  {{/each}}
                {{/each-in}}
              </div>
            {{/each}}
          </div>
        </div>
      </div>
    {{/unless}}
    <div class="box is-fullwidth is-shadowless">
      <h3 class="title is-3">
        TLS
      </h3>
      {{#each this.model.tlsFormFields as |attr|}}
        <FormField data-test-field @attr={{attr}} @model={{this.model}} />
      {{/each}}
    </div>
    {{#each this.model.fields as |attr|}}
      <FormField data-test-field @attr={{attr}} @model={{this.model}} />
    {{/each}}
  </div>
  <div class="field is-grouped is-grouped-split is-fullwidth box is-bottomless">
    <div class="field is-grouped">
      <div class="control">
        <button
          type="submit"
          data-test-edit-form-submit
          class="button is-primary {{if this.save.isRunning 'loading'}}"
          disabled={{this.save.isRunning}}
        >
          {{this.saveButtonText}}
        </button>
      </div>
      {{#if this.cancelLink}}
        <div class="control">
          <LinkTo
            @route={{this.cancelLink.route}}
            @models={{this.cancelLink.models}}
            class="button"
            data-test-edit-form-cancel={{true}}
          >
            Cancel
          </LinkTo>
        </div>
      {{/if}}
    </div>
  </div>
</form>