{% extends "layouts/public.html" %}
{% block title %}{{ trans('starter.cs.listings.title') }} — {{ trans('starter.cs.title') }}{% endblock %}
{% block content %}
<div class="max-w-4xl mx-auto py-12 px-4">
  <div class="mb-8">
    <a href="/communes-sejours" class="text-sm text-slate-500 hover:underline">← Accueil</a>
    <h1 class="text-3xl font-bold text-slate-900 mt-2">{{ trans('starter.cs.listings.title') }}</h1>
    <p class="text-slate-600 mt-1">Découvrez les hébergements disponibles dans nos communes.</p>
  </div>

  {% if hebergements %}
  <div class="grid gap-6 sm:grid-cols-2">
    {% for h in hebergements %}
    <div class="bg-white border border-slate-200 rounded-lg overflow-hidden">
      <div class="bg-slate-100 h-40 flex items-center justify-center text-slate-400 text-sm">
        Image à venir
      </div>
      <div class="p-5">
        <p class="text-xs font-semibold text-slate-500 uppercase mb-1">{{ h.commune }}</p>
        <h2 class="text-xl font-bold text-slate-900 mb-2">{{ h.titre }}</h2>
        {% if h.capacite %}
        <p class="text-sm text-slate-500 mb-2">{{ trans('starter.cs.listing.capacity') }} : {{ h.capacite }} personne{% if h.capacite > 1 %}s{% endif %}</p>
        {% endif %}
        {% if h.description %}
        <p class="text-slate-700 text-sm mb-4">{{ h.description }}</p>
        {% endif %}
        <a href="/communes-sejours/hebergements/{{ h.slug }}"
           class="inline-block text-sm bg-slate-800 text-white px-4 py-2 rounded hover:bg-slate-700">
          Voir la fiche
        </a>
      </div>
    </div>
    {% endfor %}
  </div>
  {% else %}
  <div class="bg-white border border-slate-200 rounded-lg p-8 text-center text-slate-500">
    {{ trans('starter.cs.listings.empty') }}
  </div>
  {% endif %}
</div>
{% endblock %}