{% extends "base.html" %}
{% block content %}
<div class="page-head">
  <div><h1>Secciones</h1><p>Organización de secciones y matrículas por año escolar.</p></div>
  <form method="get" action="/secciones" class="inline-filter">
    <label>Año escolar
      <select name="school_year_id" data-auto-submit>
        {% for year in years %}<option value="{{ year.id }}" {% if year.id == selected_year.id %}selected{% endif %}>{{ year.name }}{% if year.is_active %} · ACTIVO{% endif %}</option>{% endfor %}
      </select>
    </label>
  </form>
</div>

<div class="summary-strip">
  <div><span>Año consultado</span><b>{{ selected_year.name }}</b></div>
  <div><span>Estado</span><b>{{ selected_year.status|upper }}</b></div>
  <div><span>Secciones</span><b>{{ sections|length }}</b></div>
  <div><span>Matrícula</span><b>{{ sections|sum(attribute=1) }}</b></div>
</div>

{% if user.role in ['admin','director','evaluacion'] %}
<section class="card">
  <h2>Crear o habilitar una sección</h2>
  <form method="post" action="/secciones/nueva" class="form-grid">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
    <input type="hidden" name="school_year_id" value="{{ selected_year.id }}">
    <label>Año / grado<select name="grade_level" required><option>1ERO</option><option>2DO</option><option>3ERO</option><option>4TO</option><option>5TO</option></select></label>
    <label>Literal de sección<input name="letter" maxlength="5" placeholder="A" required></label>
    <div class="full"><button class="btn btn-primary">Crear para {{ selected_year.name }}</button></div>
  </form>
</section>
{% endif %}

<div class="section-grid">
{% for section, count in sections %}
<article class="section-card section-card-managed">
  <a href="/secciones/{{ section.id }}"><strong>{{ section.name }}</strong><span>{{ count }} estudiantes</span></a>
  {% if user.role in ['admin','director','evaluacion'] %}
  <details>
    <summary>Editar sección</summary>
    <form method="post" action="/secciones/{{ section.id }}/editar" class="stack compact-stack">
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
      <input type="hidden" name="school_year_id" value="{{ selected_year.id }}">
      <label>Año / grado<input name="grade_level" value="{{ section.grade_level }}" required></label>
      <label>Literal<input name="letter" value="{{ section.letter }}" maxlength="5" required></label>
      <label class="checkbox-line"><input type="checkbox" name="is_active" {% if section.is_active %}checked{% endif %}> Sección activa</label>
      <button class="btn btn-light btn-sm">Guardar cambios</button>
    </form>
  </details>
  {% endif %}
</article>
{% else %}<div class="card"><p class="empty">No hay secciones configuradas para este año escolar.</p></div>{% endfor %}
</div>
{% endblock %}