<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="deleteAccountTitle">
  <div class="modal-dialog" role="document">
    <form
      class="modal-content"
      #form
      [appApiAction]="formPromise"
      (ngSubmit)="submit()"
      [formGroup]="deleteForm"
    >
      <div class="modal-body">
        <p class="modal-text">{{ "deleteAccountDesc" | i18n }}</p>
        <app-callout type="warning" title="{{ 'warning' | i18n }}">
          {{ "deleteAccountWarning" | i18n }}
        </app-callout>
        <div class="box last">
          <h1 class="box-header" id="deleteAccountTitle">
            {{ "deleteAccount" | i18n }}
          </h1>
          <div class="box-content">
            <app-user-verification
              ngDefaultControl
              formControlName="verification"
              name="verification"
            >
            </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="danger" [disabled]="form.loading || !secret">
          <i class="bwi bwi-spinner bwi-spin" [hidden]="!form.loading" aria-hidden="true"></i>
          <span [hidden]="form.loading">{{ "deleteAccount" | i18n }}</span>
        </button>
        <button type="button" data-dismiss="modal" [disabled]="form.loading">
          {{ "cancel" | i18n }}
        </button>
      </div>
    </form>
  </div>
</div>
