{% extends 'base.html' %}
{% block title %}{{ rec.student.full_name }} — Formation{% endblock %}
{% macro instructor_fields(i=None) %}
  <div><label class="text-xs text-gray-500">Nom de l'instructeur *</label><input name="name" value="{{ i.name if i else '' }}" class="input"/></div>
  <div><label class="text-xs text-gray-500">N° PADI *</label><input name="padi_number" value="{{ i.padi_number if i else '' }}" class="input"/></div>
  <div><label class="text-xs text-gray-500">N° du centre de plongée / villégiature</label><input name="center_number" value="{{ (i.center_number or '') if i else '' }}" class="input"/></div>
  <div><label class="text-xs text-gray-500">Téléphone</label><input name="phone" value="{{ (i.phone or '') if i else '' }}" class="input"/></div>
  <div><label class="text-xs text-gray-500">Fax</label><input name="fax" value="{{ (i.fax or '') if i else '' }}" class="input"/></div>
  <div><label class="text-xs text-gray-500">Courriel</label><input name="email" type="email" value="{{ (i.email or '') if i else '' }}" class="input"/></div>
{% endmacro %}
{% block content %}
<div class="max-w-5xl mx-auto px-4 py-8" x-data="{tab:'{{ tab }}'}">
  <a href="{{ url_for('training.dashboard') }}" class="text-sm text-ocean-600">← Dossiers</a><span class="text-sm text-gray-400"> · </span><a href="{{ url_for('training.student', student_id=rec.student_id) }}" class="text-sm text-ocean-600">Fiche de l'élève</a>
  <div class="flex flex-wrap items-center justify-between gap-3 mt-2 mb-4">
    <div>
      <h1 class="text-3xl">{{ rec.student.full_name }} {% if rec.locked %}<span class="pill align-middle ml-2">Verrouillé</span>{% endif %}</h1>
      <p class="text-sm text-gray-500">{{ rec.program_name }} · début {{ rec.start_date.strftime('%Y-%m-%d') if rec.start_date }}</p>
      <p class="text-sm text-gray-500">Instructeurs :
        {% for link in rec.instructor_links %}{{ link.instructor.name }} (PADI #{{ link.instructor.padi_number }}){{ ', ' if not loop.last }}{% else %}aucun{% endfor %}</p>
    </div>
    <span class="pill text-sm">{{ rec.status }}</span>
  </div>

  <div class="card p-4 mb-4">
    <div class="flex justify-between text-sm mb-1"><span>Progression</span><span class="font-semibold">{{ rec.progress }} % ({{ rec.done_count }}/{{ rec.milestones|length }})</span></div>
    <div class="gauge"><i style="width:{{ rec.progress }}%"></i></div>
  </div>

  {% if rec.locked %}
  <div class="mb-4 px-4 py-3 rounded-md bg-amber-50 border border-amber-200 text-amber-900 text-sm">Dossier verrouillé : un transfert a été émis. Plus aucune modification n'est possible.</div>
  {% endif %}

  <div class="flex gap-1 overflow-x-auto border-b border-ocean-200 mb-4 text-sm font-medium">
    {% for key, label in [('overview','Aperçu'),('instructors','Instructeurs'),('milestones','Jalons'),('signatures','Signatures'),('forms','Formulaires'),('documents','Documents'),('transfer','Suivi et transfert'),('history','Historique')] if key not in ('signatures', 'forms') or rec.is_open_water %}
    <button @click="tab='{{ key }}'" :class="tab==='{{ key }}' ? 'border-ocean-600 text-ocean-700' : 'border-transparent text-gray-500'"
            class="px-4 py-2 border-b-2 whitespace-nowrap">{{ label }}</button>
    {% endfor %}
  </div>

  <!-- Aperçu -->
  <div x-show="tab==='overview'" class="grid md:grid-cols-2 gap-4">
    <div class="card p-5 space-y-1 text-sm">
      <h2 class="font-semibold text-ocean-800 mb-2">Élève</h2>
      <div>Courriel : {{ rec.student.email or '—' }}</div>
      <div>Téléphone : {{ rec.student.phone or '—' }}</div>
      <div>Naissance : {{ rec.student.birth_date.strftime('%Y-%m-%d') if rec.student.birth_date else '—' }}</div>
    </div>
    <div class="card p-5 space-y-4">
      <form method="post" action="{{ url_for('training.update_status', record_id=rec.id) }}" class="space-y-2"
            onsubmit="return ['Annulé','Certifié'].includes(this.status.value) ? confirm('Confirmer le statut « ' + this.status.value + ' » ?') : true;">
        <label class="text-sm font-semibold text-ocean-800">Statut du dossier</label>
        <div class="flex gap-2">
          <select name="status" class="input" {{ 'disabled' if rec.locked }}>
            {% for s in statuses %}<option {{ 'selected' if s == rec.status }}>{{ s }}</option>{% endfor %}
            {% if rec.status == 'Transfert' %}<option selected>Transfert</option>{% endif %}
          </select>
          <button class="btn-primary" {{ 'disabled' if rec.locked }}>OK</button>
        </div>
        {% if not rec.locked and rec.is_open_water and not rec.signature_for('open_water') %}
        <p class="text-xs text-gray-500">« Certifié » exige la signature de certification Open Water (onglet Signatures).</p>
        {% endif %}
      </form>
      <form method="post" action="{{ url_for('training.update_medical', record_id=rec.id) }}" class="space-y-2">
        <label class="text-sm font-semibold text-ocean-800">Statut médical <span class="font-normal text-gray-400">(suivi seulement)</span></label>
        <div class="flex gap-2">
          <select name="medical_status" class="input" {{ 'disabled' if rec.locked }}>
            {% for s in medical_statuses %}<option {{ 'selected' if s == rec.medical_status }}>{{ s }}</option>{% endfor %}
          </select>
          <button class="btn-primary" {{ 'disabled' if rec.locked }}>OK</button>
        </div>
      </form>
    </div>
  </div>

  <!-- Instructeurs -->
  <div x-show="tab==='instructors'" x-cloak class="space-y-4">
    <p class="text-sm text-gray-500">Tous les instructeurs PADI qui paraphent ce dossier.</p>
    {% for link in rec.instructor_links %}{% set i = link.instructor %}
    <div class="card p-4 text-sm" x-data="{edit:false}">
      <div x-show="!edit" class="flex flex-wrap items-start justify-between gap-2">
        <div class="space-y-0.5">
          <div class="font-semibold text-ocean-800">{{ i.name }} <span class="font-normal text-gray-500">· PADI #{{ i.padi_number }}</span></div>
          <div class="text-gray-600">Centre n° {{ i.center_number or '—' }} · Tél. {{ i.phone or '—' }} · Fax {{ i.fax or '—' }}</div>
          <div class="text-gray-600">{{ i.email or '—' }}</div>
          <div class="text-xs text-gray-500">Date : {{ link.signed_on.strftime('%Y-%m-%d') if link.signed_on else '—' }}</div>
          {% set sig = rec.signature_for('identification', i.id) %}
          {% if sig %}<img src="{{ sig.data_url }}" alt="Signature de {{ i.name }}" class="h-10 mt-1"/>
          {% else %}<button type="button" @click="tab='signatures'" class="text-xs text-amber-700 underline">Signature d'identification manquante</button>{% endif %}
        </div>
        {% if not rec.locked %}
        <div class="flex items-center gap-2">
          <button type="button" @click="edit=true" class="btn-secondary !py-1.5 !px-3">Modifier</button>
          <form method="post" action="{{ url_for('training.remove_instructor', record_id=rec.id, link_id=link.id) }}"
                onsubmit="return confirm('Retirer cet instructeur du dossier ?')">
            <button class="text-red-600 text-xs">Retirer</button></form>
        </div>
        {% endif %}
      </div>
      {% if not rec.locked %}
      <form x-show="edit" x-cloak method="post" action="{{ url_for('training.update_instructor', record_id=rec.id, link_id=link.id) }}" class="space-y-3">
        <div class="grid md:grid-cols-2 gap-3">
          {{ instructor_fields(i) }}
          <div><label class="text-xs text-gray-500">Date</label><input name="signed_on" type="date" value="{{ link.signed_on.isoformat() if link.signed_on else '' }}" max="{{ today.isoformat() }}" class="input"/></div>
        </div>
        <p class="text-xs text-gray-400">Les coordonnées sont communes à tous les dossiers de cet instructeur.</p>
        <div class="flex gap-2">
          <button class="btn-primary">Enregistrer</button>
          <button type="button" @click="edit=false" class="btn-secondary">Annuler</button>
        </div>
      </form>
      {% endif %}
    </div>
    {% else %}
    <div class="card p-6 text-center text-sm text-gray-500">Aucun instructeur au dossier.</div>
    {% endfor %}

    {% if not rec.locked %}
    {% set me_name = ((current_user.first_name or '') ~ ' ' ~ (current_user.last_name or ''))|trim %}
    {% set me_padi = current_user.certification_number if current_user.certification_agency in (None, 'PADI') else None %}
    <form method="post" action="{{ url_for('training.add_instructor', record_id=rec.id) }}" class="card p-5 space-y-4" x-data="{existing:''}">
      <h2 class="font-semibold text-ocean-800">Ajouter un instructeur</h2>
      {% if available_instructors %}
      <div>
        <label class="text-sm font-medium">Instructeur existant</label>
        <select name="instructor_id" class="input" x-model="existing">
          <option value="">— Nouvel instructeur —</option>
          {% for i in available_instructors %}<option value="{{ i.id }}">{{ i.name }} (PADI #{{ i.padi_number }})</option>{% endfor %}
        </select>
      </div>
      {% endif %}
      <div x-show="!existing" class="space-y-2">
        <button type="button" class="text-xs text-ocean-600"
                @click='const f = $el.form.elements; f["name"].value = {{ me_name|tojson }}; f["email"].value = {{ current_user.email|tojson }}; f["padi_number"].value = {{ (me_padi or "")|tojson }}'>Remplir avec mon profil</button>
        <div class="grid md:grid-cols-2 gap-3">{{ instructor_fields() }}</div>
      </div>
      <div><label class="text-xs text-gray-500">Date</label><input name="signed_on" type="date" value="{{ today.isoformat() }}" max="{{ today.isoformat() }}" class="input max-w-[12rem]"/></div>
      <button class="btn-primary">Ajouter au dossier</button>
    </form>
    {% endif %}
  </div>

  <!-- Jalons -->
  <div x-show="tab==='milestones'" x-cloak class="space-y-4">
    {% if not rec.locked and not rec.instructor_links %}
    <div class="px-4 py-3 rounded-xl bg-amber-50 border border-amber-200 text-amber-800 text-sm">
      Ajoutez au moins un instructeur au dossier pour pouvoir valider des jalons.
      <button type="button" @click="tab='instructors'" class="underline font-medium">Onglet Instructeurs</button>
    </div>
    {% endif %}
    {% for cat, items in categories %}
    <div class="card">
      <div class="px-4 py-2 bg-ocean-50 font-semibold text-ocean-800 text-sm flex justify-between">
        <span>{{ cat }}</span><span class="text-gray-500 font-normal">{{ items|selectattr('completed')|list|length }}/{{ items|length }}</span>
      </div>
      <div class="divide-y divide-ocean-100">
        {% for m in items %}
        <form id="m{{ m.id }}" method="post" action="{{ url_for('training.update_milestone', record_id=rec.id, milestone_id=m.id) }}"
              class="p-3 flex flex-wrap items-center gap-2 text-sm">
          <div class="flex-1 min-w-[14rem]">
            <div class="{{ 'text-green-700' if m.completed }} font-medium"><span class="inline-block w-3 h-3 mr-1 rounded-full border-2 {{ 'bg-green-700 border-green-700' if m.completed else 'border-ocean-300' }}" aria-hidden="true"></span>{{ m.name }}</div>
            {% if m.completed %}<div class="text-xs text-gray-500">{{ m.completed_on.strftime('%Y-%m-%d') }} · {{ m.signed_by }}</div>{% endif %}
          </div>
          {% if not rec.locked %}
          {% if m.completed %}
          <input name="notes" value="{{ m.notes or '' }}" placeholder="Notes" class="input max-w-[12rem] !py-1.5"/>
          <button name="action" value="undo" class="btn-secondary !py-1.5 !px-3" onclick="return confirm('Annuler la validation de ce jalon ?')">Annuler</button>
          {% elif rec.instructor_links %}
          <input name="notes" value="{{ m.notes or '' }}" placeholder="Notes" class="input max-w-[12rem] !py-1.5"/>
          <select name="instructor_id" class="input max-w-[14rem] !py-1.5" aria-label="Instructeur">
            {% for link in rec.instructor_links %}<option value="{{ link.instructor_id }}" {{ 'selected' if link.instructor_id == default_instructor_id }}>{{ link.instructor.name }} (#{{ link.instructor.padi_number }})</option>{% endfor %}
          </select>
          <input name="completed_on" type="date" value="{{ today.isoformat() }}" max="{{ today.isoformat() }}" class="input max-w-[10rem] !py-1.5"/>
          <button name="action" value="validate" class="btn-primary !py-1.5 !px-3">Valider</button>
          {% endif %}
          {% elif m.notes %}<span class="text-xs text-gray-500">{{ m.notes }}</span>{% endif %}
        </form>
        {% endfor %}
      </div>
    </div>
    {% endfor %}
  </div>

  <!-- Signatures -->
  {% if rec.is_open_water %}
  <div x-show="tab==='signatures'" x-cloak class="space-y-4" x-data="{pad:null}">
    <p class="text-sm text-gray-500">Chaque signature se fait à la main (doigt, stylet ou souris) par la personne elle-même :
      l'instructeur pour ses lignes, l'élève pour sa déclaration.</p>
    {% for sec in signature_sections %}
    <div class="card">
      <div class="px-4 py-2 bg-ocean-50 font-semibold text-ocean-800 text-sm flex justify-between gap-2">
        <span>{{ sec.line.title }}</span>
        {% if sec.line.optional %}<span class="font-normal text-gray-500">facultatif</span>{% endif %}
      </div>
      <p class="px-4 pt-3 text-xs text-gray-500 italic">{{ sec.line.statement }}</p>
      <div class="divide-y divide-ocean-100">
        {% for instructor, sig in sec.rows %}
        <div class="p-4 flex flex-wrap items-center gap-3 text-sm">
          {% if sig %}
          <img src="{{ sig.data_url }}" alt="Signature de {{ sig.signer_name }}" class="h-14 max-w-[12rem] bg-white border border-ocean-100 rounded-lg"/>
          <div class="flex-1 min-w-[10rem]">
            <div class="font-medium text-green-700">✅ {{ sig.signer_name }}{% if sig.padi_number %} · PADI #{{ sig.padi_number }}{% endif %}</div>
            <div class="text-xs text-gray-500">Signé le {{ sig.signed_at.strftime('%Y-%m-%d') }}</div>
          </div>
          {% if not rec.locked %}
          <form method="post" action="{{ url_for('training.delete_signature', record_id=rec.id, signature_id=sig.id) }}"
                onsubmit="return confirm('Retirer cette signature ?')">
            <button class="text-red-600 text-xs">Retirer</button></form>
          {% endif %}
          {% else %}
          <div class="flex-1 min-w-[10rem]">
            <div class="font-medium text-gray-700">⬜
              {% if instructor %}{{ instructor.name }} · PADI #{{ instructor.padi_number }}
              {% elif sec.line.role == 'student' %}Élève : {{ rec.student.full_name }}
              {% else %}Non signé{% endif %}</div>
            {% if sec.missing %}<div class="text-xs text-amber-700">Il manque : {{ sec.missing_text }}</div>{% endif %}
          </div>
          {% if not rec.locked and not sec.missing %}
            {% if sec.line.role == 'student' or rec.instructor_links %}
            <button type="button" class="btn-primary !py-1.5 !px-3"
                    @click='pad = {{ {"kind": sec.kind, "title": sec.line.title, "statement": sec.line.statement, "role": sec.line.role, "instructor": instructor.id if instructor else none, "signer": (instructor.name ~ " · PADI #" ~ instructor.padi_number) if instructor else none}|tojson }}'>Signer</button>
            {% else %}
            <span class="text-xs text-gray-500">Ajoutez un instructeur au dossier</span>
            {% endif %}
          {% endif %}
          {% endif %}
        </div>
        {% else %}
        <div class="p-4 text-sm text-gray-500">Aucun instructeur au dossier.</div>
        {% endfor %}
      </div>
    </div>
    {% endfor %}

    {% if not rec.locked %}
    <div x-show="pad" x-cloak @click.self="pad = null" @keydown.escape.window="pad = null"
         class="fixed inset-0 z-50 bg-black/40 flex items-end sm:items-center justify-center p-4">
      <form method="post" action="{{ url_for('training.sign', record_id=rec.id) }}" x-data="signaturePad" @submit="save($event)"
            class="bg-white rounded-2xl shadow-xl p-5 w-full max-w-lg space-y-3 max-h-[95vh] overflow-y-auto">
        <h3 class="font-semibold text-ocean-800" x-text="pad && pad.title"></h3>
        <p class="text-xs text-gray-500 italic max-h-32 overflow-y-auto" x-text="pad && pad.statement"></p>
        <input type="hidden" name="kind" :value="pad && pad.kind"/>
        <template x-if="pad && pad.role === 'instructor' && pad.instructor">
          <div class="text-sm">
            <input type="hidden" name="instructor_id" :value="pad.instructor"/>
            Signataire : <strong x-text="pad.signer"></strong>
          </div>
        </template>
        <template x-if="pad && pad.role === 'instructor' && !pad.instructor">
          <div>
            <label class="text-xs text-gray-500">Instructeur signataire</label>
            <select name="instructor_id" class="input">
              {% for link in rec.instructor_links %}<option value="{{ link.instructor_id }}" {{ 'selected' if link.instructor_id == default_instructor_id }}>{{ link.instructor.name }} (PADI #{{ link.instructor.padi_number }})</option>{% endfor %}
            </select>
          </div>
        </template>
        <template x-if="pad && pad.role === 'student'">
          <div class="text-sm">Signataire : <strong>{{ rec.student.full_name }}</strong></div>
        </template>
        <div class="relative">
          <canvas x-ref="canvas" width="900" height="300" aria-label="Zone de signature"
                  class="w-full aspect-[3/1] bg-white border-2 border-dashed border-ocean-200 rounded-xl touch-none cursor-crosshair"
                  @pointerdown="start($event)" @pointermove="move($event)" @pointerup="end()" @pointercancel="end()"></canvas>
          <span x-show="!drawn" class="absolute inset-0 flex items-center justify-center text-gray-300 pointer-events-none">Signez ici</span>
          <button type="button" x-show="drawn" @click="clear()" class="absolute top-2 right-3 text-xs text-ocean-600 underline">Effacer</button>
        </div>
        <input type="hidden" name="image" x-ref="image"/>
        <p x-show="drawn && !enough" class="text-xs text-amber-700">Signature trop courte : signez à la main dans le cadre.</p>
        <div class="flex justify-end gap-2">
          <button type="button" class="btn-secondary" @click="pad = null">Annuler</button>
          <button class="btn-primary" :disabled="!enough" :class="!enough && 'opacity-50'">Signer</button>
        </div>
      </form>
    </div>
    {% endif %}
  </div>

  {% endif %}

  <!-- Formulaires PADI -->
  {% if rec.is_open_water %}
  <div x-show="tab==='forms'" x-cloak class="space-y-4">
    <p class="text-sm text-gray-600">Les formulaires du cours Open Water. Ouvrez-en un pour lire le PDF officiel et le faire signer à l'écran, ou pour joindre la version papier numérisée.</p>
    {% if rec.student.birth_date is none %}
    <div class="px-4 py-3 rounded-md bg-amber-50 border border-amber-200 text-amber-900 text-sm">
      Sans date de naissance, impossible de savoir si le formulaire parent/enfant est requis.
      <a href="{{ url_for('training.student', student_id=rec.student_id) }}" class="underline font-medium">Compléter la fiche de l'élève</a>
    </div>
    {% endif %}
    <div class="card divide-y divide-ocean-100">
      {% for st in forms %}
      <a href="{{ url_for('training.form_page', record_id=rec.id, code=st.code) }}" class="flex flex-wrap items-center gap-x-4 gap-y-1 p-4 hover:bg-ocean-50 {{ 'opacity-60' if st.state == 'na' }}">
        <div class="flex-1 min-w-[14rem]">
          <div class="font-medium text-ocean-900">{{ st.title }}</div>
          <div class="text-xs text-gray-600">N° {{ st.code }}{% if not st.required %} · facultatif{% endif %}{% if st.entry and st.entry.score is not None %} · {{ st.entry.score }}/{{ st.entry.total }}{% endif %}</div>
        </div>
        <span class="pill {{ '!border-green-700 !text-green-800' if st.state == 'done' }}{{ '!border-coral-500 !text-ocean-900' if st.state == 'todo' and st.required }}">{{ st.label }}</span>
      </a>
      {% endfor %}
    </div>
  </div>
  {% endif %}

  <!-- Documents -->
  <div x-show="tab==='documents'" x-cloak class="space-y-4">
    <div class="card">
      <div class="px-4 py-2 bg-ocean-50 font-semibold text-ocean-800 text-sm flex justify-between gap-2">
        <span>Pièces de l'élève</span>
        <a href="{{ url_for('training.student', student_id=rec.student_id) }}#documents" class="font-normal text-ocean-600 underline">Gérer</a>
      </div>
      <div class="divide-y divide-ocean-100 text-sm">
        {% for kind in [kind_medical, kind_waiver] %}{% set d = rec.student.latest_document(kind) %}
        <div class="p-3 flex flex-wrap items-center gap-2">
          <span class="flex-1 min-w-[10rem] font-medium">{{ kind }}</span>
          {% if d %}
          <a class="text-ocean-600" href="{{ url_for('training.download_student_document', student_id=rec.student_id, doc_id=d.id) }}">{{ d.original_name }}</a>
          {% if d.valid_until %}<span class="pill {{ '!border-coral-500 !text-ocean-900' if d.expired }}">{{ 'Expiré le' if d.expired else "Jusqu'au" }} {{ d.valid_until.strftime('%Y-%m-%d') }}</span>{% endif %}
          {% else %}<span class="pill !border-coral-500 !text-ocean-900">Manquant</span>{% endif %}
        </div>
        {% endfor %}
      </div>
    </div>
    <h2 class="text-lg">Documents de ce dossier</h2>
    {% if not rec.locked %}
    <form method="post" enctype="multipart/form-data" action="{{ url_for('training.upload_document', record_id=rec.id) }}" class="card p-4 flex flex-wrap gap-2 items-center">
      <select name="kind" class="input max-w-[14rem]">{% for k in doc_kinds %}<option>{{ k }}</option>{% endfor %}</select>
      <input type="file" name="file" accept=".pdf,.jpg,.jpeg,.png" required class="text-sm"/>
      <button class="btn-primary">Téléverser</button>
      <span class="text-xs text-gray-400 w-full">PDF, JPG, JPEG, PNG — 10 Mo max</span>
    </form>
    {% endif %}
    <div class="card divide-y divide-ocean-100">
      {% for d in rec.documents %}
      <div class="p-3 flex items-center gap-3 text-sm">
        <div class="flex-1"><a class="text-ocean-600 font-medium" href="{{ url_for('training.download_document', record_id=rec.id, doc_id=d.id) }}">{{ d.original_name }}</a>
          <div class="text-xs text-gray-500">{{ d.kind }} · {{ (d.size / 1024)|round|int }} Ko · {{ d.uploaded_by }} · {{ d.uploaded_at.strftime('%Y-%m-%d') }}</div></div>
        {% if not rec.locked %}
        <form method="post" action="{{ url_for('training.delete_document', record_id=rec.id, doc_id=d.id) }}" onsubmit="return confirm('Supprimer ce document ?')">
          <button class="text-red-600 text-xs">Supprimer</button></form>
        {% endif %}
      </div>
      {% else %}<div class="p-6 text-center text-sm text-gray-500">Aucun document.</div>{% endfor %}
    </div>
  </div>

  <!-- Suivi et transfert -->
  <div x-show="tab==='transfer'" x-cloak class="space-y-4">
    <div class="card p-5 text-sm space-y-3">
      <h2 class="text-lg">Document de suivi</h2>
      <p class="text-gray-600">Photographie imprimable du dossier à ce jour : jalons, instructeurs, signatures. Le dossier <strong>reste modifiable</strong> et vous pouvez en émettre autant que nécessaire, par exemple pour un autre centre ou pour vos archives.</p>
      <form method="post" action="{{ url_for('training.create_followup', record_id=rec.id) }}" class="flex flex-wrap gap-2">
        <input name="note" maxlength="200" class="input max-w-sm" placeholder="Note (optionnel), ex. remis à l'élève" aria-label="Note"/>
        <button class="btn-primary">Émettre un document de suivi</button>
      </form>
      {% if rec.followups %}
      <ul class="divide-y divide-ocean-100 border-t border-ocean-100">
        {% for f in rec.followups %}
        <li class="py-2 flex flex-wrap items-center gap-2">
          <span class="num font-medium">{{ f.number }}</span>
          <span class="text-gray-600">{{ f.issued_on.strftime('%Y-%m-%d') }}{% if f.note %} · {{ f.note }}{% endif %}</span>
          <a href="{{ url_for('training.print_followup', record_id=rec.id, followup_id=f.id) }}" target="_blank" class="ml-auto text-ocean-600 underline">Voir / imprimer</a>
        </li>
        {% endfor %}
      </ul>
      {% endif %}
    </div>

    <div class="card p-5 text-sm space-y-3">
      <h2 class="text-lg">Transfert de l'élève</h2>
      {% if rec.transfer %}
        <div class="font-semibold text-ocean-800">Transfert n° {{ rec.transfer.number }}</div>
        <div>Émis le {{ rec.transfer.issued_on.strftime('%Y-%m-%d') }} · valide jusqu'au {{ rec.transfer.valid_until.strftime('%Y-%m-%d') }}</div>
        <div>Destination : {{ rec.transfer.destination or '—' }}</div>
        <a href="{{ url_for('training.print_transfer', record_id=rec.id) }}" target="_blank" class="btn-primary">Voir / imprimer</a>
      {% else %}
        {% if rec.unsigned_instructors and rec.is_open_water %}
        <div class="px-4 py-3 rounded-md bg-amber-50 border border-amber-200 text-amber-900">
          Section d'identification non signée par : {{ rec.unsigned_instructors|map(attribute='name')|join(', ') }}.
          <button type="button" @click="tab='signatures'" class="underline font-medium">Onglet Signatures</button>
        </div>
        {% endif %}
        <p class="text-gray-600">À utiliser seulement quand l'élève poursuit sa formation ailleurs : le transfert fige l'état du dossier (valide 1 an) et le <strong>verrouille définitivement</strong>.</p>
        <form method="post" action="{{ url_for('training.create_transfer', record_id=rec.id) }}" class="flex flex-wrap gap-2"
              onsubmit="return confirm('Transférer l\'élève ? Le dossier sera verrouillé.')">
          <input name="destination" class="input max-w-sm" placeholder="Centre de destination (optionnel)" aria-label="Centre de destination"/>
          <button class="btn-coral">Transférer l'élève</button>
        </form>
      {% endif %}
    </div>
  </div>

  <!-- Historique -->
  <div x-show="tab==='history'" x-cloak class="card divide-y divide-ocean-100">
    {% for a in rec.audit %}
    <div class="p-3 text-sm"><span class="font-medium">{{ a.action }}</span>{% if a.details %} — {{ a.details }}{% endif %}
      <div class="text-xs text-gray-500">{{ a.user_name }} · {{ a.created_at.strftime('%Y-%m-%d %H:%M') }} UTC</div></div>
    {% endfor %}
  </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// Pavé de signature (souris, doigt ou stylet) exporté en PNG dans le champ « image »
document.addEventListener('alpine:init', () => {
  Alpine.data('signaturePad', () => ({
    drawn: false,
    drawing: false,
    last: null,
    ink: 0,  // longueur totale du tracé, pour refuser un simple point
    get enough() { return this.ink >= 150; },
    init() { this.$watch('pad', () => this.clear()); },
    point(e) {
      const c = this.$refs.canvas, r = c.getBoundingClientRect();
      return [(e.clientX - r.left) * c.width / r.width, (e.clientY - r.top) * c.height / r.height];
    },
    line(a, b) {
      const ctx = this.$refs.canvas.getContext('2d');
      ctx.lineWidth = 4; ctx.lineCap = 'round'; ctx.lineJoin = 'round'; ctx.strokeStyle = '#0f172a';
      ctx.beginPath(); ctx.moveTo(a[0], a[1]); ctx.lineTo(b[0] + 0.01, b[1]); ctx.stroke();
    },
    start(e) {
      e.preventDefault();
      this.$refs.canvas.setPointerCapture(e.pointerId);
      this.drawing = true;
      this.last = this.point(e);
      this.line(this.last, this.last);
      this.drawn = true;
    },
    move(e) {
      if (!this.drawing) return;
      const p = this.point(e);
      this.line(this.last, p);
      this.ink += Math.hypot(p[0] - this.last[0], p[1] - this.last[1]);
      this.last = p;
    },
    end() { this.drawing = false; },
    clear() {
      const c = this.$refs.canvas;
      c.getContext('2d').clearRect(0, 0, c.width, c.height);
      this.drawn = false;
      this.ink = 0;
    },
    save(e) {
      if (!this.enough) { e.preventDefault(); return; }
      this.$refs.image.value = this.$refs.canvas.toDataURL('image/png');
    },
  }));
});
</script>
{% endblock %}