{{!
  Copyright (c) HashiCorp, Inc.
  SPDX-License-Identifier: BUSL-1.1
}}

<PageHeader as |p|>
  <p.top>
    <Page::Breadcrumbs @breadcrumbs={{@breadcrumbs}} />
  </p.top>
  <p.levelLeft>
    <h1 class="title is-3">
      {{if @model.isNew "Create Role" "Edit Role"}}
    </h1>
  </p.levelLeft>
</PageHeader>

<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 @model.type}}
        @disabled={{not @model.isNew}}
        {{on "change" (fn (mut @model.type) option.value)}}
        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 @model.formFields as |field|}}
    {{! display section heading ahead of ldif fields }}
    {{#if field.options.sectionHeading}}
      <hr class="has-background-gray-200" />
      <h2 class="title is-4 has-top-margin-xl">{{field.options.sectionHeading}}</h2>
    {{/if}}
    <FormField @attr={{field}} @model={{@model}} @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 @model.isNew "Create role" "Save"}}
      data-test-save
      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>