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

{% if form.non_field_errors %}
<div class="bg-red-50 border border-red-200 text-red-700 rounded px-4 py-3 mb-4">
    {% for error in form.non_field_errors %}
        <p>{{ error }}</p>
    {% endfor %}
</div>
{% endif %}

<form method="post" action="{{ action }}" class="bg-white shadow rounded p-6 space-y-5">
    <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">Prénom</label>
            <input type="text" name="prenom" value="{{ form.value('prenom') }}" required
                class="mt-1 w-full border border-slate-300 rounded px-3 py-2">
            {% if form.has_error('prenom') %}<p class="text-sm text-red-600 mt-1">{{ form.error('prenom') }}</p>{% endif %}
        </div>

        <div>
            <label class="block text-sm font-medium text-slate-700">Nom</label>
            <input type="text" name="nom" value="{{ form.value('nom') }}" required
                class="mt-1 w-full border border-slate-300 rounded px-3 py-2">
            {% if form.has_error('nom') %}<p class="text-sm text-red-600 mt-1">{{ form.error('nom') }}</p>{% endif %}
        </div>
    </div>

    <div class="grid md:grid-cols-2 gap-5">
        <div>
            <label class="block text-sm font-medium text-slate-700">Email</label>
            <input type="email" name="email" value="{{ form.value('email') }}" required
                class="mt-1 w-full border border-slate-300 rounded px-3 py-2">
            {% if form.has_error('email') %}<p class="text-sm text-red-600 mt-1">{{ form.error('email') }}</p>{% endif %}
        </div>

        <div>
            <label class="block text-sm font-medium text-slate-700">Téléphone</label>
            <input type="text" name="telephone" value="{{ form.value('telephone') }}"
                class="mt-1 w-full border border-slate-300 rounded px-3 py-2">
            {% if form.has_error('telephone') %}<p class="text-sm text-red-600 mt-1">{{ form.error('telephone') }}</p>{% endif %}
        </div>
    </div>

    <div>
        <label class="block text-sm font-medium text-slate-700">Ville</label>
        <select name="ville_id" class="mt-1 w-full border border-slate-300 rounded px-3 py-2">
            <option value="">Sans ville</option>
            {% for ville in villes %}
                <option value="{{ ville.VilleId }}" {% if form.value('ville_id')|string == ville.VilleId|string %}selected{% endif %}>
                    {{ ville.Nom }}{% if ville.CodePostal %} ({{ ville.CodePostal }}){% endif %}
                </option>
            {% endfor %}
        </select>
        {% if form.has_error('ville_id') %}<p class="text-sm text-red-600 mt-1">{{ form.error('ville_id') }}</p>{% endif %}
    </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="/contacts" class="px-4 py-2 rounded border border-slate-300 text-slate-700 hover:bg-slate-50">
            Annuler
        </a>
    </div>
</form>
{% endblock %}