<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security" lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>TAI – AGE | Temario</title>
  <link rel="stylesheet" th:href="@{/css/style.css}">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>

  <!-- ── Topbar ─────────────────────────────────────────── -->
  <nav class="topbar">
    <button class="menu-toggle" id="menu-toggle" aria-label="Menú">
      <i class="fas fa-bars"></i>
    </button>
    <a th:href="@{/}" class="topbar-brand" style="text-decoration:none">
      <i class="fas fa-graduation-cap"></i> TAI – AGE
    </a>
    <nav class="topbar-nav">
      <a th:href="@{/}">Inicio</a>
      <a th:href="@{/curso}" class="active">Temario</a>
      <a href="/cuestionarios">Cuestionarios</a>
      <a th:href="@{/leyes}">Leyes</a>
      <a th:href="@{/noticias}"><i class="fas fa-bell"></i> Noticias</a>
      <a sec:authorize="hasAnyRole('PAGADO','ADMIN')" th:href="@{/planning}">Planning</a>
      <a sec:authorize="hasAnyRole('PAGADO','ADMIN')" th:href="@{/flashcards.html}">Flashcards</a>
    </nav>
    <span class="topbar-progress" id="topbar-progress">1 / 33</span>
    <!-- Usuario / sesión -->
    <div class="topbar-user">
      <span sec:authorize="isAuthenticated()" class="user-email" sec:authentication="principal.username"></span>
      <a sec:authorize="hasRole('ADMIN')" th:href="@{/admin/usuarios}" class="btn-login" style="margin-right:.5rem">Admin</a>
      <form sec:authorize="isAuthenticated()" th:action="@{/logout}" method="post" style="margin:0">
        <button type="submit" class="btn-logout">Salir</button>
      </form>
      <a sec:authorize="!isAuthenticated()" th:href="@{/login}" class="btn-login">Entrar</a>
    </div>
  </nav>

  <!-- ── Layout ─────────────────────────────────────────── -->
  <div class="player-layout">

    <!-- Sidebar -->
    <aside class="sidebar" id="sidebar">
      <!-- Rellena js/curso.js -->
    </aside>

    <!-- Content -->
    <main class="content-pane">
      <div id="lesson-content">
        <div class="spinner"><i class="fas fa-circle-notch fa-spin"></i></div>
      </div>
    </main>

  </div>

  <!-- ── Scripts ────────────────────────────────────────── -->
  <!-- marked.js para renderizar Markdown en el cliente -->
  <script src="https://cdn.jsdelivr.net/npm/marked@12/marked.min.js"></script>
  <script th:src="@{/js/temas.js}"></script>
  <script th:src="@{/js/curso.js}"></script>

</body>
</html>
