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

{% block title %}Criar Conta — 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">Criar Conta</h1>
    <p class="text-gray-400 text-sm">Registe-se como paciente</p>
</div>

<form method="post" enctype="multipart/form-data" novalidate>
    {% csrf_token %}

    <!-- Foto de perfil -->
    <div class="mb-5">
        <label class="block text-sm font-medium text-gray-600 mb-2">Foto de perfil <span class="text-gray-300">(opcional)</span></label>
        <div class="flex items-center gap-4">
            <div class="relative w-20 h-20 rounded-full bg-gray-100 border-2 border-dashed border-gray-300 flex items-center justify-center overflow-hidden flex-shrink-0" id="preview-container">
                <svg class="w-8 h-8 text-gray-300" id="placeholder-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
                <img id="photo-preview" class="absolute inset-0 w-full h-full object-cover hidden" alt="Preview">
            </div>
            <div class="flex-1">
                <label for="id_foto_perfil" class="cursor-pointer inline-flex items-center gap-2 px-4 py-2.5 bg-white border border-gray-200 rounded-xl text-sm font-medium text-gray-600 hover:border-rosa/40 hover:text-rosa transition-all duration-300">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                    Selecionar foto
                </label>
                <input type="file" id="id_foto_perfil" name="foto_perfil" accept="image/*" class="hidden" onchange="previewPhoto(this)">
                <p class="text-gray-400 text-[11px] mt-1.5">JPG, PNG. Máx 2 MB</p>
            </div>
        </div>
        {% if form.foto_perfil.errors %}
        <p class="text-red-500 text-xs mt-1">{{ form.foto_perfil.errors.0 }}</p>
        {% endif %}
    </div>

    <!-- Nombre + Apellido -->
    <div class="grid grid-cols-2 gap-3 mb-4">
        <div>
            <label for="id_nombre" class="block text-sm font-medium text-gray-600 mb-1.5">Nome</label>
            {{ form.nombre }}
            {% if form.nombre.errors %}
            <p class="text-red-500 text-xs mt-1">{{ form.nombre.errors.0 }}</p>
            {% endif %}
        </div>
        <div>
            <label for="id_apellido" class="block text-sm font-medium text-gray-600 mb-1.5">Apelido</label>
            {{ form.apellido }}
            {% if form.apellido.errors %}
            <p class="text-red-500 text-xs mt-1">{{ form.apellido.errors.0 }}</p>
            {% endif %}
        </div>
    </div>

    <!-- 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>

    <!-- Teléfono -->
    <div class="mb-4">
        <label for="id_telefono" class="block text-sm font-medium text-gray-600 mb-1.5">Telefone <span class="text-gray-300">(opcional)</span></label>
        {{ form.telefono }}
    </div>

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

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

    <!-- Errores no-campo -->
    {% if form.non_field_errors %}
    <div class="mb-4 p-3 bg-red-50 text-red-700 border border-red-200 rounded-xl text-sm">
        {% for error in form.non_field_errors %}
        <p>{{ error }}</p>
        {% endfor %}
    </div>
    {% endif %}

    <!-- Submit -->
    <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">
        <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="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"/></svg>
        Criar Conta
    </button>
</form>
{% endblock %}

{% block auth_footer %}
<p class="text-center text-gray-400 text-sm mt-6">
    Já tem conta?
    <a href="{% url 'users:login' %}" class="text-rosa font-medium hover:underline">Inicie Sessão</a>
</p>
<script>
function previewPhoto(input) {
    var preview = document.getElementById('photo-preview');
    var placeholder = document.getElementById('placeholder-icon');
    var container = document.getElementById('preview-container');
    if (input.files && input.files[0]) {
        if (input.files[0].size > 2 * 1024 * 1024) {
            alert('A imagem não pode exceder 2 MB');
            input.value = '';
            return;
        }
        var reader = new FileReader();
        reader.onload = function(e) {
            preview.src = e.target.result;
            preview.classList.remove('hidden');
            placeholder.classList.add('hidden');
            container.classList.remove('border-dashed', 'border-gray-300');
            container.classList.add('border-solid', 'border-rosa/40');
        };
        reader.readAsDataURL(input.files[0]);
    }
}
</script>
{% endblock %}