{% extends "public/base.html" %}{% load ads %}
{% block title %}{{ site.site_name }} — {{ site.slogan }}{% endblock %}

{% block content %}
<div class="mx-auto max-w-7xl px-4 lg:px-6">

  {# ---------- À la une ---------- #}
  {% if a_la_une %}
  <section class="grid gap-6 pt-2 lg:grid-cols-3" aria-label="À la une">
    <div class="lg:col-span-2" x-data="{ i: 0, n: {{ a_la_une|length }}, t: null }" x-init="t = setInterval(() => i = (i + 1) % n, 7000)">
      <div class="relative h-full min-h-[24rem] md:min-h-[30rem]">
        {% for a in a_la_une %}
        <div class="absolute inset-0 transition-opacity duration-700" :class="i === {{ forloop.counter0 }} ? 'opacity-100 z-10' : 'opacity-0 z-0 pointer-events-none'" {% if not forloop.first %}x-cloak{% endif %}>
          <c-article-card :article="a" variant="overlay" class="h-full" eager="{% if forloop.first %}1{% endif %}" />
        </div>
        {% endfor %}
        {% if a_la_une|length > 1 %}
        <div class="absolute right-5 bottom-5 z-20 flex gap-1.5">
          {% for a in a_la_une %}<button type="button" @click="i = {{ forloop.counter0 }}" class="h-1.5 rounded-full transition-all" :class="i === {{ forloop.counter0 }} ? 'w-8 bg-gold-400' : 'w-3 bg-white/50 hover:bg-white'" aria-label="Article {{ forloop.counter }}"></button>{% endfor %}
        </div>
        {% endif %}
      </div>
    </div>
    <div class="flex flex-col rounded-2xl border border-slate-200/80 bg-white p-5 shadow-(--shadow-card)">
      <h2 class="section-title mb-4 text-lg">Dernières minutes</h2>
      <ul class="flex-1 divide-y divide-slate-100">
        {% for a in derniers|slice:":5" %}<li class="py-3 first:pt-0"><c-article-card :article="a" variant="compact" /></li>{% endfor %}
      </ul>
      <a href="{% url 'public:articles' %}" class="btn btn-secondary btn-sm mt-3">Toute l'actualité {% icon "arrow-right" %}</a>
    </div>
  </section>
  {% endif %}

  <div class="mt-12 grid gap-10 lg:grid-cols-[minmax(0,1fr)_20rem]">
    <div class="min-w-0 space-y-14">

      {# ---------- Dernières actualités ---------- #}
      <section>
        <div class="mb-6 flex items-end justify-between"><h2 class="section-title">L'actualité</h2><a href="{% url 'public:articles' %}" class="text-sm font-bold text-brand-700 hover:underline">Voir tout</a></div>
        <div class="grid gap-6 sm:grid-cols-2 xl:grid-cols-3">
          {% for a in derniers|slice:"5:11" %}<c-article-card :article="a" />{% empty %}<p class="text-slate-500">Aucun article publié pour le moment.</p>{% endfor %}
        </div>
      </section>

      {% ad_slot "article" css="mx-auto max-w-3xl" %}

      {# ---------- Investigations ---------- #}
      {% if investigations %}
      <section class="-mx-4 bg-brand-900 px-4 py-10 sm:mx-0 sm:rounded-3xl sm:px-8">
        <div class="mb-6 flex items-center gap-3"><span class="h-6 w-1.5 rounded-full bg-gold-400"></span><h2 class="text-2xl font-extrabold text-white">{{ site.investigation_title }}</h2></div>
        <div class="grid gap-6 md:grid-cols-3">
          {% for a in investigations %}
          <article class="group relative">
            <div class="aspect-[16/10] overflow-hidden rounded-xl bg-brand-800">{% picture a.image_principale "md" "size-full object-cover transition duration-500 group-hover:scale-105" sizes="(min-width:768px) 33vw, 100vw" %}</div>
            <p class="mt-3 text-xs font-bold tracking-widest text-gold-400 uppercase">{{ a.categorie.nom }}</p>
            <h3 class="mt-1 line-clamp-3 text-lg leading-snug font-bold text-white group-hover:text-gold-300"><a href="{{ a.get_absolute_url }}" class="after:absolute after:inset-0">{{ a.titre }}</a></h3>
          </article>
          {% endfor %}
        </div>
      </section>
      {% endif %}

      {# ---------- Par rubrique ---------- #}
      {% for cat, items in rubriques %}{% if items %}
      <section>
        <div class="mb-6 flex items-end justify-between"><h2 class="section-title">{{ cat.nom }}</h2><a href="{{ cat.get_absolute_url }}" class="text-sm font-bold text-brand-700 hover:underline">Toute la rubrique</a></div>
        <div class="grid gap-6 md:grid-cols-2">
          <c-article-card :article="items.0" />
          <div class="space-y-5">{% for a in items|slice:"1:" %}<c-article-card :article="a" variant="horizontal" />{% endfor %}</div>
        </div>
      </section>
      {% endif %}{% endfor %}

      {# ---------- Annonces ---------- #}
      {% if annonces %}
      <section>
        <div class="mb-6 flex items-end justify-between"><h2 class="section-title">Annonces &amp; communiqués</h2><a href="{% url 'public:annonces' %}" class="text-sm font-bold text-brand-700 hover:underline">Toutes les annonces</a></div>
        <div class="grid gap-5 sm:grid-cols-2">{% for a in annonces %}<c-annonce-card :annonce="a" />{% endfor %}</div>
      </section>
      {% endif %}
    </div>

    <div>{% include "public/_sidebar.html" %}</div>
  </div>
</div>
{% endblock %}