{% extends "base.html" %}

{% block title %}Recuperar Contraseña - TallArt{% endblock %}

{% block content %}
<style>
    .card {
        max-width: 480px;
        margin: 0 auto;
    }
    .card-body {
        padding: 3rem 2.5rem;
    }
    .form-control {
        font-size: 1rem;
        padding: 0.75rem;
    }
    .btn-lg {
        padding: 0.75rem;
        font-size: 1.1rem;
    }
    .info-box {
        background-color: #d1ecf1;
        border-left: 4px solid #0c5460;
        padding: 15px;
        margin: 20px 0;
        border-radius: 4px;
    }
</style>

<div class="container mt-5">
    <div class="row justify-content-center">
        <div class="col-12 col-sm-10 col-md-8 col-lg-6 col-xl-5">
            <div class="card shadow">
                <div class="card-body p-5">
                    <div class="text-center mb-4">
                        <div class="mb-3">
                            <i class="fas fa-key fa-3x text-primary"></i>
                        </div>
                        <h2 class="card-title text-primary">¿Olvidaste tu contraseña?</h2>
                        <p class="text-muted">No te preocupes, te ayudaremos a recuperarla</p>
                    </div>

                    {% with messages = get_flashed_messages(with_categories=true) %}
                        {% if messages %}
                            {% for category, message in messages %}
                                <div class="alert alert-{{ 'danger' if category == 'error' else category }} alert-dismissible fade show" role="alert">
                                    {{ message }}
                                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                                </div>
                            {% endfor %}
                        {% endif %}
                    {% endwith %}

                    <div class="info-box">
                        <p class="mb-0" style="color: #0c5460; font-size: 0.9rem;">
                            <i class="fas fa-info-circle"></i>
                            Ingresa tu email y te enviaremos un enlace para restablecer tu contraseña.
                        </p>
                    </div>

                    <form method="POST" action="{{ url_for('auth.forgot_password') }}">
                        <div class="mb-4">
                            <label for="email" class="form-label">
                                <i class="fas fa-envelope"></i> Email
                            </label>
                            <input type="email" 
                                   class="form-control" 
                                   id="email" 
                                   name="email" 
                                   placeholder="tu@email.com"
                                   required>
                            <div class="form-text">
                                Ingresa el email con el que te registraste en TallArt
                            </div>
                        </div>

                        <div class="d-grid mb-3">
                            <button type="submit" class="btn btn-primary btn-lg">
                                <i class="fas fa-paper-plane"></i> Enviar Enlace de Recuperación
                            </button>
                        </div>
                    </form>

                    <div class="text-center mt-4">
                        <p class="mb-0">
                            ¿Recordaste tu contraseña? 
                            <a href="{{ url_for('auth.login') }}" class="text-primary">
                                <i class="fas fa-sign-in-alt"></i> Iniciar Sesión
                            </a>
                        </p>
                        <p class="mt-2">
                            ¿No tienes cuenta? 
                            <a href="{{ url_for('auth.register') }}" class="text-primary">
                                <i class="fas fa-user-plus"></i> Regístrate aquí
                            </a>
                        </p>
                    </div>

                    <div class="mt-4 p-3" style="background-color: #fff3cd; border-radius: 4px; border-left: 4px solid #ffc107;">
                        <p class="mb-0" style="color: #856404; font-size: 0.85rem;">
                            <i class="fas fa-shield-alt"></i> <strong>Seguridad:</strong> El enlace de recuperación será válido por 1 hora.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}