<h2 mat-dialog-title>Email Verification</h2>
<div mat-dialog-content>
  <p>Please enter the 6-character verification code sent to: <strong>{{ email }}</strong></p>

  <form [formGroup]="form">
    <mat-form-field appearance="fill" style="width: 100%;">
      <mat-label>Verification Code</mat-label>
      <input matInput formControlName="code" placeholder="Enter 6-character code">
      @if (form.controls.code.invalid && form.controls.code.touched) {
        <mat-error>
          @if (form.controls.code.errors?.['required']) {
            Verification code is required
          } @else if (form.controls.code.errors?.['minlength'] || form.controls.code.errors?.['maxlength']) {
            Code must be exactly 6 characters
          } @else {
            Please enter the 6-character code we sent you.
          }
        </mat-error>
      }
    </mat-form-field>
  </form>

  @if (mailVerified()) {
    <p class="success-message">Email verified successfully!</p>
  }
</div>

<div mat-dialog-actions align="end">
  <button mat-button (click)="onCancel()">Cancel</button>

  <button mat-button
          color="accent"
          (click)="onResend()"
          [disabled]="resendCooldown()">
    @if (resendCooldown()) {
      Resend ({{ cooldownSeconds() }}s)
    } @else {
      Resend Code
    }
  </button>

  <button mat-flat-button
          color="primary"
          (click)="onSubmit()"
          [disabled]="form.invalid">
    Submit
  </button>
</div>
