{% extends "base.html" %}
{% block title %}{% trans %}Forgot Password{% endtrans %} – OnlineConvert{% endblock %}
{% block content %}
<div class="min-h-[60vh] flex items-center justify-center px-4 py-12">
    <div class="w-full max-w-md">
        <div class="text-center mb-8">
            <div class="w-16 h-16 rounded-full bg-yellow-100 dark:bg-yellow-900/30 flex items-center justify-center mx-auto mb-4">
                <i class="fa fa-key text-2xl text-yellow-600 dark:text-yellow-400"></i>
            </div>
            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">{% trans %}Forgot Password{% endtrans %}</h1>
            <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">{% trans %}Enter your email and we'll send you a password reset link.{% endtrans %}</p>
        </div>

        {% if submitted %}
            <div class="rounded-2xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-6 text-center" data-testid="card-submitted">

                {% if not user_found %}
                <div class="w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center mx-auto mb-4">
                    <i class="fa fa-envelope-circle-check text-xl text-blue-500"></i>
                </div>
                <h2 class="font-bold text-gray-900 dark:text-white mb-2">{% trans %}Check Your Inbox{% endtrans %}</h2>
                <p class="text-sm text-gray-500 dark:text-gray-400" data-testid="text-check-email">
                    {% trans email_addr=email %}If an account with <strong>{{ email_addr }}</strong> exists, a password reset link has been sent. Please check your inbox and spam folder.{% endtrans %}
                </p>

                {% elif email_sent %}
                <div class="w-12 h-12 rounded-full bg-green-100 dark:bg-green-900/30 flex items-center justify-center mx-auto mb-4">
                    <i class="fa fa-paper-plane text-xl text-green-600 dark:text-green-400"></i>
                </div>
                <h2 class="font-bold text-gray-900 dark:text-white mb-2">{% trans %}Email Sent!{% endtrans %}</h2>
                <p class="text-sm text-gray-500 dark:text-gray-400" data-testid="text-email-sent">
                    {% trans email_addr=email %}We've sent a password reset link to <strong>{{ email_addr }}</strong>. The link will expire in <strong>2 hours</strong>.{% endtrans %}
                </p>
                <p class="mt-3 text-xs text-gray-400 dark:text-gray-500">
                    {% trans %}Didn't receive it? Check your spam folder or{% endtrans %}
                    <a href="{{ full_url('/forgot-password') }}" class="text-primary dark:text-primary-light hover:underline">{% trans %}try again{% endtrans %}</a>.
                </p>

                {% elif smtp_error %}
                <div class="w-12 h-12 rounded-full bg-orange-100 dark:bg-orange-900/30 flex items-center justify-center mx-auto mb-4">
                    <i class="fa fa-triangle-exclamation text-xl text-orange-500"></i>
                </div>
                <h2 class="font-bold text-gray-900 dark:text-white mb-2">{% trans %}Email Could Not Be Sent{% endtrans %}</h2>
                <p class="text-sm text-gray-500 dark:text-gray-400 mb-3" data-testid="text-smtp-error">
                    {% trans %}Your reset link was generated but the email could not be delivered. Please contact the site administrator.{% endtrans %}
                </p>
                <div class="p-3 rounded-xl bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-left text-xs text-red-600 dark:text-red-400 font-mono">
                    {{ smtp_error }}
                </div>
                <p class="mt-3 text-xs text-gray-400 dark:text-gray-500">
                    <strong>{% trans %}Admin:{% endtrans %}</strong> {% trans %}Configure SMTP settings in the admin panel under General Settings.{% endtrans %}
                </p>

                {% else %}
                <div class="w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center mx-auto mb-4">
                    <i class="fa fa-envelope-circle-check text-xl text-blue-500"></i>
                </div>
                <h2 class="font-bold text-gray-900 dark:text-white mb-2">{% trans %}Check Your Inbox{% endtrans %}</h2>
                <p class="text-sm text-gray-500 dark:text-gray-400" data-testid="text-check-inbox">
                    {% trans email_addr=email %}If an account with <strong>{{ email_addr }}</strong> exists, a password reset link has been sent. Check your inbox and spam folder.{% endtrans %}
                </p>
                {% endif %}

                <a href="{{ full_url('/login') }}" class="block mt-6 text-sm text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 transition-colors">
                    <i class="fa fa-arrow-left mr-1"></i>{% trans %}Back to login{% endtrans %}
                </a>
            </div>

        {% else %}
            <div class="rounded-2xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-6">
                <form method="POST" action="{{ full_url('/forgot-password') }}" class="space-y-5">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5" for="email">{% trans %}Email Address{% endtrans %}</label>
                        <input type="email" id="email" name="email" required autocomplete="email"
                            class="w-full px-4 py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all text-sm"
                            placeholder="{% trans %}you@example.com{% endtrans %}" autofocus data-testid="input-forgot-email">
                    </div>

                    <button type="submit" class="w-full py-3 rounded-xl bg-primary hover:bg-primary/90 text-white font-semibold transition-all shadow-lg shadow-primary/20" data-testid="btn-forgot-submit">
                        <i class="fa fa-paper-plane mr-2"></i>{% trans %}Send Reset Link{% endtrans %}
                    </button>
                </form>

                <div class="mt-5 pt-4 border-t border-gray-100 dark:border-gray-800 text-center text-sm text-gray-500 dark:text-gray-400">
                    {% trans %}Remembered your password?{% endtrans %}
                    <a href="{{ full_url('/login') }}" class="text-primary dark:text-primary-light hover:underline font-medium">{% trans %}Sign in{% endtrans %}</a>
                </div>
            </div>

            <!-- How it works -->
            <div class="mt-4 p-4 rounded-xl bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800">
                <p class="text-xs text-blue-700 dark:text-blue-400 font-semibold mb-2"><i class="fa fa-circle-info mr-1"></i>{% trans %}How it works{% endtrans %}</p>
                <ol class="text-xs text-blue-600 dark:text-blue-400 space-y-1 list-decimal list-inside">
                    <li>{% trans %}Enter your registered email address above{% endtrans %}</li>
                    <li>{% trans %}We send you a secure reset link (valid for 2 hours){% endtrans %}</li>
                    <li>{% trans %}Click the link to choose your new password{% endtrans %}</li>
                </ol>
            </div>
        {% endif %}
    </div>
</div>
{% endblock %}