{% extends 'base.html' %}
{% block title %}Élèves{% endblock %}
{% block content %}
<div class="max-w-6xl mx-auto px-4 py-8">
  <div class="mb-6">
    <h1 class="text-3xl">Élèves</h1>
    <p class="text-sm text-gray-600">Chaque élève regroupe ses formations et ses pièces : certificat médical, décharge, certifications antérieures.</p>
  </div>

  <form method="get" class="flex gap-2 mb-4">
    <input name="q" value="{{ q }}" class="input max-w-xs" placeholder="Rechercher un élève…" aria-label="Rechercher un élève"/>
    <button class="btn-secondary">Rechercher</button>
  </form>

  <div class="card divide-y divide-ocean-100">
    {% for s in students %}
    <a href="{{ url_for('training.student', student_id=s.id) }}" class="flex flex-wrap items-center gap-x-4 gap-y-1 p-4 hover:bg-ocean-50">
      <div class="flex-1 min-w-[12rem]">
        <div class="font-semibold text-ocean-900">{{ s.full_name }}</div>
        <div class="text-xs text-gray-600">{{ s.records|length }} dossier{{ 's' if s.records|length > 1 }}{% if s.records %} · {{ s.records|map(attribute='program_name')|unique|join(', ') }}{% endif %}</div>
      </div>
      <div class="flex flex-wrap gap-1">
        {% for a in s.document_alerts %}<span class="pill {{ '!border-coral-500 !text-ocean-900' if 'manquant' in a or 'expiré' in a and 'bientôt' not in a }}">{{ a }}</span>{% endfor %}
      </div>
    </a>
    {% else %}
    <div class="p-8 text-center text-gray-600 text-sm">Aucun élève. Créez un dossier pour ajouter le premier.</div>
    {% endfor %}
  </div>
</div>
{% endblock %}