<bit-section [disableMargin]="disableMargin">
  @if (showHeader) {
    <bit-section-header>
      <h2 bitTypography="h6">{{ "options" | i18n }}</h2>
    </bit-section-header>
  }
  <form [formGroup]="settings" class="tw-container">
    <div class="tw-mb-4">
      <bit-card>
        <bit-form-field disableMargin>
          <bit-label>{{ "length" | i18n }}</bit-label>
          <input bitInput formControlName="length" type="number" (change)="save('length')" />
          <bit-hint>{{ lengthBoundariesHint$ | async }}</bit-hint>
        </bit-form-field>
      </bit-card>
    </div>
    <div>
      <bit-card>
        <div class="tw-mb-4">{{ "include" | i18n }}</div>
        <div class="tw-mb-4 tw-flex tw-flex-wrap tw-gap-4 sm:tw-gap-8">
          <bit-form-control
            class="!tw-mb-0"
            attr.aria-description="{{ 'uppercaseDescription' | i18n }}"
            title="{{ 'uppercaseDescription' | i18n }}"
          >
            <input
              bitCheckbox
              type="checkbox"
              formControlName="uppercase"
              (change)="save('uppercase')"
            />
            <bit-label>{{ "uppercaseLabel" | i18n }}</bit-label>
          </bit-form-control>
          <bit-form-control
            class="!tw-mb-0"
            attr.aria-description="{{ 'lowercaseDescription' | i18n }}"
            title="{{ 'lowercaseDescription' | i18n }}"
          >
            <input
              bitCheckbox
              type="checkbox"
              formControlName="lowercase"
              (change)="save('lowercase')"
            />
            <bit-label>{{ "lowercaseLabel" | i18n }}</bit-label>
          </bit-form-control>
          <bit-form-control
            class="!tw-mb-0"
            attr.aria-description="{{ 'numbersDescription' | i18n }}"
            title="{{ 'numbersDescription' | i18n }}"
          >
            <input bitCheckbox type="checkbox" formControlName="number" (change)="save('number')" />
            <bit-label>{{ "numbersLabel" | i18n }}</bit-label>
          </bit-form-control>
          <bit-form-control class="!tw-mb-0" title="{{ 'specialCharactersDescription' | i18n }}">
            <input
              bitCheckbox
              type="checkbox"
              formControlName="special"
              (change)="save('special')"
            />
            <!-- hard-coded the special characters string because `$` indicates an i18n interpolation,
              and is handled inconsistently across browsers. Angular template syntax is used to
              ensure special characters are entity-encoded.
            -->
            <bit-label>
              <span aria-hidden="true">{{ "!@#$%^&*" }}</span>
              <span class="tw-sr-only">
                {{ "specialCharactersDescription" | i18n }}
              </span>
            </bit-label>
          </bit-form-control>
        </div>
        <div class="tw-flex">
          <bit-form-field class="tw-w-full tw-basis-1/2 tw-mr-4">
            <bit-label>{{ "minNumbers" | i18n }}</bit-label>
            <input
              bitInput
              type="number"
              formControlName="minNumber"
              (change)="save('minNumbers')"
            />
          </bit-form-field>
          <bit-form-field class="tw-w-full tw-basis-1/2">
            <bit-label>{{ "minSpecial" | i18n }}</bit-label>
            <input
              bitInput
              type="number"
              formControlName="minSpecial"
              (change)="save('minSpecial')"
            />
          </bit-form-field>
        </div>
        <bit-form-control [disableMargin]="!policyInEffect">
          <input
            bitCheckbox
            type="checkbox"
            formControlName="avoidAmbiguous"
            (change)="save('avoidAmbiguous')"
          />
          <bit-label>{{ "avoidAmbiguous" | i18n }}</bit-label>
        </bit-form-control>
        @if (policyInEffect) {
          <p bitTypography="helper">{{ "generatorPolicyInEffect" | i18n }}</p>
        }
      </bit-card>
    </div>
  </form>
</bit-section>
