@if (step() === 'otp') {
  <pa-modal-dialog>
    <pa-modal-title>
      {{ 'account.delete.verify_identity_title' | translate }}
    </pa-modal-title>
    <pa-modal-content>
      <p>{{ 'account.delete.otp_explanation' | translate: { email: (userEmail$ | async) } }}</p>
      <div class="otp-send-row">
        <pa-button
          [disabled]="otpSending()"
          (click)="requestOtp()">
          @if (otpSending()) {
            <nsi-spinner size="small"></nsi-spinner>
          }
          {{ (otpSent() ? 'account.delete.otp_resend' : 'account.delete.otp_send_code') | translate }}
        </pa-button>
      </div>
      @if (otpError()) {
        <p class="otp-error">{{ 'account.delete.otp_error' | translate }}</p>
      }
      @if (otpSent()) {
        <p class="otp-sent-message">{{ 'account.delete.otp_sent' | translate }}</p>
        <app-otp-input
          (otpComplete)="onOtpComplete($event)"
          (otpChange)="onOtpChange($event)"></app-otp-input>
      }
    </pa-modal-content>
    <pa-modal-footer>
      <div class="pa-modal-footer pa-dual-buttons">
        <pa-button
          aspect="basic"
          (click)="modal.close()">
          {{ 'pastanaga.cancel' | translate }}
        </pa-button>
        <pa-button
          [disabled]="!otpCode()"
          (click)="advanceToConfirm()">
          {{ 'account.delete.otp_continue' | translate }}
        </pa-button>
      </div>
    </pa-modal-footer>
  </pa-modal-dialog>
}
@if (step() === 'reauth') {
  <pa-modal-dialog>
    <pa-modal-title>
      {{ 'account.delete.verify_identity_title' | translate }}
    </pa-modal-title>
    <pa-modal-content>
      <p>{{ 'account.delete.reauth_explanation' | translate }}</p>
    </pa-modal-content>
    <pa-modal-footer>
      <div class="pa-modal-footer pa-dual-buttons">
        <pa-button
          aspect="basic"
          (click)="modal.close()">
          {{ 'pastanaga.cancel' | translate }}
        </pa-button>
        <pa-button (click)="forceReauth()">
          {{ 'generic.continue' | translate }}
        </pa-button>
      </div>
    </pa-modal-footer>
  </pa-modal-dialog>
}
@if (step() === 'confirm') {
  <pa-modal-dialog>
    <pa-modal-title>
      {{ 'account.delete_account_confirm_title' | translate }}
    </pa-modal-title>
    <pa-modal-content>
      <div>
        <pa-checkbox
          noEllipsis
          [value]="deleteAccount()"
          (valueChange)="deleteAccount.set($event)">
          {{ 'account.delete_account_confirm' | translate }}
        </pa-checkbox>
      </div>
      @if (canKeepUser | async) {
        <div class="delete-user">
          <label for="group-keep-user">{{ 'account.delete.keep_user_title' | translate }}</label>
          <pa-radio-group
            [value]="keepUser()"
            (valueChange)="keepUser.set($event)"
            id="group-keep-user">
            <pa-radio value="yes">{{ 'generic.yes' | translate }}</pa-radio>
            <pa-radio value="no">{{ 'generic.no' | translate }}</pa-radio>
          </pa-radio-group>
        </div>
      }
    </pa-modal-content>
    <pa-modal-footer>
      <div class="pa-modal-footer pa-dual-buttons">
        <pa-button
          aspect="basic"
          (click)="modal.close()">
          {{ 'pastanaga.cancel' | translate }}
        </pa-button>
        <pa-button
          kind="destructive"
          [disabled]="!deleteAccount() || ((canKeepUser | async) && keepUser() === undefined) || loading()"
          (click)="delete()">
          {{ 'generic.delete' | translate }}
        </pa-button>
      </div>
    </pa-modal-footer>
  </pa-modal-dialog>
}