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

{% block content %}
<div class="mb-6">
    <p class="text-sm font-semibold text-orange-600 uppercase">Observations</p>
    <h1 class="text-2xl font-bold text-slate-900 mt-1">Modifier l'observation</h1>
    <p class="text-sm text-slate-500 mt-1">
        {{ obs.ElevePrenom }} {{ obs.EleveNom }} — {{ obs.CoursTitre }} ({{ obs.CoursDate }})
    </p>
</div>

<form method="post" action="/observations/{{ obs.Id }}" class="bg-white shadow rounded p-6 space-y-6">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">

    <fieldset>
        <legend class="text-sm font-medium text-slate-700 mb-3">Comportements observés</legend>
        <div class="grid grid-cols-2 md:grid-cols-3 gap-3">
            <label class="flex items-center gap-2 text-sm text-slate-700">
                <input type="checkbox" name="ne_travaille_pas" class="rounded"
                    {% if obs.NeTravaillePas %}checked{% endif %}> Ne travaille pas
            </label>
            <label class="flex items-center gap-2 text-sm text-slate-700">
                <input type="checkbox" name="bavarde" class="rounded"
                    {% if obs.Bavarde %}checked{% endif %}> Bavarde
            </label>
            <label class="flex items-center gap-2 text-sm text-slate-700">
                <input type="checkbox" name="dort" class="rounded"
                    {% if obs.Dort %}checked{% endif %}> Dort
            </label>
            <label class="flex items-center gap-2 text-sm text-slate-700">
                <input type="checkbox" name="telephone" class="rounded"
                    {% if obs.Telephone %}checked{% endif %}> Téléphone
            </label>
            <label class="flex items-center gap-2 text-sm text-slate-700">
                <input type="checkbox" name="perturbe" class="rounded"
                    {% if obs.Perturbe %}checked{% endif %}> Perturbe le cours
            </label>
            <label class="flex items-center gap-2 text-sm text-slate-700">
                <input type="checkbox" name="refuse_consigne" class="rounded"
                    {% if obs.RefuseConsigne %}checked{% endif %}> Refuse une consigne
            </label>
        </div>
    </fieldset>

    <div>
        <label class="block text-sm font-medium text-slate-700">Remarque libre</label>
        <textarea name="remarque" rows="3"
            class="mt-1 w-full border border-slate-300 rounded px-3 py-2 resize-none">{{ obs.Remarque or "" }}</textarea>
    </div>

    <div class="flex gap-3">
        <button type="submit" class="bg-orange-600 text-white px-4 py-2 rounded hover:bg-orange-700">
            Enregistrer
        </button>
        <a href="/observations/{{ obs.Id }}"
            class="px-4 py-2 rounded border border-slate-300 text-slate-700 hover:bg-slate-50">
            Annuler
        </a>
    </div>
</form>
{% endblock %}