{% extends "base.html" %}

{% block title %}فراموشی رمز عبور - {{ settings.site_name }}{% endblock %}

{% block content %}

<section style="padding:60px 0;min-height:60vh;display:flex;align-items:center;">
    <div class="container">
        <div style="max-width:450px;margin:0 auto;background:white;padding:40px;border-radius:15px;box-shadow:0 5px 30px rgba(0,0,0,0.1);">
            <div style="text-align:center;margin-bottom:30px;">
                <i class="fas fa-key" style="font-size:60px;color:#0d1b6b;"></i>
                <h2 style="color:#0d1b6b;margin-top:10px;">فراموشی رمز عبور</h2>
                <p style="color:#888;font-size:14px;">شماره تماس خود را وارد کنید</p>
            </div>
            
            {% with messages = get_flashed_messages(with_categories=true) %}
                {% if messages %}
                    {% for category, message in messages %}
                        <div style="padding:12px;border-radius:8px;margin-bottom:15px;background:{% if category == 'success' %}#d4edda;color:#155724;{% else %}#f8d7da;color:#721c24;{% endif %}">
                            {{ message }}
                        </div>
                    {% endfor %}
                {% endif %}
            {% endwith %}
            
            <form method="POST">
                <div style="margin-bottom:20px;">
                    <label style="display:block;font-weight:500;margin-bottom:5px;">شماره تماس</label>
                    <input type="tel" name="phone" placeholder="مثال: 09121234567" style="width:100%;padding:12px;border:1px solid #ddd;border-radius:8px;font-size:16px;" required>
                </div>
                <button type="submit" style="width:100%;background:#0d1b6b;color:white;padding:14px;border:none;border-radius:8px;font-size:18px;font-weight:700;cursor:pointer;">
                    تایید شماره
                </button>
            </form>
            
            <div style="text-align:center;margin-top:20px;padding-top:20px;border-top:1px solid #eee;">
                <a href="{{ url_for('login') }}" style="color:#0d1b6b;">بازگشت به صفحه ورود</a>
            </div>
        </div>
    </div>
</section>

{% endblock %}