<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{% block title %}Panel{% endblock %} — OpenData II</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Sora:wght@400;600;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="/static/style.css">
  {% block head %}{% endblock %}
</head>
<body>

<nav class="sidebar">
  <div class="sidebar-brand">
    <div class="logo-text">OpenData II</div>
    <div class="logo-sub">Panel de Administración Interna</div>
  </div>

  <div class="sidebar-nav">
    <a href="/panel" class="nav-link {% if active == 'panel' %}active{% endif %}">
      <span class="icon">📊</span> Panel
    </a>

    <div class="nav-section">Análisis</div>
    <a href="/panel/estadisticas" class="nav-link {% if active == 'estadisticas' %}active{% endif %}">
      <span class="icon">📈</span> Estadísticas
    </a>
    <a href="/panel/predicciones" class="nav-link {% if active == 'predicciones' %}active{% endif %}">
      <span class="icon">🤖</span> Predicciones ML/NLP
    </a>
    <a href="/panel/estudiantes" class="nav-link {% if active == 'estudiantes' %}active{% endif %}">
      <span class="icon">👥</span> Estudiantes
    </a>
    <a href="/panel/modelos" class="nav-link {% if active == 'modelos' %}active{% endif %}">
      <span class="icon">🔬</span> Inferencia
    </a>

    <div class="nav-section">Base de Datos</div>
    <a href="/panel/plataforma" class="nav-link {% if active == 'plataforma' %}active{% endif %}">
      <span class="icon">🏫</span> Plataforma
    </a>
  </div>

  <div class="sidebar-footer">
    <div class="user-pill">
      <div class="user-avatar">{{ user.username[0].upper() }}</div>
      <div>
        <div class="user-name">{{ user.nombre or user.username }}</div>
        <div class="user-role">{{ user.rol.nombre }}</div>
      </div>
      <form action="/logout" method="post" style="margin-left:auto">
        <button type="submit" class="logout-btn" title="Cerrar sesión">⎋</button>
      </form>
    </div>
  </div>
</nav>

<main class="workspace">
  <div class="topbar">
    <span class="topbar-title">{% block topbar_title %}Panel{% endblock %}</span>
    {% block topbar_extra %}{% endblock %}
  </div>
  <div class="content">
    {% block content %}{% endblock %}
  </div>
</main>

{% block scripts %}{% endblock %}
</body>
</html>
