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

{% block content %}
<div class="flex justify-between items-center mb-6">
    <div>
        <p class="text-sm font-semibold text-orange-600 uppercase">Cours</p>
        <h1 class="text-2xl font-bold text-slate-900 mt-1">Liste des cours</h1>
    </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>

{% if cours %}
<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">Date</th>
                <th class="px-4 py-3 text-left text-sm font-semibold text-slate-600">Titre</th>
                <th class="px-4 py-3 text-left text-sm font-semibold text-slate-600">Classe</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-slate-100">
            {% for c in cours %}
            <tr class="hover:bg-slate-50">
                <td class="px-4 py-3 text-sm text-slate-700">{{ c.DateCours }}</td>
                <td class="px-4 py-3">
                    <a href="/cours/{{ c.Id }}" class="font-medium text-slate-900 hover:underline">{{ c.Titre }}</a>
                </td>
                <td class="px-4 py-3 text-sm text-slate-700">{{ c.Classe }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% else %}
<div class="bg-white shadow rounded p-6 text-slate-600">
    Aucun cours enregistré.
</div>
{% endif %}
{% endblock %}