{% extends "base.html" %}

{% block title %}Acceso Seguro - Portal del Docente Guía | Simulador AVANZO 2026{% endblock %}

{% block content %}
<div class="container py-5">
  <div class="row justify-content-center">
    <div class="col-lg-7 col-md-9">

      <!-- ENCABEZADO INSTITUCIONAL -->
      <div class="text-center mb-4">
        <div class="d-inline-flex align-items-center gap-2 px-3 py-1 rounded-pill bg-primary bg-opacity-10 border border-primary border-opacity-25 text-primary mb-3">
          <i class="bi bi-shield-lock-fill text-primary"></i>
          <span class="small fw-bold tracking-wide">ÁREA PROTEGIDA • DOCENTES Y DIRECCIÓN</span>
        </div>
        <h2 class="fw-bold text-dark mb-2">Portal del Docente Guía</h2>
        <p class="text-muted" style="max-width: 550px; margin: 0 auto;">
          Ingresa tu <strong>Clave Maestra Oficial</strong> para acceder al diagnóstico de tu sección, nómina de estudiantes, semáforo curricular y gestión de comisiones.
        </p>
      </div>

      <!-- TARJETA DE LOGIN -->
      <div class="card border-0 shadow-lg rounded-4 overflow-hidden mb-4" style="border-top: 5px solid #1e3a8a !important;">
        <div class="card-header bg-dark text-white p-4 text-center">
          <div class="rounded-circle bg-white text-primary p-3 d-inline-flex align-items-center justify-content-center shadow-sm mb-2" style="width: 60px; height: 60px;">
            <i class="bi bi-person-workspace fs-2 text-primary"></i>
          </div>
          <h4 class="fw-bold mb-1 text-white">Identificación del Docente</h4>
          <small class="text-light opacity-75">MINEDUCYT &bull; República de El Salvador</small>
        </div>

        <div class="card-body p-4 p-md-5 bg-white">
          {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
              {% for category, message in messages %}
                <div class="alert alert-{{ category }} alert-dismissible fade show d-flex align-items-center gap-2" role="alert">
                  <i class="bi bi-exclamation-circle-fill"></i>
                  <div>{{ message }}</div>
                  <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
              {% endfor %}
            {% endif %}
          {% endwith %}

          <form action="/docentes/login" method="POST">
            <div class="mb-4">
              <label class="form-label fw-bold text-dark">Clave Maestra de Docente Guía:</label>
              <div class="input-group input-group-lg">
                <span class="input-group-text bg-light text-primary border-end-0">
                  <i class="bi bi-key-fill"></i>
                </span>
                <input type="text" name="docente_key" class="form-control font-monospace text-uppercase border-start-0 ps-0" placeholder="Ej. DOC-SECCION-XXXX-XXXX" required autofocus autocomplete="off">
              </div>
              <div class="form-text text-muted mt-2">
                <i class="bi bi-info-circle me-1"></i> Clave privada de acceso institucional proporcionada con la sección (inicia con <code>DOC-</code>).
              </div>
            </div>

            <button type="submit" class="btn btn-primary btn-lg w-100 fw-bold shadow py-3 rounded-3 d-flex align-items-center justify-content-center gap-2">
              <i class="bi bi-box-arrow-in-right fs-5"></i> Ingresar a Mi Aula Segura
            </button>
          </form>

          <!-- AVISO DE PRIVACIDAD -->
          <div class="p-3 mt-4 rounded-3 bg-light border text-muted small">
            <div class="d-flex align-items-start gap-2">
              <i class="bi bi-lock-fill text-warning fs-5"></i>
              <div>
                <strong>Privacidad de Datos Protegida:</strong> Por seguridad de los estudiantes y normativa escolar, el acceso a las nóminas, calificaciones individuales, claves de alumnos y saldos de comisiones es estrictamente confidencial y requiere validación de clave.
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- SECCIÓN INFORMATIVA / CÓMO ADQUIRIR CLAVE -->
      <div class="card border-0 shadow-sm rounded-4 p-4 bg-white">
        <div class="row align-items-center g-3">
          <div class="col-md-8">
            <h5 class="fw-bold mb-1 text-dark">¿Aún no tienes clave para tu aula?</h5>
            <p class="text-muted small mb-0">
              Adquiere el <strong>Paquete de Aula ($5.00 USD)</strong> para recibir 35 claves de estudiantes y tu Clave Maestra de Docente Guía con diagnóstico curricular completo.
            </p>
          </div>
          <div class="col-md-4 text-md-end">
            <a href="/comprar" class="btn btn-warning text-dark fw-bold rounded-pill px-4 shadow-sm">
              <i class="bi bi-cart-plus-fill me-1"></i> Adquirir Aula ($5)
            </a>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>
{% endblock %}