{% extends "base.html" %}
{% block title %}Plataforma{% endblock %}
{% block topbar_title %}Plataforma de Usuarios{% endblock %}
{% block topbar_extra %}
{% if summary %}
<span class="topbar-sub">{{ summary.total_users }} usuarios · {{ summary.total_courses }} cursos</span>
{% endif %}
{% endblock %}

{% block content %}

{% if platform_error %}
<div class="alert alert-error">{{ platform_error }}</div>
{% endif %}

{% if summary %}
<!-- KPIs -->
<div class="kpi-grid" style="margin-bottom:20px">
  <div class="kpi-card teal">
    <div class="kpi-label">Usuarios Totales</div>
    <div class="kpi-value">{{ summary.total_users }}</div>
    <div class="kpi-note">{{ summary.active_users }} activos</div>
  </div>
  <div class="kpi-card blue">
    <div class="kpi-label">Alumnos</div>
    <div class="kpi-value">{{ summary.total_students }}</div>
  </div>
  <div class="kpi-card ok">
    <div class="kpi-label">Profesores</div>
    <div class="kpi-value">{{ summary.total_teachers }}</div>
  </div>
  <div class="kpi-card amber">
    <div class="kpi-label">Cursos</div>
    <div class="kpi-value">{{ summary.total_courses }}</div>
  </div>
  <div class="kpi-card rose">
    <div class="kpi-label">Matrículas</div>
    <div class="kpi-value">{{ summary.total_enrollments }}</div>
  </div>
</div>
{% endif %}

<!-- Tabs -->
<div class="tabs">
  <a href="/panel/plataforma?tab=resumen"   class="tab-btn {% if tab == 'resumen'   %}active{% endif %}">Resumen</a>
  <a href="/panel/plataforma?tab=usuarios"  class="tab-btn {% if tab == 'usuarios'  %}active{% endif %}">Usuarios</a>
  <a href="/panel/plataforma?tab=alumnos"   class="tab-btn {% if tab == 'alumnos'   %}active{% endif %}">Alumnos</a>
  <a href="/panel/plataforma?tab=profesores"class="tab-btn {% if tab == 'profesores'}active{% endif %}">Profesores</a>
  <a href="/panel/plataforma?tab=cursos"    class="tab-btn {% if tab == 'cursos'    %}active{% endif %}">Cursos</a>
</div>

{% if tab == 'resumen' and summary %}
<div class="card">
  <div class="card-header"><div class="card-title">Resumen de la plataforma</div></div>
  <div class="detail-grid">
    <div class="detail-item"><label>Usuarios totales</label><span>{{ summary.total_users }}</span></div>
    <div class="detail-item"><label>Usuarios activos</label><span>{{ summary.active_users }}</span></div>
    <div class="detail-item"><label>Alumnos</label><span>{{ summary.total_students }}</span></div>
    <div class="detail-item"><label>Profesores</label><span>{{ summary.total_teachers }}</span></div>
    <div class="detail-item"><label>Cursos</label><span>{{ summary.total_courses }}</span></div>
    <div class="detail-item"><label>Matrículas</label><span>{{ summary.total_enrollments }}</span></div>
    <div class="detail-item"><label>Actividades</label><span>{{ summary.total_activities }}</span></div>
    <div class="detail-item"><label>Entregas</label><span>{{ summary.total_submissions }}</span></div>
  </div>
</div>

{% else %}
<!-- Data table -->
<div class="card">
  <div class="card-header">
    <div class="card-title">
      {% if tab == 'usuarios' %}Usuarios
      {% elif tab == 'alumnos' %}Alumnos
      {% elif tab == 'profesores' %}Profesores
      {% elif tab == 'cursos' %}Cursos
      {% endif %}
    </div>
    <span class="card-sub">{{ total }} registros</span>
  </div>

  {% if items %}
  <div class="table-wrap">
    <table>
      <thead>
        <tr>{% for col in columns %}<th>{{ col }}</th>{% endfor %}</tr>
      </thead>
      <tbody>
        {% for item in items %}
        <tr>{% for col in columns %}<td>{{ item[col] }}</td>{% endfor %}</tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  <div class="pagination">
    <span class="page-info">{{ total }} registros · página {{ page }} de {{ total_pages }}</span>
    {% if page > 1 %}
    <a href="/panel/plataforma?tab={{ tab }}&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/plataforma?tab={{ tab }}&page={{ p }}"
       class="page-btn {% if p == page %}active{% endif %}">{{ p }}</a>
    {% endfor %}
    {% if page < total_pages %}
    <a href="/panel/plataforma?tab={{ tab }}&page={{ page+1 }}" class="page-btn">›</a>
    {% endif %}
  </div>
  {% elif not platform_error %}
  <div class="alert alert-info">No hay datos disponibles. Ejecuta el seed de la plataforma primero.</div>
  {% endif %}
</div>
{% endif %}

{% endblock %}