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

<div
  ...attributes
  class="consul-intention-permission-header-form"
  {{fix-super-select-aria}}
>
  <FormGroup
    @name={{this.name}}
  as |group|>

    {{yield (hash
      submit=(action 'submit' this.changeset)
      reset=(action 'reset' this.changeset)

      isDirty=(and this.changeset.isValid this.changeset.isDirty)
      changeset=this.changeset
    )}}

    <fieldset>
      <div>
        <group.Element
          @name="HeaderType"
          @type="select"
        as |el|>
          <el.Label>Header type</el.Label>
          <Hds::Form::SuperSelect::Single::Field
            @options={{this.headerTypes}}
            @selected={{this.headerType}}
            @onChange={{action 'change' 'HeaderType' this.changeset}}
            @label="Header type"
            @listboxAriaLabel="Header type options"
            id="header-type-select"
          as |F|>
            <F.Options>{{get this.headerLabels F.options}}</F.Options>
          </Hds::Form::SuperSelect::Single::Field>
        </group.Element>


        <group.Element
          @name="Name"
          @error={{changeset-get this.changeset 'error.Name'}}
        as |el|>
          <el.Label>Header name</el.Label>
          <el.Text
            @value={{changeset-get this.changeset 'Name'}}
            oninput={{action 'change' 'Name' this.changeset}}
          />
          <State @state={{el.state}} @matches="error">
            <el.Error>
              {{changeset-get this.changeset 'error.Name.validation'}}
            </el.Error>
          </State>
        </group.Element>

  {{#if this.shouldShowValueField}}
        <group.Element
          @name="Value"
          @error={{changeset-get this.changeset 'error.Value'}}
        as |el|>
          <el.Label>Header {{lowercase (get this.headerLabels this.headerType)}}</el.Label>
          <el.Text
            @value={{changeset-get this.changeset 'Value'}}
            oninput={{action 'change' 'Value' this.changeset}}
          />
          <State @state={{el.state}} @matches="error">
            <el.Error>
              {{changeset-get this.changeset 'error.Value.validation'}}
            </el.Error>
          </State>
        </group.Element>
  {{/if}}

  {{#if this.shouldShowIgnoreCaseField}}
        <group.Element
          @name="IgnoreCase"
          @error={{changeset-get this.changeset 'error.IgnoreCase'}}
        as |el|>
          <el.Label>Ignore Case</el.Label>
          <el.Checkbox
            checked={{if (changeset-get this.changeset 'IgnoreCase') 'checked'}}
            onchange={{action 'change' 'IgnoreCase' this.changeset}}
          />
        </group.Element>
  {{/if}}

      </div>
    </fieldset>
  </FormGroup>
</div>
