{{!
  Copyright IBM Corp. 2016, 2025
  SPDX-License-Identifier: BUSL-1.1
}}
<Page::Header @title={{if this.isNew "Create Role" "Edit Role"}}>
  <:breadcrumbs>
    <Page::Breadcrumbs @breadcrumbs={{@breadcrumbs}} />
  </:breadcrumbs>
</Page::Header>

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

<form {{on "submit" (perform this.save)}} class="has-top-margin-m">
  <MessageError @errorMessage={{this.error}} />

  <label class="is-label">
    Role type
  </label>
  <Hds::Form::RadioCard::Group @name="role type options" class="has-bottom-margin-m" as |RadioGroup|>
    {{#each this.roleTypeOptions as |option|}}
      <RadioGroup.RadioCard
        @checked={{eq option.value this.roleType}}
        @disabled={{not this.isNew}}
        {{on "change" (fn this.onTypeChange option)}}
        data-test-radio-card={{option.value}}
        as |Card|
      >
        <Card.Icon @name={{option.icon}} />
        <Card.Label>{{option.title}}</Card.Label>
        <Card.Description>{{option.description}}</Card.Description>
      </RadioGroup.RadioCard>
    {{/each}}
  </Hds::Form::RadioCard::Group>

  {{#each this.fields as |field|}}
    {{! display section heading ahead of ldif fields }}
    {{#if (eq field "creation_ldif")}}
      <hr class="has-background-gray-200" />
      <h2 class="title is-4 has-top-margin-xl">LDIF Statements</h2>
    {{/if}}
    <FormField
      @attr={{find-by "name" field this.form.formFields}}
      @model={{this.form}}
      @modelValidations={{this.modelValidations}}
    />
  {{/each}}

  <hr class="has-background-gray-200 has-top-margin-l" />

  <div class="has-top-margin-l has-bottom-margin-l is-flex">
    <Hds::Button
      @text={{if this.isNew "Create role" "Save"}}
      data-test-submit
      type="submit"
      disabled={{this.save.isRunning}}
    />
    <Hds::Button
      @text="Cancel"
      @color="secondary"
      class="has-left-margin-xs"
      data-test-cancel
      disabled={{this.save.isRunning}}
      {{on "click" this.cancel}}
    />
    {{#if this.invalidFormMessage}}
      <AlertInline
        @type="danger"
        class="has-top-padding-s"
        @message={{this.invalidFormMessage}}
        data-test-invalid-form-message
      />
    {{/if}}
  </div>
</form>