{% extends 'base.html' %}
{% from 'training/_program.html' import program_fields %}
{% block title %}Formation{% endblock %}
{% block content %}
<div class="max-w-6xl mx-auto px-4 py-8" x-data="{create:false}">
  <div class="flex flex-wrap items-center justify-between gap-3 mb-6">
    <div>
      <h1 class="text-3xl">Dossiers de plongée</h1>
      <p class="text-sm text-gray-600">Une ligne par formation. Les pièces d'un élève sont sur sa <a href="{{ url_for('training.students') }}" class="text-ocean-600 underline">fiche</a>.</p>
    </div>
    <button @click="create=!create" class="btn-coral">Nouveau dossier</button>
  </div>

  <div class="card grid grid-cols-2 md:grid-cols-5 divide-x divide-y md:divide-y-0 divide-ocean-100 mb-6">
    <div class="p-4"><div class="text-sm text-ocean-700">Total</div><div class="display text-3xl num">{{ total }}</div></div>
    {% for label, key in [('En formation','En formation'),('Complétés','Complété'),('Certifiés','Certifié'),('Transférés','Transfert')] %}
    <a href="{{ url_for('training.dashboard', status=key) }}" class="p-4 hover:bg-ocean-50">
      <div class="text-sm text-ocean-700">{{ label }}</div><div class="display text-3xl num">{{ counts[key] }}</div>
    </a>
    {% endfor %}
  </div>

  <form method="post" action="{{ url_for('training.create_record') }}" x-show="create" x-cloak class="card p-5 mb-6 space-y-4">
    <h2 class="text-lg">Nouveau dossier</h2>
    {% if students %}
    <div>
      <label class="text-sm font-medium">Élève existant</label>
      <select name="student_id" class="input" x-ref="existing">
        <option value="">— Nouvel élève —</option>
        {% for s in students %}<option value="{{ s.id }}">{{ s.full_name }}</option>{% endfor %}
      </select>
    </div>
    {% endif %}
    <div class="grid md:grid-cols-2 gap-3">
      <input name="first_name" class="input" placeholder="Prénom"/>
      <input name="last_name" class="input" placeholder="Nom"/>
      <input name="email" type="email" class="input" placeholder="Courriel"/>
      <input name="phone" class="input" placeholder="Téléphone"/>
      <div><label class="text-xs text-gray-500">Date de naissance</label><input name="birth_date" type="date" class="input"/></div>
      <div><label class="text-xs text-gray-500">Début de formation</label><input name="start_date" type="date" value="{{ today.isoformat() }}" class="input"/></div>
    </div>
    {{ program_fields() }}
    <button class="btn-primary">Créer le dossier</button>
  </form>

  <form method="get" class="flex flex-wrap gap-2 mb-4">
    <input name="q" value="{{ q }}" class="input max-w-xs" placeholder="Rechercher un élève…"/>
    <select name="status" class="input max-w-[12rem]">
      <option value="">Tous les statuts</option>
      {% for s in statuses %}<option value="{{ s }}" {{ 'selected' if s == status }}>{{ s }}</option>{% endfor %}
    </select>
    <button class="btn-secondary">Filtrer</button>
  </form>

  <div class="card divide-y divide-ocean-100">
    {% for r in records %}
    <a href="{{ url_for('training.record', record_id=r.id) }}" class="flex items-center gap-4 p-4 hover:bg-ocean-50">
      <div class="flex-1 min-w-0">
        <div class="font-semibold text-ocean-900 truncate">{{ r.student.full_name }}</div>
        <div class="text-xs text-gray-500">{{ r.program_name }} · début {{ r.start_date.strftime('%Y-%m-%d') if r.start_date }}</div>
      </div>
      <div class="w-32 hidden sm:block">
        <div class="gauge"><i style="width:{{ r.progress }}%"></i></div>
        <div class="text-xs text-gray-600 mt-1 num">{{ r.progress }} % · {{ r.done_count }}/{{ r.milestones|length }}</div>
      </div>
      <span class="pill">{{ r.status }}</span>
      {% if r.locked %}<span class="pill" title="Un transfert a été émis">Verrouillé</span>{% endif %}
    </a>
    {% else %}
    <div class="p-8 text-center text-gray-500 text-sm">Aucun dossier. Créez-en un avec « Nouveau dossier ».</div>
    {% endfor %}
  </div>
</div>
{% endblock %}