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

{% block title %}Reset your password{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        .reset-container {
            max-width: 450px;
        }
        .reset-card {
            border: 1px solid #e0e0e0;
            box-shadow: none;
        }
        .reset-title {
            font-weight: 600;
            letter-spacing: 0.5px;
        }
        .form-control {
            border-radius: 0;
            border: 1px solid #212121;
        }
        .btn-black {
            background-color: #212121;
            color: white;
            border-radius: 0;
            padding: 12px 0;
            font-weight: 500;
        }
        .btn-black:hover {
            background-color: #000;
            color: white;
        }
    </style>
{% endblock %}

{% block body %}
    <div class="container d-flex justify-content-center align-items-center min-vh-100">
        <div class="reset-container w-100">
            <div class="card reset-card bg-white">
                <div class="card-body p-5">
                    <h1 class="reset-title text-center mb-4 text-black">RESET PASSWORD</h1>

                    {% for flash_error in app.flashes('reset_password_error') %}
                        <div class="alert alert-dark alert-dismissible fade show rounded-0" role="alert">
                            {{ flash_error }}
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true" class="text-black">&times;</span>
                            </button>
                        </div>
                    {% endfor %}

                    {{ form_start(requestForm) }}
                    <div class="form-group mb-4">
                        {{ form_label(requestForm.email, null, {'label_attr': {'class': 'text-black'}}) }}
                        {{ form_widget(requestForm.email, {'attr': {'class': 'form-control bg-white text-black' ~ (requestForm.email.vars.valid ? '' : ' is-invalid')}}) }}
                        <div class="invalid-feedback text-black">
                            {{ form_errors(requestForm.email) }}
                        </div>
                        <small class="form-text text-black-50 mt-2">
                            Enter your email to receive a reset link
                        </small>
                    </div>

                    <button class="btn btn-black btn-block mt-4">
                        SEND RESET LINK
                    </button>
                    {{ form_end(requestForm) }}
                </div>
            </div>

            <div class="text-center mt-4 text-black">
                <a href="{{ path('app_login') }}" class="text-black font-weight-bold">Back to login</a>
            </div>
        </div>
    </div>
{% endblock %}