{{define "content"}}
<section class="auth-card confirmation-card">
    {{if .VerificationSuccess}}
        <div class="confirmation-success">
            <div class="confirmation-icon success-icon">
                <svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="12" cy="12" r="10" fill="#10b981" stroke="#10b981" stroke-width="2"/>
                    <path d="M9 12l2 2 4-4" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </div>
            <h1 class="confirmation-title">Email Confirmed! 🎉</h1>
            <p class="confirmation-message">Your account has been successfully verified. You can now sign in and start using {{.SiteTitle}}.</p>
            <div class="confirmation-actions">
                <a class="button button-primary" href="/login?verified=1">
                    <svg class="svg-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4M10 17l5-5-5-5M21 12H9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                    Continue to Sign In
                </a>
            </div>
        </div>
    {{else}}
        <div class="confirmation-error">
            <div class="confirmation-icon error-icon">
                <svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="12" cy="12" r="10" fill="#ef4444" stroke="#ef4444" stroke-width="2"/>
                    <path d="M15 9l-6 6M9 9l6 6" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </div>
            <h1 class="confirmation-title">Verification Failed</h1>
            <p class="confirmation-message">We couldn't confirm this account with the link provided. The link may be invalid, expired, or already used.</p>
            <div class="confirmation-help">
                <h3>What can you do?</h3>
                <ul>
                    <li>Check if you clicked the correct link from your email</li>
                    <li>Request a new verification email</li>
                    <li>Contact support if the problem persists</li>
                </ul>
            </div>
            <div class="confirmation-actions">
                <a class="button button-primary" href="/login">
                    <svg class="svg-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M9 12l2 2 4-4M21 12c0 4.97-4.03 9-9 9s-9-4.03-9-9 4.03-9 9-9 9 4.03 9 9z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                    Back to Sign In
                </a>
                <a class="button button-secondary" href="/resend-verification">
                    <svg class="svg-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8M3 3v5h5M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16M21 21v-5h-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                    Resend Email
                </a>
            </div>
        </div>
    {{end}}
</section>
{{end}}