{% 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">Nouvelle observation</h1>
</div>

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

    <div class="grid md:grid-cols-2 gap-5">
        <div>
            <label class="block text-sm font-medium text-slate-700">Élève</label>
            <select name="eleve_id" required class="mt-1 w-full border border-slate-300 rounded px-3 py-2">
                <option value="">— Sélectionner —</option>
                {% for eleve in eleves %}
                <option value="{{ eleve.Id }}">{{ eleve.Prenom }} {{ eleve.Nom }} ({{ eleve.Classe }})</option>
                {% endfor %}
            </select>
        </div>

        <div>
            <label class="block text-sm font-medium text-slate-700">Cours</label>
            <select name="cours_id" required class="mt-1 w-full border border-slate-300 rounded px-3 py-2">
                <option value="">— Sélectionner —</option>
                {% for c in cours %}
                <option value="{{ c.Id }}">{{ c.Titre }} — {{ c.DateCours }} ({{ c.Classe }})</option>
                {% endfor %}
            </select>
        </div>
    </div>

    <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"> Ne travaille pas
            </label>
            <label class="flex items-center gap-2 text-sm text-slate-700">
                <input type="checkbox" name="bavarde" class="rounded"> Bavarde
            </label>
            <label class="flex items-center gap-2 text-sm text-slate-700">
                <input type="checkbox" name="dort" class="rounded"> Dort
            </label>
            <label class="flex items-center gap-2 text-sm text-slate-700">
                <input type="checkbox" name="telephone" class="rounded"> Téléphone
            </label>
            <label class="flex items-center gap-2 text-sm text-slate-700">
                <input type="checkbox" name="perturbe" class="rounded"> Perturbe le cours
            </label>
            <label class="flex items-center gap-2 text-sm text-slate-700">
                <input type="checkbox" name="refuse_consigne" class="rounded"> 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"></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="/suivi" class="px-4 py-2 rounded border border-slate-300 text-slate-700 hover:bg-slate-50">
            Annuler
        </a>
    </div>
</form>
{% endblock %}