{% extends "base.html" %}
{% load static %}

{% block content %}
<style>
    @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
</style>
<section class="min-h-[calc(100vh-72px)] relative overflow-hidden flex items-center justify-center py-12 px-4">
    <!-- Fondo igual al hero de inicio -->
    <div class="absolute inset-0 bg-gradient-to-br from-[#FDF2F5] via-[#FBE8ED] to-[#F5E6D8]"></div>
    <div class="absolute inset-0 bg-[radial-gradient(ellipse_at_20%_20%,rgba(232,51,106,0.05)_0%,transparent_50%),radial-gradient(ellipse_at_85%_75%,rgba(212,175,55,0.04)_0%,transparent_45%)]"></div>
    <!-- Partículas decorativas -->
    <div class="absolute top-[12%] left-[6%] w-3 h-3 rounded-full bg-rosa/20" style="animation:float 6s ease-in-out infinite"></div>
    <div class="absolute top-[20%] right-[10%] w-2 h-2 rounded-full bg-dorado/30" style="animation:float 8s ease-in-out infinite"></div>
    <div class="absolute bottom-[35%] left-[12%] w-4 h-4 rounded-full bg-dorado/15" style="animation:float 6s ease-in-out infinite 2s"></div>
    <div class="absolute top-[55%] right-[7%] w-2.5 h-2.5 rounded-full bg-rosa/15" style="animation:float 8s ease-in-out infinite 1s"></div>

    <div class="relative z-10 w-full max-w-md">
        <!-- Logo -->
        <div class="text-center mb-8">
            <a href="{% url 'home' %}" class="inline-flex items-center gap-3">
                {% if site_config and site_config.favicon %}
                <img src="{{ site_config.favicon.url }}" alt="Logo" class="w-10 h-10 rounded-full object-cover">
                {% else %}
                <img src="{% static 'img/favicon.png' %}" alt="Logo" class="w-10 h-10 rounded-full object-cover">
                {% endif %}
                <div class="text-left">
                    <span class="font-poppins font-bold text-dark text-[15px] leading-tight block">{{ site_config.nombre_completo|default:"Dra. Mariela Moreno Autie" }}</span>
                    <span class="text-gray-400 text-[10px] tracking-[2px] uppercase">{{ site_config.especialidad|default:"Ginecología" }}</span>
                </div>
            </a>
        </div>

        <!-- Card -->
        <div class="bg-white rounded-2xl shadow-lg border border-gray-100 p-8">
            {% if messages %}
            <div class="mb-6 space-y-2">
                {% for message in messages %}
                <div class="flex items-start gap-3 p-3 rounded-xl text-sm
                    {% if message.tags == 'success' %}bg-green-50 text-green-700 border border-green-200
                    {% elif message.tags == 'error' %}bg-red-50 text-red-700 border border-red-200
                    {% elif message.tags == 'warning' %}bg-amber-50 text-amber-700 border border-amber-200
                    {% else %}bg-blue-50 text-blue-700 border border-blue-200{% endif %}">
                    {% if message.tags == 'success' %}
                    <svg class="w-5 h-5 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                    {% elif message.tags == 'error' %}
                    <svg class="w-5 h-5 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                    {% else %}
                    <svg class="w-5 h-5 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                    {% endif %}
                    <span>{{ message }}</span>
                </div>
                {% endfor %}
            </div>
            {% endif %}

            {% block auth_content %}{% endblock %}
        </div>

        {% block auth_footer %}{% endblock %}
    </div>
</section>

<script>
(function() {
    document.querySelectorAll('input[type="password"]').forEach(function(input) {
        var wrapper = input.parentNode;
        wrapper.style.position = 'relative';

        var btn = document.createElement('button');
        btn.type = 'button';
        btn.setAttribute('aria-label', 'Mostrar senha');
        btn.className = 'pwd-toggle';
        btn.style.cssText = 'position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;color:#9CA3AF;display:flex;align-items:center;';

        var eyeOpen = '<svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>';
        var eyeClosed = '<svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.878 9.878L6.59 6.59m7.532 7.532l3.29 3.29M3 3l18 18"/></svg>';

        btn.innerHTML = eyeClosed;
        var visible = false;

        btn.addEventListener('click', function() {
            visible = !visible;
            input.type = visible ? 'text' : 'password';
            btn.innerHTML = visible ? eyeOpen : eyeClosed;
            btn.style.color = visible ? '#E8336A' : '#9CA3AF';
            btn.setAttribute('aria-label', visible ? 'Ocultar senha' : 'Mostrar senha');
        });

        wrapper.appendChild(btn);
        input.style.paddingRight = '44px';
    });
})();
</script>
{% endblock %}