{% extends "layouts/public.html" %}
{% block title %}{{ hebergement.titre }} — {{ trans('starter.cs.title') }}{% endblock %}
{% block content %}
<div class="max-w-3xl mx-auto py-12 px-4">
  <div class="mb-6">
    <a href="/communes-sejours/hebergements" class="text-sm text-slate-500 hover:underline">← {{ trans('starter.cs.listing.back') }}</a>
    <p class="text-xs font-semibold text-slate-500 uppercase mt-3">{{ hebergement.commune }}</p>
    <h1 class="text-3xl font-bold text-slate-900 mt-1">{{ hebergement.titre }}</h1>
  </div>

  <div class="bg-slate-100 rounded-lg h-56 flex items-center justify-center text-slate-400 text-sm mb-6">
    Photo principale à venir
  </div>

  <div class="bg-white border border-slate-200 rounded-lg p-6 mb-6">
    <dl class="grid sm:grid-cols-2 gap-4 text-sm">
      {% if hebergement.adresse %}
      <div>
        <dt class="text-slate-500 font-medium">{{ trans('starter.cs.listing.address') }}</dt>
        <dd class="text-slate-800 mt-1">{{ hebergement.adresse }}</dd>
      </div>
      {% endif %}
      {% if hebergement.capacite %}
      <div>
        <dt class="text-slate-500 font-medium">{{ trans('starter.cs.listing.capacity') }}</dt>
        <dd class="text-slate-800 mt-1">
          {{ hebergement.capacite }} personne{% if hebergement.capacite > 1 %}s{% endif %}
        </dd>
      </div>
      {% endif %}
      {% if hebergement.proprietaire %}
      <div>
        <dt class="text-slate-500 font-medium">{{ trans('starter.cs.listing.owner') }}</dt>
        <dd class="text-slate-800 mt-1">{{ hebergement.proprietaire }}</dd>
      </div>
      {% endif %}
    </dl>
  </div>

  {% if hebergement.description %}
  <div class="bg-white border border-slate-200 rounded-lg p-6 mb-6">
    <h2 class="font-semibold text-slate-800 mb-2">Description</h2>
    <p class="text-slate-700">{{ hebergement.description }}</p>
  </div>
  {% endif %}

  <div class="bg-slate-50 border border-slate-200 rounded-lg p-6 mb-8">
    <div class="text-slate-400 text-sm text-center py-2">Galerie photos à venir</div>
  </div>

  <div class="bg-white border border-slate-200 rounded-lg p-6" id="demande">
    <h2 class="text-xl font-semibold text-slate-900 mb-1">{{ trans('starter.cs.form.title') }}</h2>
    <p class="text-sm text-slate-500 mb-5">
      Remplissez ce formulaire pour soumettre une demande.
      Aucun engagement ne sera pris avant retour du propriétaire.
    </p>

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

    <form method="post" action="/communes-sejours/hebergements/{{ hebergement.slug }}/demande"
          class="space-y-4">
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}">

      <div class="grid sm:grid-cols-2 gap-4">
        <div>
          <label class="block text-sm font-medium text-slate-700">{{ trans('starter.cs.form.nom') }} <span class="text-red-500">*</span></label>
          <input type="text" name="nom" value="{{ form.value('nom') or '' }}" required
                 class="mt-1 w-full border border-slate-300 rounded px-3 py-2 text-sm">
          {% if form.has_error('nom') %}<p class="text-xs text-red-600 mt-1">{{ form.error('nom') }}</p>{% endif %}
        </div>

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

      <div class="grid sm:grid-cols-2 gap-4">
        <div>
          <label class="block text-sm font-medium text-slate-700">{{ trans('starter.cs.form.phone') }}</label>
          <input type="tel" name="telephone" value="{{ form.value('telephone') or '' }}"
                 class="mt-1 w-full border border-slate-300 rounded px-3 py-2 text-sm">
          {% if form.has_error('telephone') %}<p class="text-xs text-red-600 mt-1">{{ form.error('telephone') }}</p>{% endif %}
        </div>

        <div>
          <label class="block text-sm font-medium text-slate-700">{{ trans('starter.cs.form.people') }} <span class="text-red-500">*</span></label>
          <input type="number" name="nombre_personnes" value="{{ form.value('nombre_personnes') or '' }}"
                 min="1" max="99" required
                 class="mt-1 w-full border border-slate-300 rounded px-3 py-2 text-sm">
          {% if form.has_error('nombre_personnes') %}<p class="text-xs text-red-600 mt-1">{{ form.error('nombre_personnes') }}</p>{% endif %}
        </div>
      </div>

      <div class="grid sm:grid-cols-2 gap-4">
        <div>
          <label class="block text-sm font-medium text-slate-700">{{ trans('starter.cs.form.arrival') }} <span class="text-red-500">*</span></label>
          <input type="date" name="date_arrivee" value="{{ form.value('date_arrivee') or '' }}" required
                 class="mt-1 w-full border border-slate-300 rounded px-3 py-2 text-sm">
          {% if form.has_error('date_arrivee') %}<p class="text-xs text-red-600 mt-1">{{ form.error('date_arrivee') }}</p>{% endif %}
        </div>

        <div>
          <label class="block text-sm font-medium text-slate-700">{{ trans('starter.cs.form.departure') }} <span class="text-red-500">*</span></label>
          <input type="date" name="date_depart" value="{{ form.value('date_depart') or '' }}" required
                 class="mt-1 w-full border border-slate-300 rounded px-3 py-2 text-sm">
          {% if form.has_error('date_depart') %}<p class="text-xs text-red-600 mt-1">{{ form.error('date_depart') }}</p>{% endif %}
        </div>
      </div>

      <div>
        <label class="block text-sm font-medium text-slate-700">{{ trans('starter.cs.form.message') }}</label>
        <textarea name="message" rows="4"
                  class="mt-1 w-full border border-slate-300 rounded px-3 py-2 text-sm">{{ form.value('message') or '' }}</textarea>
        {% if form.has_error('message') %}<p class="text-xs text-red-600 mt-1">{{ form.error('message') }}</p>{% endif %}
      </div>

      <div>
        <button type="submit"
                class="bg-slate-800 text-white px-5 py-2 rounded hover:bg-slate-700 text-sm">
          {{ trans('starter.cs.form.submit') }}
        </button>
      </div>
    </form>
  </div>

  <div class="mt-6">
    <a href="/communes-sejours/hebergements" class="text-slate-600 hover:underline text-sm">
      ← {{ trans('starter.cs.listing.back') }}
    </a>
  </div>
</div>
{% endblock %}