<form
  #form
  (ngSubmit)="submit()"
  ngNativeValidate
  [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="form-group col-6">
      <label class="tw-text-sm tw-semi-bold" for="format">{{ "fileFormat" | i18n }}</label>
      <select class="form-control" name="format" formControlName="format">
        <option *ngFor="let f of formatOptions" [value]="f.value">{{ f.name }}</option>
      </select>
    </div>
  </div>
  <div class="row">
    <div class="form-group col-6">
      <ng-container *ngIf="format === 'encrypted_json'">
        <div role="radiogroup" aria-labelledby="fileTypeHeading">
          <label id="fileTypeHeading" class="tw-text-sm tw-semi-bold">
            {{ "fileTypeHeading" | i18n }}
          </label>

          <div appBoxRow name="FileTypeOptions" class="tw-flex tw-items-center">
            <div>
              <input
                type="radio"
                class="radio"
                name="fileEncryptionType"
                id="1"
                [value]="0"
                formControlName="fileEncryptionType"
              />
            </div>
            <div>
              <label class="tw-text-xs tw-semi-bold tw-ml-1"> {{ "accountBackup" | i18n }} </label>
            </div>
          </div>

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

          <div class="tw-flex tw-items-center">
            <div>
              <input
                type="radio"
                class="radio"
                name="fileEncryptionType"
                id="2"
                [value]="1"
                formControlName="fileEncryptionType"
              />
            </div>
            <div>
              <label class="tw-text-xs tw-semi-bold tw-ml-1">{{
                "passwordProtected" | i18n
              }}</label>
            </div>
          </div>

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

        <ng-container *ngIf="fileEncryptionType == 1">
          <label for="format">{{ "filePassword" | i18n }}</label>

          <div class="input-group">
            <input
              type="{{ showPassword ? 'text' : 'password' }}"
              formControlName="password"
              name="password"
              class="form-control"
            />
            <div class="input-group-append">
              <button
                type="button"
                class="btn btn-outline-secondary"
                appStopClick
                appA11yTitle="{{ 'toggleVisibility' | i18n }}"
                [attr.aria-pressed]="showPassword"
                (click)="togglePassword()"
              >
                <i
                  class="bwi bwi-lg"
                  aria-hidden="true"
                  [ngClass]="{ 'bwi-eye': !showPassword, 'bwi-eye-slash': showPassword }"
                ></i>
              </button>
            </div>
          </div>

          <div class="small text-muted">
            {{ "exportPasswordDescription" | i18n }}
          </div>
          <br />
          <label for="format">{{ "confirmFilePassword" | i18n }}</label>
          <div class="input-group">
            <input
              formControlName="confirmPassword"
              name="confirmPassword"
              class="form-control"
              type="{{ showConfirmPassword ? 'text' : 'password' }}"
            />

            <div class="input-group-append">
              <div class="action-buttons">
                <button
                  type="button"
                  class="btn btn-outline-secondary"
                  appStopClick
                  appA11yTitle="{{ 'toggleVisibility' | i18n }}"
                  [attr.aria-pressed]="showConfirmPassword"
                  (click)="toggleConfirmPassword()"
                >
                  <i
                    class="bwi bwi-lg"
                    aria-hidden="true"
                    [ngClass]="{
                      'bwi-eye': !showConfirmPassword,
                      'bwi-eye-slash': showConfirmPassword
                    }"
                  ></i>
                </button>
              </div>
            </div>
          </div>
          <br />
        </ng-container>
      </ng-container>
      <button
        type="submit"
        class="btn btn-primary btn-submit"
        [disabled]="form.loading || disabled"
      >
        <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
        <span>{{ "confirmFormat" | i18n }}</span>
      </button>
    </div>
  </div>
</form>
