<h2 bitTypography="h2" class="tw-mt-6">
  {{ "encKeySettings" | i18n }}
</h2>
@if (!(noLogoutOnKdfChangeFeatureFlag$ | async)) {
  <bit-callout type="warning">{{ "kdfSettingsChangeLogoutWarning" | i18n }}</bit-callout>
}
<p bitTypography="body1" class="tw-mt-4">
  {{ "encryptionKeySettingsHowShouldWeEncryptYourData" | i18n }}
</p>
<p bitTypography="body1">
  {{ "encryptionKeySettingsIncreaseImproveSecurity" | i18n }}
</p>
<form [formGroup]="formGroup" autocomplete="off">
  <div class="tw-grid tw-grid-cols-12 tw-gap-x-4">
    <div class="tw-col-span-6">
      <bit-form-field>
        <bit-label>
          {{ "algorithm" | i18n }}
          <button
            type="button"
            class="tw-border-none tw-bg-transparent tw-text-primary-600 tw-p-0"
            [bitPopoverTriggerFor]="algorithmPopover"
            appA11yTitle="{{ 'encryptionKeySettingsAlgorithmPopoverTitle' | i18n }}"
            bitLink
          >
            <i class="bwi bwi-question-circle" aria-hidden="true"></i>
          </button>
        </bit-label>
        <bit-select formControlName="kdf">
          <bit-option
            *ngFor="let option of kdfOptions"
            [value]="option.value"
            [label]="option.name"
          ></bit-option>
        </bit-select>
      </bit-form-field>
    </div>
    <div class="tw-col-span-6">
      @if (isPBKDF2(kdfConfig)) {
        <bit-form-field formGroupName="kdfConfig">
          <bit-label>
            {{ "kdfIterations" | i18n }}
          </bit-label>
          <input
            bitInput
            type="number"
            formControlName="iterations"
            [min]="PBKDF2_ITERATIONS.min"
            [max]="PBKDF2_ITERATIONS.max"
          />
          <bit-hint>{{ "kdfIterationRecommends" | i18n }}</bit-hint>
        </bit-form-field>
      } @else if (isArgon2(kdfConfig)) {
        <bit-form-field formGroupName="kdfConfig">
          <bit-label>{{ "kdfMemory" | i18n }}</bit-label>
          <input
            bitInput
            formControlName="memory"
            type="number"
            [min]="ARGON2_MEMORY.min"
            [max]="ARGON2_MEMORY.max"
          />
        </bit-form-field>
      }
    </div>
    @if (isArgon2(kdfConfig)) {
      <div class="tw-col-span-6">
        <bit-form-field formGroupName="kdfConfig">
          <bit-label>
            {{ "kdfIterations" | i18n }}
          </bit-label>
          <input
            bitInput
            type="number"
            formControlName="iterations"
            [min]="ARGON2_ITERATIONS.min"
            [max]="ARGON2_ITERATIONS.max"
          />
        </bit-form-field>
      </div>
      <div class="tw-col-span-6">
        <bit-form-field formGroupName="kdfConfig">
          <bit-label>
            {{ "kdfParallelism" | i18n }}
          </bit-label>
          <input
            bitInput
            type="number"
            formControlName="parallelism"
            [min]="ARGON2_PARALLELISM.min"
            [max]="ARGON2_PARALLELISM.max"
          />
        </bit-form-field>
      </div>
    }
  </div>
  <button
    (click)="openConfirmationModal()"
    type="button"
    buttonType="primary"
    bitButton
    bitFormButton
    class="tw-mt-2"
  >
    {{ "updateEncryptionSettings" | i18n }}
  </button>
</form>

<bit-popover [title]="'encryptionKeySettingsAlgorithmPopoverTitle' | i18n" #algorithmPopover>
  <ul class="tw-mt-2 tw-mb-0 tw-ps-4">
    <li class="tw-mb-2">{{ "encryptionKeySettingsAlgorithmPopoverPBKDF2" | i18n }}</li>
    <li>{{ "encryptionKeySettingsAlgorithmPopoverArgon2Id" | i18n }}</li>
  </ul>
  <div class="tw-mt-4 tw-mb-1">
    <a
      href="https://bitwarden.com/help/kdf-algorithms/"
      bitLink
      target="_blank"
      rel="noreferrer"
      appA11yTitle="{{ 'learnMoreAboutEncryptionAlgorithms' | i18n }}"
    >
      {{ "learnMore" | i18n }}
      <i class="bwi bwi-external-link tw-ml-1" aria-hidden="true"></i>
    </a>
  </div>
</bit-popover>
