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

{% block title %}Mi Perfil | Gades Manager{% endblock title %}

{% block content %}
<div class="row mb-3 flex-shrink-0">
    <div class="col-12">
        <div class="bg-dark text-white p-3 rounded-3 shadow-sm" style="border-left: 5px solid #0d6efd;">
            <h1 class="display-6 fw-bold mb-1">Mi Perfil</h1>
            <p class="text-white-50 mb-0">Consulta y edita tus datos personales.</p>
        </div>
    </div>
</div>

<div class="row g-4" style="overflow-y: auto;">

    {% if messages %}
        <div class="col-12">
            {% for message in messages %}
                <div class="alert alert-success py-2 small mb-0">{{ message }}</div>
            {% endfor %}
        </div>
    {% endif %}

    <div class="col-12 col-lg-6">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-body p-4">
                <h5 class="card-title fw-bold mb-3">Datos Personales</h5>

                <div class="row g-2 mb-3">
                    <div class="col-6">
                        <label class="form-label small text-secondary mb-1">Rol en el equipo</label>
                        <input type="text" class="form-control" value="{{ user.get_rol_display }}" disabled>
                    </div>
                    <div class="col-6">
                        <label class="form-label small text-secondary mb-1">Área técnica</label>
                        <input type="text" class="form-control" value="{{ user.get_especialidad_display|default:'—' }}" disabled>
                    </div>
                </div>

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

                    <div class="mb-3">
                        <label for="{{ perfil_form.username.id_for_label }}" class="form-label fw-semibold">{{ perfil_form.username.label }}</label>
                        {{ perfil_form.username }}
                        {% for error in perfil_form.username.errors %}
                            <div class="text-danger small mt-1">{{ error }}</div>
                        {% endfor %}
                    </div>

                    <div class="row g-2">
                        <div class="col-6 mb-3">
                            <label for="{{ perfil_form.first_name.id_for_label }}" class="form-label fw-semibold">{{ perfil_form.first_name.label }}</label>
                            {{ perfil_form.first_name }}
                        </div>
                        <div class="col-6 mb-3">
                            <label for="{{ perfil_form.last_name.id_for_label }}" class="form-label fw-semibold">{{ perfil_form.last_name.label }}</label>
                            {{ perfil_form.last_name }}
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="{{ perfil_form.email.id_for_label }}" class="form-label fw-semibold">{{ perfil_form.email.label }}</label>
                        {{ perfil_form.email }}
                        {% for error in perfil_form.email.errors %}
                            <div class="text-danger small mt-1">{{ error }}</div>
                        {% endfor %}
                    </div>

                    <button type="submit" name="guardar_perfil" class="btn btn-primary fw-bold px-4">Guardar Cambios</button>
                </form>
            </div>
        </div>
    </div>

    <div class="col-12 col-lg-6">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-body p-4">
                <h5 class="card-title fw-bold mb-3">Cambiar Contraseña</h5>

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

                    <div class="mb-3">
                        <label for="{{ password_form.old_password.id_for_label }}" class="form-label fw-semibold">Contraseña actual</label>
                        <input type="password" name="{{ password_form.old_password.html_name }}" id="{{ password_form.old_password.id_for_label }}" class="form-control">
                        {% for error in password_form.old_password.errors %}
                            <div class="text-danger small mt-1">{{ error }}</div>
                        {% endfor %}
                    </div>

                    <div class="mb-3">
                        <label for="{{ password_form.new_password1.id_for_label }}" class="form-label fw-semibold">Nueva contraseña</label>
                        <input type="password" name="{{ password_form.new_password1.html_name }}" id="{{ password_form.new_password1.id_for_label }}" class="form-control">
                        {% for error in password_form.new_password1.errors %}
                            <div class="text-danger small mt-1">{{ error }}</div>
                        {% endfor %}
                    </div>

                    <div class="mb-3">
                        <label for="{{ password_form.new_password2.id_for_label }}" class="form-label fw-semibold">Confirmar nueva contraseña</label>
                        <input type="password" name="{{ password_form.new_password2.html_name }}" id="{{ password_form.new_password2.id_for_label }}" class="form-control">
                        {% for error in password_form.new_password2.errors %}
                            <div class="text-danger small mt-1">{{ error }}</div>
                        {% endfor %}
                    </div>

                    {% if password_form.non_field_errors %}
                        <div class="text-danger small mb-3">{{ password_form.non_field_errors }}</div>
                    {% endif %}

                    <button type="submit" name="cambiar_password" class="btn btn-outline-danger fw-bold px-4">Cambiar Contraseña</button>
                </form>
            </div>
        </div>
    </div>

</div>
{% endblock content %}