<div class="verify-wrapper">
    <div class="verify-card">

        @if(!isOtpSent()){
        <h2 class="title">🔐 Login</h2>
        }

        @if(isOtpSent() && !isVerified()){
        <h2 class="title">🔐 OTP Verification</h2>
        }

        <!-- Step 1: Enter Email -->
        @if (!isOtpSent()) {
        <form [formGroup]="emailForm" (ngSubmit)="sendOtp()" class="form-section">
            <label for="email">Email Address</label>
            <input id="email" type="email" formControlName="email" placeholder="Enter your email" />
            <button type="submit" [disabled]="emailForm.invalid">Send OTP</button>
        </form>
        }

        <!-- Step 2: OTP Input -->
        @if (isOtpSent() && !isVerified()) {
        <div class="otp-section">
            <form [formGroup]="otpForm" (ngSubmit)="verifyOtp()">
                <label for="otp">Enter 6-digit OTP</label>
                <input id="otp" type="text" maxlength="6" formControlName="otp" placeholder="123456" />
                <button type="submit" [disabled]="otpForm.invalid">
                    Verify OTP
                </button>
            </form>

            <button class="resend-btn" (click)="resendOtp()" [disabled]="countdown() > 0">
                Resend OTP
                @if (countdown() > 0) {
                <span>({{ countdown() }}s)</span>
                }
            </button>
        </div>
        }

        @if (isError()) {
        <div class="error-banner">
            <i class="fa-solid fa-circle-exclamation"></i>
            <span>{{ message() }}</span>
        </div>
        }

        @if (!isError() && isOtpSent() && !isVerified()) {
        <div class="success-banner">
            <i class="fa-solid fa-circle-check"></i>
            <span>{{ message() }}</span>
        </div>
        }
    </div>
</div>