<!DOCTYPE html>
<html lang="es" class="{{ 'dark' if tema == 1 else '' }}">
<head>
    <meta charset="UTF-8">
    <title>UTRAU - Control de Terminales</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body class="bg-slate-100 dark:bg-slate-950 text-slate-900 dark:text-slate-100 min-h-screen">
    
    <nav class="bg-slate-900 p-4 flex justify-between items-center text-white">
        <span class="font-black text-blue-500">UTRAU <span class="text-slate-400">| TERMINALES</span></span>
        <a href="{{ url_for('config.panel') }}" class="text-xs font-bold uppercase hover:text-blue-400"><i class="fa-solid fa-arrow-left mr-2"></i>Volver</a>
    </nav>

    <main class="p-6 max-w-5xl mx-auto">
        <h2 class="text-xl font-black uppercase mb-6">Autorización de Dispositivos</h2>
        
        <div class="bg-white dark:bg-slate-900 rounded-2xl border border-slate-200 dark:border-slate-800 shadow-sm overflow-hidden">
            <table class="w-full text-left">
                <tr class="bg-slate-100 dark:bg-slate-800 text-[10px] uppercase text-slate-500">
                    <th class="p-4">Equipo / UUID</th>
                    <th class="p-4">Usuario</th>
                    <th class="p-4 text-center">Estado</th>
                    <th class="p-4 text-right">Acción</th>
                </tr>
                {% for t in terminales %}
                <tr class="border-b dark:border-slate-800">
                    <td class="p-4 text-xs font-mono">{{ t.uuid_terminal[:15] }}...</td>
                    <td class="p-4">
                        <div class="flex items-center space-x-3">
                            {% if t.path_foto %}
                                <img src="{{ t.path_foto }}" class="w-8 h-8 rounded-full object-cover border-2 border-slate-200 dark:border-slate-700">
                            {% elif t.alias %}
                                <div class="w-8 h-8 rounded-full bg-slate-200 dark:bg-slate-800 flex items-center justify-center text-slate-500 font-black border-2 border-slate-300 dark:border-slate-700 text-xs">
                                    {{ t.nombre_completo[0:1] }}
                                </div>
                            {% else %}
                                <div class="w-8 h-8 rounded-full bg-slate-200 dark:bg-slate-800 flex items-center justify-center text-slate-400 border-2 border-slate-300 dark:border-slate-700">
                                    <i class="fa-solid fa-desktop"></i>
                                </div>
                            {% endif %}
                            <span class="font-bold">{{ t.alias or 'Sin asignar' }}</span>
                        </div>
                    </td>
                    <td class="p-4 text-center">
                        <span class="px-2 py-1 rounded text-[10px] font-black uppercase 
                            {% if t.estado == 'CONECTADO' %}bg-emerald-100 text-emerald-700
                            {% elif t.estado == 'PENDIENTE' %}bg-yellow-100 text-yellow-700
                            {% else %}bg-red-100 text-red-700{% endif %}">
                            {{ t.estado }}
                        </span>
                    </td>
                    <td class="p-4 text-right space-x-2">
                        {% if t.estado != 'CONECTADO' %}
                        <a href="{{ url_for('config.accion_terminal', uuid=t.uuid_terminal, accion='autorizar') }}" class="text-emerald-500 hover:text-emerald-400"><i class="fa-solid fa-check"></i></a>
                        {% endif %}
                        {% if t.estado == 'CONECTADO' %}
                        <a href="{{ url_for('config.accion_terminal', uuid=t.uuid_terminal, accion='bloquear') }}" class="text-yellow-500 hover:text-yellow-400"><i class="fa-solid fa-lock"></i></a>
                        {% endif %}
                        <a href="{{ url_for('config.accion_terminal', uuid=t.uuid_terminal, accion='eliminar') }}" class="text-red-500 hover:text-red-400"><i class="fa-solid fa-trash"></i></a>
                    </td>
                </tr>
                {% endfor %}
            </table>
        </div>
    </main>
</body>
</html>