<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="confirmUserTitle">
  <div class="modal-dialog modal-dialog-scrollable" role="document">
    <form class="modal-content" #form (ngSubmit)="submit()">
      <div class="tw-text-center bwi-3x">
        <i class="bwi bwi-exclamation-triangle text-warning"></i>
      </div>

      <h2 class="tw-text-center tw-font-semibold" id="confirmUserTitle">
        {{ "confirmVaultImport" | i18n }}
      </h2>

      <div class="modal-body">
        <div>
          {{ "confirmVaultImportDesc" | i18n }}
        </div>
      </div>

      <div class="modal-footer">
        <div class="form-group modal-content">
          <label for="filePassword">{{ "confirmFilePassword" | i18n }}</label>
          <div>
            <div class="input-group">
              <input
                id="filePassword"
                type="{{ showPassword ? 'text' : 'password' }}"
                name="filePassword"
                class="text-monospace form-control"
                [(ngModel)]="filePassword"
                required
                appAutofocus
                appInputVerbatim
              />

              <div class="input-group-append">
                <div class="action-buttons">
                  <button
                    type="button"
                    class="btn btn-outline-secondary"
                    appA11yTitle="{{ 'toggleVisibility' | i18n }}"
                    (click)="togglePassword()"
                  >
                    <i
                      class="bwi bwi-lg"
                      aria-hidden="true"
                      [ngClass]="{ 'bwi-eye': !showPassword, 'bwi-eye-slash': showPassword }"
                    ></i>
                  </button>
                </div>
              </div>
            </div>
          </div>
          <div class="tw-mt-4">
            <button type="submit" class="btn btn-primary btn-submit" appBlurClick>
              <span>{{ "importData" | i18n }}</span>
            </button>
            <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
              {{ "cancel" | i18n }}
            </button>
          </div>
        </div>
      </div>
    </form>
  </div>
</div>
