{% extends "base.html" %}

{% block title %}Dashboard - EMI{% endblock %}

{% block content %}
<!-- Extraemos los códigos de permiso del usuario para facilitar la comprobación -->
{% set user_perms = user.rol.permisos | map(attribute='codigo') | list %}
{% set is_root = user.rol.nombre == 'root' %}

<div class="mb-6">
    <h2 class="text-xl font-bold text-white">Panel de Gestión</h2>
    <p class="text-slate-400 text-sm">Bienvenido, {{ user.username }}</p>
</div>

<div class="grid grid-cols-2 sm:grid-cols-3 gap-4">

    <!-- 1. Áreas -->
    {% if is_root or 'areas.view' in user_perms %}
    <a href="{{ prefix }}/areas"
        class="bg-slate-800 p-6 rounded-2xl border border-slate-700 flex flex-col items-center gap-3 active:scale-95 transition-all">
        <div class="w-12 h-12 bg-blue-500/20 rounded-full flex items-center justify-center">
            <i class="la la-map-marker text-2xl text-blue-400"></i>
        </div>
        <span class="text-[10px] font-bold uppercase tracking-wider text-center">Áreas</span>
    </a>
    {% endif %}

    <!-- 2. Salones -->
    {% if is_root or 'salones.view' in user_perms %}
    <a href="{{ prefix }}/salones"
        class="bg-slate-800 p-6 rounded-2xl border border-slate-700 flex flex-col items-center gap-3 active:scale-95 transition-all">
        <div class="w-12 h-12 bg-sky-500/20 rounded-full flex items-center justify-center">
            <i class="la la-door-open text-2xl text-sky-400"></i>
        </div>
        <span class="text-[10px] font-bold uppercase tracking-wider text-center">Salones</span>
    </a>
    {% endif %}

    <!-- 3. Aulas -->
    {% if is_root or 'aulas.view' in user_perms %}
    <a href="{{ prefix }}/aulas"
        class="bg-slate-800 p-6 rounded-2xl border border-slate-700 flex flex-col items-center gap-3 active:scale-95 transition-all">
        <div class="w-12 h-12 bg-orange-500/20 rounded-full flex items-center justify-center">
            <i class="la la-users text-2xl text-orange-400"></i>
        </div>
        <span class="text-[10px] font-bold uppercase tracking-wider text-center">Aulas</span>
    </a>
    {% endif %}

    <!-- 4. Donaciones -->
    {% if is_root or 'donaciones.view' in user_perms %}
    <a href="{{ prefix }}/donaciones"
        class="bg-slate-800 p-6 rounded-2xl border border-slate-700 flex flex-col items-center gap-3 active:scale-95 transition-all">
        <div class="w-12 h-12 bg-emerald-500/20 rounded-full flex items-center justify-center">
            <i class="la la-hand-holding-heart text-2xl text-emerald-400"></i>
        </div>
        <span class="text-[10px] font-bold uppercase tracking-wider text-center leading-tight">Donaciones</span>
    </a>
    {% endif %}

    <!-- 5. Alimentos Preparados -->
    {% if is_root or 'preparados.view' in user_perms %}
    <a href="{{ prefix }}/preparados"
        class="bg-slate-800 p-6 rounded-2xl border border-slate-700 flex flex-col items-center gap-3 active:scale-95 transition-all">
        <div class="w-12 h-12 bg-amber-500/20 rounded-full flex items-center justify-center">
            <i class="la la-utensils text-2xl text-amber-400"></i>
        </div>
        <span class="text-[10px] font-bold uppercase tracking-wider text-center leading-tight">Alimentos
            Preparados</span>
    </a>
    {% endif %}

    <!-- 6. Distribución -->
    {% if is_root or 'distribuciones.view' in user_perms %}
    <a href="{{ prefix }}/distribuciones"
        class="bg-slate-800 p-6 rounded-2xl border border-slate-700 flex flex-col items-center gap-3 active:scale-95 transition-all">
        <div class="w-12 h-12 bg-purple-500/20 rounded-full flex items-center justify-center">
            <i class="la la-exchange-alt text-2xl text-purple-400"></i>
        </div>
        <span class="text-[10px] font-bold uppercase tracking-wider text-center leading-tight">Distribución</span>
    </a>
    {% endif %}

    <!-- 7. Recepción -->
    {% if is_root or 'recepcion.view' in user_perms %}
    <a href="{{ prefix }}/recepciones"
        class="bg-slate-800 p-6 rounded-2xl border border-slate-700 flex flex-col items-center gap-3 active:scale-95 transition-all">
        <div class="w-12 h-12 bg-teal-500/20 rounded-full flex items-center justify-center">
            <i class="la la-concierge-bell text-2xl text-teal-400"></i>
        </div>
        <span class="text-[10px] font-bold uppercase tracking-wider text-center">Recepción</span>
    </a>
    {% endif %}

    <!-- 8. Enseñanza -->
    {% if is_root or 'ensenanza.view' in user_perms %}
    <a href="{{ prefix }}/ensenanza"
        class="bg-slate-800 p-6 rounded-2xl border border-slate-700 flex flex-col items-center gap-3 active:scale-95 transition-all">
        <div class="w-12 h-12 bg-lime-500/20 rounded-full flex items-center justify-center">
            <i class="la la-book-open text-2xl text-lime-400"></i>
        </div>
        <span class="text-[10px] font-bold uppercase tracking-wider text-center">Enseñanza</span>
    </a>
    {% endif %}

    <!-- 9. Logística -->
    {% if is_root or 'logistica.view' in user_perms %}
    <a href="{{ prefix }}/logistica"
        class="bg-slate-800 p-6 rounded-2xl border border-slate-700 flex flex-col items-center gap-3 active:scale-95 transition-all">
        <div class="w-12 h-12 bg-yellow-500/20 rounded-full flex items-center justify-center">
            <i class="la la-truck text-2xl text-yellow-400"></i>
        </div>
        <span class="text-[10px] font-bold uppercase tracking-wider text-center">Logística</span>
    </a>
    {% endif %}

    <!-- 10. Otras Áreas -->
    {% if is_root or 'otras_areas.view' in user_perms %}
    <a href="{{ prefix }}/otras_areas"
        class="bg-slate-800 p-6 rounded-2xl border border-slate-700 flex flex-col items-center gap-3 active:scale-95 transition-all">
        <div class="w-12 h-12 bg-rose-500/20 rounded-full flex items-center justify-center">
            <i class="la la-shapes text-2xl text-rose-400"></i>
        </div>
        <span class="text-[10px] font-bold uppercase tracking-wider text-center">Otras Áreas</span>
    </a>
    {% endif %}

    <!-- 11. Pastores -->
    {% if is_root or user.rol.nombre == 'administrador' %}
    <a href="{{ prefix }}/pastores"
        class="bg-slate-800 p-6 rounded-2xl border border-slate-700 flex flex-col items-center gap-3 active:scale-95 transition-all">
        <div class="w-12 h-12 bg-violet-500/20 rounded-full flex items-center justify-center">
            <i class="la la-church text-2xl text-violet-400"></i>
        </div>
        <span class="text-[10px] font-bold uppercase tracking-wider text-center">Pastores</span>
    </a>
    {% endif %}

    <!-- 12. Líderes -->
    {% if is_root or user.rol.nombre == 'administrador' %}
    <a href="{{ prefix }}/lideres"
        class="bg-slate-800 p-6 rounded-2xl border border-slate-700 flex flex-col items-center gap-3 active:scale-95 transition-all">
        <div class="w-12 h-12 bg-cyan-500/20 rounded-full flex items-center justify-center">
            <i class="la la-user-tie text-2xl text-cyan-400"></i>
        </div>
        <span class="text-[10px] font-bold uppercase tracking-wider text-center">Líderes</span>
    </a>
    {% endif %}

    <!-- 13. Coordinadores -->
    {% if is_root or user.rol.nombre == 'administrador' %}
    <a href="{{ prefix }}/coordinadores"
        class="bg-slate-800 p-6 rounded-2xl border border-slate-700 flex flex-col items-center gap-3 active:scale-95 transition-all">
        <div class="w-12 h-12 bg-fuchsia-500/20 rounded-full flex items-center justify-center">
            <i class="la la-user-check text-2xl text-fuchsia-400"></i>
        </div>
        <span class="text-[10px] font-bold uppercase tracking-wider text-center">Coordinadores</span>
    </a>
    {% endif %}

    <!-- 14. Capitanes -->
    {% if is_root or user.rol.nombre == 'administrador' %}
    <a href="{{ prefix }}/capitanes"
        class="bg-slate-800 p-6 rounded-2xl border border-slate-700 flex flex-col items-center gap-3 active:scale-95 transition-all">
        <div class="w-12 h-12 bg-pink-500/20 rounded-full flex items-center justify-center">
            <i class="la la-anchor text-2xl text-pink-400"></i>
        </div>
        <span class="text-[10px] font-bold uppercase tracking-wider text-center">Capitanes</span>
    </a>
    {% endif %}

    <!-- 15. Servidores -->
    {% if is_root or 'servidores.view' in user_perms %}
    <a href="{{ prefix }}/servidores"
        class="bg-slate-800 p-6 rounded-2xl border border-slate-700 flex flex-col items-center gap-3 active:scale-95 transition-all">
        <div class="w-12 h-12 bg-purple-500/20 rounded-full flex items-center justify-center">
            <i class="la la-id-badge text-2xl text-purple-400"></i>
        </div>
        <span class="text-[10px] font-bold uppercase tracking-wider text-center leading-tight">Servidores</span>
    </a>
    {% endif %}

    <!-- 16. Docentes -->
    {% if is_root or user.rol.nombre == 'administrador' %}
    <a href="{{ prefix }}/docentes"
        class="bg-slate-800 p-6 rounded-2xl border border-slate-700 flex flex-col items-center gap-3 active:scale-95 transition-all">
        <div class="w-12 h-12 bg-emerald-500/20 rounded-full flex items-center justify-center">
            <i class="la la-chalkboard-teacher text-2xl text-emerald-400"></i>
        </div>
        <span class="text-[10px] font-bold uppercase tracking-wider text-center leading-tight">Docentes</span>
    </a>
    {% endif %}

    <!-- 17. Auxiliares -->
    {% if is_root or user.rol.nombre == 'administrador' %}
    <a href="{{ prefix }}/auxiliares"
        class="bg-slate-800 p-6 rounded-2xl border border-slate-700 flex flex-col items-center gap-3 active:scale-95 transition-all">
        <div class="w-12 h-12 bg-orange-500/20 rounded-full flex items-center justify-center">
            <i class="la la-user-tag text-2xl text-orange-400"></i>
        </div>
        <span class="text-[10px] font-bold uppercase tracking-wider text-center leading-tight">Auxiliares</span>
    </a>
    {% endif %}

    <!-- 18. Colaboradores -->
    {% if is_root or user.rol.nombre == 'administrador' %}
    <a href="{{ prefix }}/colaboradores"
        class="bg-slate-800 p-6 rounded-2xl border border-slate-700 flex flex-col items-center gap-3 active:scale-95 transition-all">
        <div class="w-12 h-12 bg-blue-500/20 rounded-full flex items-center justify-center">
            <i class="la la-user-friends text-2xl text-blue-400"></i>
        </div>
        <span class="text-[10px] font-bold uppercase tracking-wider text-center leading-tight">Colaboradores</span>
    </a>
    {% endif %}

    <!-- 19. Análisis de Datos -->
    {% if is_root %}
    <a href="{{ prefix }}/analisis"
        class="bg-slate-800 p-6 rounded-2xl border border-blue-500/30 flex flex-col items-center gap-3 active:scale-95 transition-all hover:bg-slate-700">
        <div class="w-12 h-12 bg-blue-500/20 rounded-full flex items-center justify-center">
            <i class="la la-chart-bar text-2xl text-blue-400"></i>
        </div>
        <span class="text-[10px] font-bold uppercase tracking-wider text-center">Análisis Estadístico</span>
    </a>
    {% endif %}

    <!-- 20. Reporte Estadístico -->
    {% if is_root or 'reporte.view' in user_perms %}
    <a href="{{ prefix }}/reportes"
        class="bg-slate-800 p-6 rounded-2xl border border-slate-700 flex flex-col items-center gap-3 active:scale-95 transition-all">
        <div class="w-12 h-12 bg-indigo-500/20 rounded-full flex items-center justify-center">
            <i class="la la-file-pdf text-2xl text-indigo-400"></i>
        </div>
        <span class="text-[10px] font-bold uppercase tracking-wider text-center">Reporte Estadístico</span>
    </a>
    {% endif %}

    <!-- 21. Ayuda -->
    {% if is_root or 'ayuda.view' in user_perms %} {# Enlace a la vista de ayuda #}
    <a href="{{ prefix }}/ayuda"
        class="bg-slate-800 p-6 rounded-2xl border border-slate-700 flex flex-col items-center gap-3 active:scale-95 transition-all">
        <div class="w-12 h-12 bg-slate-500/20 rounded-full flex items-center justify-center">
            <i class="la la-question-circle text-2xl text-slate-400"></i>
        </div>
        <span class="text-[10px] font-bold uppercase tracking-wider text-center">Ayuda</span>
    </a>
    {% endif %}

</div>
{% endblock %}