{{ define "content" }}
<div class="card">
    <div class="card-header">
        <h1 class="card-title">Verify Your Email</h1>
        <p class="card-subtitle">Enter the 6-digit code sent to {{ .UserEmail }}</p>
    </div>
    
    <form method="POST" action="/verify">
        <input type="hidden" name="email" value="{{ .UserEmail }}">
        
        <div class="form-group">
            <label for="otp" class="form-label">One-Time Password</label>
            <input type="text" id="otp" name="otp" class="form-input" 
                   placeholder="123456" required autofocus maxlength="6" pattern="\d{6}">
            {{ if .Error }}
            <p class="form-error">{{ .Error }}</p>
            {{ end }}
        </div>
        
        <button type="submit" class="btn btn-primary btn-block">
            Verify & Login
        </button>
    </form>
    
    <div class="text-center mt-4">
        <p class="text-light">Didn't receive the code?</p>
        <form method="POST" action="/resend-otp">
            <input type="hidden" name="email" value="{{ .UserEmail }}">
            <button type="submit" class="btn btn-secondary">
                Resend Code
            </button>
        </form>
    </div>
</div>
{{ end }}

{{ template "base" . }}