{% extends "layouts/app.html" %}
{% block content %}
<div class="mb-6">
    <p class="text-sm font-semibold text-orange-600 uppercase">Villes</p>
    <h1 class="text-2xl font-bold text-slate-900 mt-1">Villes de référence</h1>
</div>

{% if villes %}
<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">Ville</th>
                <th class="px-4 py-3 text-left text-sm font-semibold text-slate-600">Code postal</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-slate-100">
            {% for ville in villes %}
            <tr>
                <td class="px-4 py-3 font-medium text-slate-900">{{ ville.Nom }}</td>
                <td class="px-4 py-3 text-slate-700">{{ ville.CodePostal or "" }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% else %}
<div class="bg-white shadow rounded p-6 text-slate-600">
    Aucune ville. Lancez <code>python scripts/seed_villes.py</code>.
</div>
{% endif %}
{% endblock %}