{% extends "base.html" %}
{% block title %}{{ student.student_id }}{% endblock %}
{% block topbar_title %}Perfil de Estudiante{% endblock %}
{% block topbar_extra %}
<span class="topbar-sub">{{ student.student_id }}</span>
<span class="topbar-spacer"></span>
<a href="/panel/estudiantes" class="btn btn-secondary btn-sm">← Volver</a>
{% endblock %}

{% block content %}

<!-- Student info -->
<div class="card" style="margin-bottom:18px">
  <div class="card-header">
    <div>
      <div class="card-title">{{ student.student_id }}</div>
      <div class="card-sub">{{ student.school_name }} · {{ student.city }}, {{ student.country }}</div>
    </div>
    <div style="display:flex;gap:8px;flex-wrap:wrap">
      {% if student.support_level == 'High' %}
        <span class="badge badge-rose">Apoyo {{ student.support_level }}</span>
      {% elif student.support_level == 'Medium' %}
        <span class="badge badge-amber">Apoyo {{ student.support_level }}</span>
      {% else %}
        <span class="badge badge-ok">Apoyo {{ student.support_level }}</span>
      {% endif %}
      {% if student.grade_tendency == 'Uptrend' %}
        <span class="badge badge-ok">⬆ Uptrend</span>
      {% elif student.grade_tendency == 'Downtrend' %}
        <span class="badge badge-rose">⬇ Downtrend</span>
      {% else %}
        <span class="badge badge-muted">→ Stable</span>
      {% endif %}
    </div>
  </div>

  <div class="detail-grid">
    <div class="detail-item"><label>Género</label><span>{{ student.gender }}</span></div>
    <div class="detail-item"><label>Edad</label><span>{{ student.age }}</span></div>
    <div class="detail-item"><label>Curso</label><span>{{ student.course }}</span></div>
    <div class="detail-item"><label>Año Académico</label><span>{{ student.academic_year }}</span></div>
    <div class="detail-item"><label>Grupo</label><span>{{ student.class_group }}</span></div>
    <div class="detail-item"><label>Tutor</label><span>{{ student.homeroom_teacher }}</span></div>
    <div class="detail-item"><label>Ausencias</label><span>{{ student.attendance_absences_total }}</span></div>
    <div class="detail-item"><label>Promedio Final</label><span style="color:var(--teal);font-weight:700">{{ student.avg_final }}</span></div>
    <div class="detail-item"><label>Asig. Aprobadas</label><span>{{ student.passed_subjects }} / {{ student.total_subjects }}</span></div>
    <div class="detail-item"><label>% Aprobación</label><span>{{ "%.1f"|format(student.passed_rate_percent) }}%</span></div>
    <div class="detail-item"><label>Notas (min/max)</label><span>{{ student.min_grade }} / {{ student.max_grade }}</span></div>
    <div class="detail-item"><label>Notas</label><span style="font-size:0.78rem">{{ student.notes }}</span></div>
  </div>
</div>

<!-- Grades + Predictions -->
<div class="grid-2" style="gap:18px">

  <!-- Subject grades -->
  <div class="card">
    <div class="card-header">
      <div class="card-title">Notas por asignatura</div>
      <div class="card-sub">{{ grades|length }} asignaturas</div>
    </div>
    {% if grades %}
    <div class="table-wrap">
      <table>
        <thead>
          <tr><th>Asignatura</th><th>Nota Final</th><th>Estado</th></tr>
        </thead>
        <tbody>
          {% for g in grades %}
          <tr>
            <td>{{ g.subject }}</td>
            <td style="font-weight:700">{{ g.final }}</td>
            <td>
              {% if g.status == 'Pass' %}
                <span class="badge badge-ok">Pass</span>
              {% elif g.status == 'Fail' %}
                <span class="badge badge-rose">Fail</span>
              {% else %}
                <span class="badge badge-muted">—</span>
              {% endif %}
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    {% else %}
    <div class="alert alert-info">No hay datos de asignaturas.</div>
    {% endif %}
  </div>

  <!-- Predictions -->
  <div class="card">
    <div class="card-header">
      <div class="card-title">Predicciones ML / NLP</div>
      <div class="card-sub">Resultados de todos los modelos</div>
    </div>
    {% if predictions %}
      {% for label, pred in predictions.items() %}
      <div style="margin-bottom:14px;padding:14px;background:var(--bg-soft);border-radius:var(--radius-sm)">
        <div style="font-size:0.75rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:8px">{{ label }}</div>
        {% for k, v in pred.items() %}
        {% if k != 'student_id' %}
        <div style="display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid var(--line);font-size:0.82rem">
          <span style="color:var(--muted)">{{ k }}</span>
          <span style="font-weight:600">{{ v }}</span>
        </div>
        {% endif %}
        {% endfor %}
      </div>
      {% endfor %}
    {% else %}
    <div class="alert alert-info">No hay predicciones disponibles para este estudiante.</div>
    {% endif %}
  </div>
</div>
{% endblock %}