{% extends "layouts/app.html" %}

{% block content %}
<div class="mb-6 flex justify-between items-center">
    <div>
        <p class="text-sm font-semibold text-orange-600 uppercase">Élève</p>
        <h1 class="text-2xl font-bold text-slate-900 mt-1">{{ eleve.Prenom }} {{ eleve.Nom }}</h1>
        <p class="text-sm text-slate-500 mt-1">{{ eleve.Classe }}{% if not eleve.Actif %} — inactif{% endif %}</p>
    </div>
    <a href="/observations/new" class="bg-orange-600 text-white px-4 py-2 rounded hover:bg-orange-700 text-sm">
        Nouvelle observation
    </a>
</div>

<h2 class="text-base font-semibold text-slate-800 mb-3">Observations</h2>

{% if observations %}
<div class="bg-white shadow rounded overflow-hidden">
    <table class="w-full">
        <thead class="bg-slate-50 border-b">
            <tr>
                <th class="px-4 py-3 text-left text-sm font-semibold text-slate-600">Cours</th>
                <th class="px-4 py-3 text-left text-sm font-semibold text-slate-600">Date</th>
                <th class="px-4 py-3 text-left text-sm font-semibold text-slate-600">Comportements</th>
                <th class="px-4 py-3 text-right text-sm font-semibold text-slate-600"></th>
            </tr>
        </thead>
        <tbody class="divide-y divide-slate-100">
            {% for obs in observations %}
            <tr class="hover:bg-slate-50">
                <td class="px-4 py-3 text-sm text-slate-900">{{ obs.CoursTitre }}</td>
                <td class="px-4 py-3 text-sm text-slate-700">{{ obs.CoursDate }}</td>
                <td class="px-4 py-3 text-sm text-slate-700">
                    {% set flags = [] %}
                    {% if obs.NeTravaillePas %}{% set _ = flags.append("Ne travaille pas") %}{% endif %}
                    {% if obs.Bavarde %}{% set _ = flags.append("Bavarde") %}{% endif %}
                    {% if obs.Dort %}{% set _ = flags.append("Dort") %}{% endif %}
                    {% if obs.Telephone %}{% set _ = flags.append("Téléphone") %}{% endif %}
                    {% if obs.Perturbe %}{% set _ = flags.append("Perturbe") %}{% endif %}
                    {% if obs.RefuseConsigne %}{% set _ = flags.append("Refuse consigne") %}{% endif %}
                    {{ flags | join(", ") or "—" }}
                    {% if obs.Remarque %}
                    <div class="text-slate-500 italic">{{ obs.Remarque }}</div>
                    {% endif %}
                </td>
                <td class="px-4 py-3 text-right">
                    <a href="/observations/{{ obs.Id }}" class="text-sm text-orange-700 hover:underline">Voir</a>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% else %}
<div class="bg-white shadow rounded p-6 text-slate-600">
    Aucune observation pour cet élève.
</div>
{% endif %}

<div class="mt-6">
    <a href="/eleves" class="text-orange-700 hover:underline text-sm">← Retour aux élèves</a>
</div>
{% endblock %}