<!-- Please remove this disable statement when editing this file! -->
<!-- eslint-disable tailwindcss/no-custom-classname -->
<form
  #form
  (ngSubmit)="submit()"
  [appApiAction]="formPromise"
  [formGroup]="exportForm"
  *ngIf="exportForm"
>
  <div class="page-header">
    <h1>{{ "exportVault" | i18n }}</h1>
  </div>

  <app-callout type="error" title="{{ 'vaultExportDisabled' | i18n }}" *ngIf="disabledByPolicy">
    {{ "personalVaultExportPolicyInEffect" | i18n }}
  </app-callout>
  <app-export-scope-callout
    [organizationId]="organizationId"
    *ngIf="!disabledByPolicy"
  ></app-export-scope-callout>

  <div class="row">
    <div class="col-6">
      <bit-form-field>
        <bit-label class="tw-text-lg" for="format">{{ "fileFormat" | i18n }}</bit-label>
        <select bitInput name="format" formControlName="format">
          <option *ngFor="let f of formatOptions" [value]="f.value">{{ f.name }}</option>
        </select>
      </bit-form-field>
    </div>
  </div>
  <div class="row">
    <div class="form-group col-6">
      <ng-container *ngIf="format === 'encrypted_json'">
        <div role="radiogroup" aria-labelledby="exportTypeHeading">
          <label id="exportTypeHeading" class="tw-semi-bold tw-text-lg">
            {{ "exportTypeHeading" | i18n }}
          </label>

          <div appBoxRow name="FileTypeOptions" class="tw-flex tw-items-center">
            <div>
              <input
                type="radio"
                class="radio"
                name="fileEncryptionType"
                id="AccountEncrypted"
                [value]="encryptedExportType.AccountEncrypted"
                formControlName="fileEncryptionType"
                [checked]="fileEncryptionType === encryptedExportType.AccountEncrypted"
              />
            </div>
            <div>
              <label class="tw-semi-bold tw-text-md tw-my-1 tw-ml-1" for="AccountEncrypted">
                {{ "accountRestricted" | i18n }}
              </label>
            </div>
          </div>

          <div class="tw-regular ml-3 pb-2 tw-text-sm">
            {{ "accountRestrictedOptionDescription" | i18n }}
          </div>

          <div class="tw-flex tw-items-center">
            <div>
              <input
                type="radio"
                class="radio"
                name="fileEncryptionType"
                id="FileEncrypted"
                [value]="encryptedExportType.FileEncrypted"
                formControlName="fileEncryptionType"
                [checked]="fileEncryptionType === encryptedExportType.FileEncrypted"
              />
            </div>
            <div>
              <label class="tw-semi-bold tw-text-md tw-my-1 tw-ml-1" for="FileEncrypted">{{
                "passwordProtected" | i18n
              }}</label>
            </div>
          </div>

          <div class="tw-regular ml-3 tw-text-sm">
            {{ "passwordProtectedOptionDescription" | i18n }}
          </div>
        </div>
        <br />

        <ng-container *ngIf="fileEncryptionType == encryptedExportType.FileEncrypted">
          <bit-form-field>
            <bit-label>{{ "filePassword" | i18n }}</bit-label>
            <input
              bitInput
              type="password"
              id="filePassword"
              formControlName="filePassword"
              name="password"
            />
            <button
              type="button"
              bitSuffix
              bitIconButton
              bitPasswordInputToggle
              [(toggled)]="showFilePassword"
            ></button>
            <bit-hint>{{ "exportPasswordDescription" | i18n }}</bit-hint>
          </bit-form-field>
          <bit-form-field>
            <bit-label>{{ "confirmFilePassword" | i18n }}</bit-label>
            <input
              bitInput
              type="password"
              id="confirmFilePassword"
              formControlName="confirmFilePassword"
              name="confirmFilePassword"
            />
            <button
              type="button"
              bitSuffix
              bitIconButton
              bitPasswordInputToggle
              [(toggled)]="showFilePassword"
            ></button>
          </bit-form-field>
        </ng-container>
      </ng-container>

      <button
        type="submit"
        class="btn btn-primary btn-submit"
        [disabled]="form.loading || disabledByPolicy"
        [ngClass]="{ manual: disabledByPolicy }"
      >
        <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
        <span>{{ "confirmFormat" | i18n }}</span>
      </button>
    </div>
  </div>
</form>
