<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="exportTitle">
  <div class="modal-dialog" role="document">
    <form class="modal-content" #form (ngSubmit)="submit()" [formGroup]="exportForm">
      <div class="modal-body">
        <app-callout
          type="warning"
          title="{{ 'vaultExportDisabled' | i18n }}"
          *ngIf="disabledByPolicy"
        >
          {{ "personalVaultExportPolicyInEffect" | i18n }}
        </app-callout>
        <app-export-scope-callout *ngIf="!disabledByPolicy"></app-export-scope-callout>
        <div class="box">
          <h1 class="box-header" id="exportTitle">
            {{ "exportVault" | i18n }}
          </h1>
          <div class="box-content">
            <div class="box-content-row" appBoxRow>
              <label for="format">{{ "fileFormat" | i18n }}</label>
              <select class="form-control" id="format" name="Format" formControlName="format">
                <option *ngFor="let f of formatOptions" [value]="f.value">{{ f.name }}</option>
              </select>
            </div>
            <app-user-verification ngDefaultControl formControlName="secret" name="secret">
            </app-user-verification>
          </div>
          <div id="confirmIdentityHelp" class="box-footer">
            <p>{{ "confirmIdentity" | i18n }}</p>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button
          type="submit"
          class="primary"
          appA11yTitle="{{ 'submit' | i18n }}"
          [disabled]="disabledByPolicy"
        >
          <i class="bwi bwi-download bwi-lg bwi-fw" aria-hidden="true"></i>
        </button>
        <button type="button" data-dismiss="modal">{{ "cancel" | i18n }}</button>
      </div>
    </form>
  </div>
</div>
