{% 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">Observation</p>
        <h1 class="text-2xl font-bold text-slate-900 mt-1">
            {{ obs.ElevePrenom }} {{ obs.EleveNom }}
        </h1>
        <p class="text-sm text-slate-500 mt-1">
            {{ obs.CoursTitre }} — {{ obs.CoursDate }} ({{ obs.CoursClasse }})
        </p>
    </div>
    <a href="/observations/{{ obs.Id }}/edit"
        class="bg-orange-600 text-white px-4 py-2 rounded hover:bg-orange-700 text-sm">
        Modifier
    </a>
</div>

<div class="bg-white shadow rounded p-6 space-y-5">
    <section>
        <h2 class="text-sm font-semibold text-slate-700 mb-3">Comportements</h2>
        <ul class="grid grid-cols-2 md:grid-cols-3 gap-2 text-sm">
            {% for field in bool_fields %}
            {% set col = field | replace("_", " ") | title %}
            {% set val = obs[field | replace("_", " ") | replace(" ", "")] %}
            <li class="flex items-center gap-2 {% if obs['NeTravaillePas' if field == 'ne_travaille_pas' else field | replace('_', ' ') | title | replace(' ', '')] %}text-orange-700 font-medium{% else %}text-slate-400{% endif %}">
                {{ "✓" if obs[field | replace("_", " ") | title | replace(" ", "")] else "—" }}
                {{ col }}
            </li>
            {% endfor %}
        </ul>
    </section>

    {% if obs.Remarque %}
    <section>
        <h2 class="text-sm font-semibold text-slate-700 mb-2">Remarque</h2>
        <p class="text-slate-700 italic">{{ obs.Remarque }}</p>
    </section>
    {% endif %}
</div>

<div class="mt-6 flex gap-4">
    <a href="/eleves/{{ obs.EleveId }}" class="text-orange-700 hover:underline text-sm">← Fiche élève</a>
    <a href="/cours/{{ obs.CoursId }}" class="text-orange-700 hover:underline text-sm">← Détail du cours</a>
</div>
{% endblock %}