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

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

{% block body %}
    <div class="flex flex-col bg-orange-500/50 p-4 rounded-lg gap-4 w-full md:w-[420px] border-orange-500 border-2 text-gray-50">
        <h2 class="text-xl font-bold">Reset your password</h2>

        <div class="mb-3">
            Enter your email address, and we'll send you a link to reset your password.
        </div>

        <form name="reset_password_request_form" method="post" class="flex flex-col gap-2">
            {% for flash_error in app.flashes('reset_password_error') %}
                <div class="mb-3 p-2 bg-rose-500 text-black font-semibold rounded-md" role="alert">{{ flash_error }}</div>
            {% endfor %}

            <label for="reset_password_request_form_email" class="required flex flex-col mb-2">
                Email
                <input type="email"
                       class="text-input"
                       id="reset_password_request_form_email"
                       name="reset_password_request_form[email]"
                       required="required" autocomplete="email">
            </label>

            <input type="hidden" id="reset_password_request_form__token" name="reset_password_request_form[_token]" data-controller="csrf-protection" value="csrf-token">

            <button class="submit-button">Send password reset email</button>
        </form>
    </div>
{% endblock %}