{% extends "auth/base_auth.html" %}

{% block title %}Recuperar Senha — Dra. Mariela Moreno Autie{% endblock %}

{% block auth_content %}
<div class="text-center mb-6">
    <div class="w-14 h-14 bg-rosa-bg rounded-full flex items-center justify-center mx-auto mb-4">
        <svg class="w-7 h-7 text-rosa" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"/></svg>
    </div>
    <h1 class="font-poppins font-bold text-dark text-2xl mb-1">Recuperar Senha</h1>
    <p class="text-gray-400 text-sm">Insira o seu email e enviaremos um link</p>
</div>

<form method="post" novalidate>
    {% csrf_token %}

    <div class="mb-6">
        <label for="id_email" class="block text-sm font-medium text-gray-600 mb-1.5">Email</label>
        {{ form.email }}
        {% if form.email.errors %}
        <p class="text-red-500 text-xs mt-1">{{ form.email.errors.0 }}</p>
        {% endif %}
    </div>

    <button type="submit" class="btn-rosa w-full flex items-center justify-center gap-2 px-6 py-3 bg-rosa text-white font-semibold rounded-[25px] shadow-md hover:shadow-lg text-base">
        Enviar Link
    </button>
</form>
{% endblock %}

{% block auth_footer %}
<p class="text-center text-gray-400 text-sm mt-6">
    <a href="{% url 'users:login' %}" class="text-rosa font-medium hover:underline">← Voltar ao Iniciar Sessão</a>
</p>
{% endblock %}