{% extends "base.html" %}
{% block title %}Estudiantes{% endblock %}
{% block topbar_title %}Estudiantes{% endblock %}
{% block topbar_extra %}
<span class="topbar-sub">{{ total }} registros</span>
{% endblock %}

{% block content %}

<!-- Filters -->
<form method="get" action="/panel/estudiantes">
  <div class="filter-bar">
    <div class="form-group">
      <label class="form-label">País</label>
      <select name="country" class="form-control">
        <option value="">Todos</option>
        {% for c in countries %}
        <option value="{{ c }}" {% if filters.country == c %}selected{% endif %}>{{ c }}</option>
        {% endfor %}
      </select>
    </div>
    <div class="form-group">
      <label class="form-label">Curso</label>
      <select name="course" class="form-control">
        <option value="">Todos</option>
        {% for c in courses %}
        <option value="{{ c }}" {% if filters.course == c %}selected{% endif %}>{{ c }}</option>
        {% endfor %}
      </select>
    </div>
    <div class="form-group">
      <label class="form-label">Género</label>
      <select name="gender" class="form-control">
        <option value="">Todos</option>
        <option value="F" {% if filters.gender == 'F' %}selected{% endif %}>Femenino</option>
        <option value="M" {% if filters.gender == 'M' %}selected{% endif %}>Masculino</option>
      </select>
    </div>
    <div class="form-group">
      <label class="form-label">Nivel de Apoyo</label>
      <select name="support_level" class="form-control">
        <option value="">Todos</option>
        <option value="Low"    {% if filters.support_level == 'Low'    %}selected{% endif %}>Low</option>
        <option value="Medium" {% if filters.support_level == 'Medium' %}selected{% endif %}>Medium</option>
        <option value="High"   {% if filters.support_level == 'High'   %}selected{% endif %}>High</option>
      </select>
    </div>
    <div style="display:flex;gap:8px;align-items:flex-end">
      <button type="submit" class="btn btn-primary">Filtrar</button>
      <a href="/panel/estudiantes" class="btn btn-secondary">✕ Limpiar</a>
    </div>
  </div>
</form>

<!-- Table -->
<div class="card">
  <div class="card-header">
    <div class="card-title">Lista de estudiantes</div>
    <span class="card-sub">Clic en un estudiante para ver su perfil completo</span>
  </div>

  {% if rows %}
  <div class="table-wrap">
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Género</th>
          <th>Edad</th>
          <th>País</th>
          <th>Curso</th>
          <th>Apoyo</th>
          <th>Promedio Final</th>
          <th>Tendencia</th>
          <th>Aprobación %</th>
        </tr>
      </thead>
      <tbody>
        {% for row in rows %}
        <tr class="clickable" onclick="window.location='/panel/estudiantes/{{ row.student_id }}'">
          <td style="font-weight:700;color:var(--teal)">{{ row.student_id }}</td>
          <td>{{ row.gender }}</td>
          <td>{{ row.age }}</td>
          <td>{{ row.country }}</td>
          <td>{{ row.course }}</td>
          <td>
            {% if row.support_level == 'High' %}
              <span class="badge badge-rose">High</span>
            {% elif row.support_level == 'Medium' %}
              <span class="badge badge-amber">Medium</span>
            {% else %}
              <span class="badge badge-ok">Low</span>
            {% endif %}
          </td>
          <td style="font-weight:700">{{ "%.1f"|format(row.avg_final) }}</td>
          <td>
            {% if row.grade_tendency == 'Uptrend' %}
              <span class="badge badge-ok">⬆ Uptrend</span>
            {% elif row.grade_tendency == 'Downtrend' %}
              <span class="badge badge-rose">⬇ Downtrend</span>
            {% else %}
              <span class="badge badge-muted">→ Stable</span>
            {% endif %}
          </td>
          <td>
            {% set pct = row.passed_rate_percent %}
            <div style="display:flex;align-items:center;gap:8px">
              <div class="progress" style="flex:1;min-width:60px">
                <div class="progress-fill" style="width:{{ pct }}%"></div>
              </div>
              <span style="font-size:0.78rem;color:var(--muted);min-width:38px">{{ "%.0f"|format(pct) }}%</span>
            </div>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  <div class="pagination">
    <span class="page-info">{{ total }} estudiantes · página {{ page }} de {{ total_pages }}</span>
    {% if page > 1 %}
    <a href="/panel/estudiantes?country={{ filters.country }}&course={{ filters.course }}&gender={{ filters.gender }}&support_level={{ filters.support_level }}&page={{ page-1 }}" class="page-btn">‹</a>
    {% endif %}
    {% for p in range([1, page-2]|max, [total_pages+1, page+3]|min) %}
    <a href="/panel/estudiantes?country={{ filters.country }}&course={{ filters.course }}&gender={{ filters.gender }}&support_level={{ filters.support_level }}&page={{ p }}"
       class="page-btn {% if p == page %}active{% endif %}">{{ p }}</a>
    {% endfor %}
    {% if page < total_pages %}
    <a href="/panel/estudiantes?country={{ filters.country }}&course={{ filters.course }}&gender={{ filters.gender }}&support_level={{ filters.support_level }}&page={{ page+1 }}" class="page-btn">›</a>
    {% endif %}
  </div>
  {% else %}
  <div class="alert alert-info">No hay estudiantes que coincidan con los filtros.</div>
  {% endif %}
</div>
{% endblock %}