{% extends 'base.html.twig' %}

{% block title %}Forgot Password{% endblock %}

{% block body %}
    <div class="min-vh-100 d-flex align-items-center justify-content-center" style="background-image: url('{{ asset('images/page-bg.png') }}'); background-size: auto; background-position: center; background-repeat: repeat;">
        <div class="container py-5">
            <div class="row justify-content-center">
                <div class="col-md-6">
                    <div class="card shadow border-0 rounded-3">
                        <div class="card-header text-white text-center py-3" style="background-color: #ff6900;">
                            <h3 class="mb-0 fw-bold">
                                <i class="fi fi-sr-lock me-2"></i>
                                Forgot Your Password?
                            </h3>
                        </div>
                        <div class="card-body p-4">
                            {% for message in app.flashes('success') %}
                                <div class="alert alert-success alert-dismissible fade show" role="alert">
                                    <i class="fi fi-sr-check me-2"></i>
                                    {{ message }}
                                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                                </div>
                            {% endfor %}

                            {% for message in app.flashes('danger') %}
                                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                    <i class="fi fi-sr-cross me-2"></i>
                                    {{ message }}
                                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                                </div>
                            {% endfor %}

                            <div class="text-center mb-4">
                                <p class="text-muted">Enter your email address and we'll send you a link to reset your password.</p>
                            </div>

                            <form method="post" id="forgotPasswordForm">
                                <div class="mb-4">
                                    <label for="inputEmail" class="form-label fw-semibold">
                                        <i class="fi fi-sr-envelope me-2"></i>
                                        Email Address
                                    </label>
                                    <input
                                            type="email"
                                            name="email"
                                            id="inputEmail"
                                            placeholder="Enter your email address"
                                            class="form-control"
                                            required
                                    />
                                    <div class="form-text text-muted">
                                        We'll send a password reset link to this email.
                                    </div>
                                </div>

                                <div class="d-grid">
                                    <button class="btn btn-lg text-white fw-bold" type="submit" style="background-color: #ff6900; border: none;">
                                        <i class="fi fi-sr-paper-plane me-2"></i>
                                        Send Reset Link
                                    </button>
                                </div>
                            </form>

                            <div class="text-center mt-4">
                                <p class="mb-0">
                                    <a href="{{ path('app_home') }}" class="text-decoration-none">
                                        <i class="fi fi-sr-arrow-left me-1"></i>
                                        Back to Home
                                    </a>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const form = document.getElementById('forgotPasswordForm');
            const email = document.getElementById('inputEmail');

            form.addEventListener('submit', function(e) {
                const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                if (!emailRegex.test(email.value)) {
                    e.preventDefault();
                    email.classList.add('is-invalid');
                    return;
                }
                email.classList.remove('is-invalid');
            });

            email.addEventListener('input', function() {
                this.classList.remove('is-invalid');
            });
        });
    </script>
{% endblock %}