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

{% block title %}Iniciar Sessão — Dra. Mariela Moreno Autie{% endblock %}

{% block auth_content %}
<div class="text-center mb-6">
    <h1 class="font-poppins font-bold text-dark text-2xl mb-1">Iniciar Sessão</h1>
    <p class="text-gray-400 text-sm">Aceda à sua conta</p>
</div>

<form method="post" autocomplete="off" novalidate>
    {% csrf_token %}
    {% if request.GET.next %}
    <input type="hidden" name="next" value="{{ request.GET.next }}">
    {% endif %}

    <!-- Email -->
    <div class="mb-4">
        <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>

    <!-- Contraseña -->
    <div class="mb-4">
        <label for="id_password" class="block text-sm font-medium text-gray-600 mb-1.5">Senha</label>
        {{ form.password }}
        {% if form.password.errors %}
        <p class="text-red-500 text-xs mt-1">{{ form.password.errors.0 }}</p>
        {% endif %}
    </div>

    <!-- Olvidé contraseña -->
    <div class="text-right mb-6">
        <a href="{% url 'users:password_reset' %}" class="text-rosa text-sm hover:underline">Esqueceu a sua senha?</a>
    </div>

    <!-- Submit -->
    <button type="submit" class="btn-dorado w-full flex items-center justify-center gap-2 px-6 py-3 bg-dorado text-white font-semibold rounded-[25px] shadow-md hover:shadow-lg text-base">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"/></svg>
        Iniciar Sessão
    </button>
</form>
<script>
(function() {
    var e = document.getElementById("id_email");
    var p = document.getElementById("id_password");
    if (e) { e.setAttribute("readonly", "readonly"); e.value = ""; }
    if (p) { p.setAttribute("readonly", "readonly"); p.value = ""; }
    setTimeout(function() {
        if (e) { e.value = ""; e.removeAttribute("readonly"); e.focus(); e.blur(); }
        if (p) { p.value = ""; p.removeAttribute("readonly"); }
    }, 500);
})();
</script>
{% endblock %}

{% block auth_footer %}
<p class="text-center text-gray-400 text-sm mt-6">
    Não tem conta?
    <a href="{% url 'users:registro' %}" class="text-rosa font-medium hover:underline">Registe-se aqui</a>
</p>
{% endblock %}