<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="robots" content="noindex, nofollow, noarchive, nosnippet, noimageindex">
    <title>{{ title }} - DictIA</title>
    <link rel="icon" href="{{ url_for('static', filename='img/favicon.ico') }}" type="image/svg+xml">
    <script src="{{ url_for('static', filename='vendor/js/tailwind.min.js') }}"></script>
    <link rel="stylesheet" href="{{ url_for('static', filename='vendor/css/fontawesome.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">

    {% include 'includes/loading_overlay.html' %}

    <script>
        function applyTheme() {
            if (!document.documentElement) return;
            const savedMode = localStorage.getItem('darkMode');
            const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
            if (savedMode === 'true' || (savedMode === null && prefersDark)) {
                document.documentElement.classList.add('dark');
            } else {
                document.documentElement.classList.remove('dark');
            }
            const savedScheme = localStorage.getItem('colorScheme') || 'blue';
            const isDark = document.documentElement.classList.contains('dark');
            const themePrefix = isDark ? 'theme-dark-' : 'theme-light-';
            const themeClasses = ['blue', 'emerald', 'purple', 'rose', 'amber', 'teal'];
            themeClasses.forEach(theme => {
                document.documentElement.classList.remove(`theme-light-${theme}`);
                document.documentElement.classList.remove(`theme-dark-${theme}`);
            });
            if (savedScheme !== 'blue') {
                document.documentElement.classList.add(themePrefix + savedScheme);
            }
        }
        applyTheme();
    </script>
</head>
<body class="bg-[var(--bg-primary)] text-[var(--text-primary)]">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-6 flex flex-col min-h-screen">
        <header class="flex justify-between items-center mb-6 pb-4 border-b border-[var(--border-primary)]">
            <h1 class="text-3xl font-bold text-[var(--text-primary)]">
                <a href="{{ url_for('recordings.index') }}" class="flex items-center">
                    <img src="{{ url_for('static', filename='img/logo-dictia.png') }}" alt="DictIA" class="h-14 w-14 mr-3">
                    DictIA
                </a>
            </h1>
        </header>

        <main class="flex-grow flex items-center justify-center">
            <div class="w-full max-w-md bg-[var(--bg-secondary)] p-8 rounded-xl shadow-lg border border-[var(--border-primary)]">
                {% with messages = get_flashed_messages(with_categories=true) %}
                    {% if messages %}
                        {% for category, message in messages %}
                            <div class="mb-4 p-3 rounded-lg {% if category == 'success' %}bg-[var(--bg-success-light)] text-[var(--text-success-strong)]{% elif category == 'danger' %}bg-[var(--bg-danger-light)] text-[var(--text-danger-strong)]{% elif category == 'warning' %}bg-[var(--bg-warning-light)] text-[var(--text-warning-strong)]{% else %}bg-[var(--bg-info-light)] text-[var(--text-info-strong)]{% endif %}">
                                {{ message }}
                            </div>
                        {% endfor %}
                    {% endif %}
                {% endwith %}

                <div class="text-center">
                    <div class="mb-6">
                        <div class="w-20 h-20 mx-auto bg-[var(--bg-info-light)] rounded-full flex items-center justify-center">
                            <i class="fas fa-envelope text-[var(--text-info-strong)] text-3xl"></i>
                        </div>
                    </div>

                    {% if action == 'verification' %}
                        <h2 class="text-2xl font-semibold text-[var(--text-primary)] mb-4">Check Your Email</h2>
                        <p class="text-[var(--text-secondary)] mb-2">We've sent a verification link to:</p>
                        <p class="text-[var(--text-primary)] font-medium mb-6">{{ email }}</p>
                        <p class="text-[var(--text-muted)] text-sm mb-6">
                            Click the link in the email to verify your account. The link will expire in 24 hours.
                        </p>
                    {% elif action == 'verification_required' %}
                        <h2 class="text-2xl font-semibold text-[var(--text-primary)] mb-4">Email Verification Required</h2>
                        <p class="text-[var(--text-secondary)] mb-2">Please verify your email address:</p>
                        <p class="text-[var(--text-primary)] font-medium mb-6">{{ email }}</p>
                        <p class="text-[var(--text-muted)] text-sm mb-6">
                            Check your inbox for a verification email. If you haven't received it, you can request a new one.
                        </p>
                    {% elif action == 'password_reset' %}
                        <h2 class="text-2xl font-semibold text-[var(--text-primary)] mb-4">Check Your Email</h2>
                        <p class="text-[var(--text-secondary)] mb-2">If an account exists with this email:</p>
                        <p class="text-[var(--text-primary)] font-medium mb-6">{{ email }}</p>
                        <p class="text-[var(--text-muted)] text-sm mb-6">
                            We've sent a password reset link. The link will expire in 1 hour.
                        </p>
                    {% endif %}

                    {% if show_resend and (action == 'verification' or action == 'verification_required') %}
                        <div class="mb-6">
                            <form method="POST" action="{{ url_for('auth.resend_verification') }}">
                                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                <input type="hidden" name="email" value="{{ email }}">
                                <button type="submit" class="text-[var(--text-accent)] hover:underline text-sm">
                                    <i class="fas fa-redo mr-1"></i> Resend verification email
                                </button>
                            </form>
                        </div>
                    {% endif %}

                    <div class="pt-4 border-t border-[var(--border-secondary)]">
                        <a href="{{ url_for('auth.login') }}" class="text-[var(--text-accent)] hover:underline">
                            <i class="fas fa-arrow-left mr-1"></i> Back to Login
                        </a>
                    </div>
                </div>
            </div>
        </main>

        <footer class="text-center py-4 mt-8 text-xs text-[var(--text-light)] border-t border-[var(--border-primary)]">
            <div>&copy; {{ now.year }} InnovA AI &middot; <a href="/politique-confidentialite" class="underline hover:text-[var(--text-primary)]">Politique de confidentialit&eacute;</a> &middot; <a href="/conditions-utilisation" class="underline hover:text-[var(--text-primary)]">Conditions d'utilisation</a></div>
        </footer>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            if (window.AppLoader) {
                AppLoader.waitForReady();
            }
        });
    </script>
</body>
</html>
