<!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 oposición</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">
    <span class="topbar-brand"><i class="fas fa-graduation-cap"></i> TAI – AGE</span>
    <nav class="topbar-nav">
      <a th:href="@{/}" class="active">Inicio</a>
      <a th:href="@{/curso}">Temario</a>
      <a href="/cuestionarios">Cuestionarios</a>
      <a th:href="@{/leyes}">Leyes</a>
      <a th:href="@{/noticias}">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>
    <!-- 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>

  <!-- ── Banner cambios INAP ──────────────────────────────── -->
  <div id="inap-cambio-banner" class="inap-cambio-banner" style="display:none">
    <div class="inap-cambio-inner">
      <i class="fas fa-exclamation-circle"></i>
      <div class="inap-cambio-txt">
        <strong>¡La página de la convocatoria TAI ha cambiado!</strong>
        <span>El INAP ha actualizado la información del proceso selectivo.</span>
      </div>
      <a class="inap-banner-link btn btn-primary" href="#" target="_blank" rel="noopener" style="white-space:nowrap">
        <i class="fas fa-external-link-alt"></i> Ver cambios
      </a>
      <button class="inap-banner-close" onclick="cerrarBannerInap()" aria-label="Cerrar">
        <i class="fas fa-times"></i>
      </button>
    </div>
  </div>

  <script th:src="@{/js/inap-watch.js}"></script>

  <!-- ── Bloques ────────────────────────────────────────── -->
  <section class="bloques-section">
    <h2>Bloques del temario</h2>
    <div class="bloques-grid">

      <article class="bloque-card" onclick="location.href='/curso?bloque=1&tema=1'">
        <div class="bloque-num">Bloque I</div>
        <h3>Organización del Estado y Administración electrónica</h3>
        <p>Constitución, EBEP, igualdad, identidad digital, protección de datos, sede electrónica.</p>
        <ul class="bloque-temas-list">
          <li>T1 – Constitución Española de 1978</li>
          <li>T2 – Cortes Generales y Tribunal Constitucional</li>
          <li>T3 – El Gobierno</li>
          <li>T4 – EBEP, transparencia y ODS</li>
          <li>T5 – Igualdad y discapacidad</li>
          <li>T6 – Sociedad de la información e identidad digital</li>
          <li>T7 – Protección de datos</li>
          <li>T8 – Acceso electrónico a los servicios públicos</li>
          <li>T9 – Sedes e infraestructuras electrónicas</li>
        </ul>
      </article>

      <article class="bloque-card" onclick="location.href='/curso?bloque=2&tema=1'">
        <div class="bloque-num">Bloque II</div>
        <h3>Tecnología básica</h3>
        <p>Hardware, periféricos, estructuras de datos, sistemas operativos, BBDD.</p>
        <ul class="bloque-temas-list">
          <li>T1 – Informática básica y arquitectura</li>
          <li>T2 – Periféricos y almacenamiento</li>
          <li>T3 – Tipos de datos y algoritmos</li>
          <li>T4 – Sistemas operativos</li>
          <li>T5 – Sistemas gestores de BBDD</li>
        </ul>
      </article>

      <article class="bloque-card" onclick="location.href='/curso?bloque=3&tema=1'">
        <div class="bloque-num">Bloque III</div>
        <h3>Desarrollo de sistemas</h3>
        <p>Modelado de datos, SQL, POO, Java EE, web, UML, pruebas y control de versiones.</p>
        <ul class="bloque-temas-list">
          <li>T1 – Modelado y diseño de BBDD</li>
          <li>T2 – Lenguajes de programación</li>
          <li>T3 – SQL y procedimientos almacenados</li>
          <li>T4 – POO y patrones de diseño</li>
          <li>T5 – Java EE / .NET</li>
          <li>T6 – Arquitecturas cliente/servidor y web services</li>
          <li>T7 – Desarrollo web front-end y back-end</li>
          <li>T8 – Accesibilidad y seguridad en desarrollo</li>
          <li>T9 – Repositorios y metodologías</li>
        </ul>
      </article>

      <article class="bloque-card" onclick="location.href='/curso?bloque=4&tema=1'">
        <div class="bloque-num">Bloque IV</div>
        <h3>Sistemas y comunicaciones</h3>
        <p>Administración de SO, BBDD, correo, redes, seguridad, TCP/IP, Internet, VPN.</p>
        <ul class="bloque-temas-list">
          <li>T1 – Administración del SO</li>
          <li>T2 – Administración de BBDD y virtualización</li>
          <li>T3 – Servidores de correo y contenedores</li>
          <li>T4 – Administración de redes de área local</li>
          <li>T5 – Seguridad de sistemas</li>
          <li>T6 – Comunicaciones y redes</li>
          <li>T7 – Modelos TCP/IP y OSI</li>
          <li>T8 – Internet y HTTP/S</li>
          <li>T9 – Seguridad perimetral y VPN</li>
          <li>T10 – Redes locales</li>
        </ul>
      </article>

    </div>
  </section>

  <!-- ── Cuestionarios banner ───────────────────────────── -->
  <section class="quiz-card">
    <div class="quiz-banner">
      <div class="quiz-banner-icon"><i class="fas fa-file-alt" style="color:var(--accent)"></i></div>
      <div>
        <h3>Exámenes reales TAI (2019 – 2024)</h3>
        <p>Practica con preguntas de convocatorias anteriores: TAI 2019, TAI 2023, TAI 2024 A y B.</p>
      </div>
      <a href="/cuestionarios" class="btn btn-primary">
        <i class="fas fa-play"></i> Practicar ahora
      </a>
    </div>
  </section>

</body>
</html>
