{% extends "public/base.html" %}
{% block title %}Annonces et communiqués · {{ site.site_name }}{% endblock %}
{% block content %}
<div class="mx-auto max-w-7xl px-4 lg:px-6">
  <header class="mb-8 border-b border-slate-200 pb-6">
    <p class="kicker">Annonces</p>
    <h1 class="mt-1 text-3xl font-extrabold md:text-4xl">Annonces &amp; communiqués</h1>
    <p class="mt-2 max-w-3xl text-slate-600">Communiqués officiels, avis, appels d'offres, recrutements et événements.</p>
  </header>
  <nav class="mb-8 flex flex-wrap gap-2" aria-label="Filtrer par type">
    <a href="?" class="rounded-full px-4 py-1.5 text-sm font-semibold {% if not current_type %}bg-brand-900 text-white{% else %}bg-white text-brand-800 ring-1 ring-slate-200 hover:ring-brand-300{% endif %}">Toutes</a>
    {% for key, label in types %}<a href="?type={{ key }}" class="rounded-full px-4 py-1.5 text-sm font-semibold {% if current_type == key %}bg-brand-900 text-white{% else %}bg-white text-brand-800 ring-1 ring-slate-200 hover:ring-brand-300{% endif %}">{{ label }}</a>{% endfor %}
  </nav>
  {% if page_obj.object_list %}
    <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">{% for a in page_obj %}<c-annonce-card :annonce="a" />{% endfor %}</div>
    <div class="mt-10"><c-pagination :page="page_obj" label="annonces" /></div>
  {% else %}
    <div class="card"><c-empty icon="megaphone" title="Aucune annonce pour le moment" /></div>
  {% endif %}
</div>
{% endblock %}