{% 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">Contacts</p>
        <h1 class="text-2xl font-bold text-slate-900 mt-1">Carnet de contacts</h1>
    </div>
    <a href="/contacts/new" class="bg-orange-600 text-white px-4 py-2 rounded hover:bg-orange-700">
        Nouveau contact
    </a>
</div>

{% if contacts %}
<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">Nom</th>
                <th class="px-4 py-3 text-left text-sm font-semibold text-slate-600">Email</th>
                <th class="px-4 py-3 text-left text-sm font-semibold text-slate-600">Ville</th>
                <th class="px-4 py-3 text-right text-sm font-semibold text-slate-600">Actions</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-slate-100">
            {% for contact in contacts %}
            <tr class="hover:bg-slate-50">
                <td class="px-4 py-3">
                    <a href="/contacts/{{ contact.ContactId }}" class="font-medium text-slate-900 hover:underline">
                        {{ contact.Prenom }} {{ contact.Nom }}
                    </a>
                    {% if contact.Telephone %}
                    <div class="text-sm text-slate-500">{{ contact.Telephone }}</div>
                    {% endif %}
                </td>
                <td class="px-4 py-3 text-slate-700">{{ contact.Email }}</td>
                <td class="px-4 py-3 text-slate-700">
                    {% if contact.VilleNom %}
                        {{ contact.VilleNom }}
                        {% if contact.VilleCodePostal %}
                            <span class="text-slate-500">({{ contact.VilleCodePostal }})</span>
                        {% endif %}
                    {% else %}
                        <span class="text-slate-400">Sans ville</span>
                    {% endif %}
                </td>
                <td class="px-4 py-3 text-right space-x-2">
                    <a href="/contacts/{{ contact.ContactId }}/edit" class="text-sm text-orange-700 hover:underline">Modifier</a>
                    <form method="post" action="/contacts/{{ contact.ContactId }}/delete" style="display:inline">
                        <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                        <button type="submit" class="text-sm text-red-600 hover:underline">Supprimer</button>
                    </form>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% else %}
<div class="bg-white shadow rounded p-6 text-slate-600">
    Aucun contact pour l'instant.
</div>
{% endif %}
{% endblock %}