{% extends "public/base.html" %}
{% block title %}{{ annonce.titre }} · {{ site.site_name }}{% endblock %}
{% block meta %}<meta name="description" content="{{ annonce.excerpt|truncatechars:160 }}">{% if preview %}<meta name="robots" content="noindex">{% endif %}{% endblock %}
{% block content %}
<div class="mx-auto max-w-7xl px-4 lg:px-6">
  <div class="grid gap-10 lg:grid-cols-[minmax(0,1fr)_20rem]">
    <article class="min-w-0">
      <nav class="mb-4 flex items-center gap-2 text-xs font-semibold text-slate-500"><a href="{% url 'public:annonces' %}" class="hover:text-brand-700">Annonces</a> {% icon "chevron-right" "size-3" %} <span class="text-signal-500 uppercase">{{ annonce.get_type_display }}</span></nav>
      <h1 class="text-3xl leading-tight font-extrabold md:text-4xl">{{ annonce.titre }}</h1>
      <div class="mt-4 flex flex-wrap items-center gap-3 text-sm text-slate-500">
        {% if annonce.annonceur %}<span class="font-semibold text-brand-900">{{ annonce.annonceur }}</span> ·{% endif %}
        <span>Publiée le {{ annonce.publie_le|date:"d F Y" }}</span>
        {% if annonce.is_expired %}<span class="badge badge-neutral">Expirée</span>{% elif annonce.date_limite %}<span class="badge badge-red">Date limite : {{ annonce.date_limite|date:"d F Y" }}</span>{% endif %}
      </div>
      {% if annonce.image_principale %}
        <figure class="mt-6">{% picture annonce.image_principale "lg" "w-full rounded-2xl" sizes="(min-width:1024px) 860px, 100vw" eager=True %}{% if annonce.legende_image %}<figcaption class="mt-2 border-l-4 border-gold-400 pl-3 text-sm text-slate-600">{{ annonce.legende_image }}</figcaption>{% endif %}</figure>
      {% endif %}
      {% if annonce.resume %}<p class="mt-6 text-lg font-medium text-slate-700">{{ annonce.resume }}</p>{% endif %}
      <div class="article-body mt-6">{{ annonce.contenu|safe }}</div>
      {% if annonce.piece_jointe or annonce.contact %}
      <div class="mt-8 grid gap-4 sm:grid-cols-2">
        {% if annonce.piece_jointe %}
        <a href="{{ annonce.piece_jointe.url }}" target="_blank" rel="noopener" class="card flex items-center gap-4 p-4 hover:ring-2 hover:ring-brand-300">
          <span class="flex size-12 items-center justify-center rounded-xl bg-brand-800 text-white">{% icon "download" %}</span>
          <span class="min-w-0"><span class="block font-bold text-brand-900">Télécharger le document</span><span class="block truncate text-xs text-slate-500">{{ annonce.piece_jointe.extension|upper }} · {{ annonce.piece_jointe.taille|filesizeformat }}</span></span>
        </a>
        {% endif %}
        {% if annonce.contact %}
        <div class="card flex items-center gap-4 p-4"><span class="flex size-12 items-center justify-center rounded-xl bg-gold-100 text-gold-700">{% icon "phone" %}</span><span><span class="block text-xs font-semibold text-slate-500 uppercase">Contact</span><span class="block font-bold text-brand-900">{{ annonce.contact }}</span></span></div>
        {% endif %}
      </div>
      {% endif %}
    </article>
    <aside class="space-y-6">
      {% if others %}
      <section class="card p-5"><h2 class="section-title mb-4 !text-lg">Autres annonces</h2>
        <ul class="divide-y divide-slate-100">{% for a in others %}<li class="py-3"><a href="{{ a.get_absolute_url }}" class="block"><span class="text-xs font-bold text-signal-500 uppercase">{{ a.get_type_display }}</span><span class="line-clamp-2 font-semibold text-brand-900 hover:text-brand-600">{{ a.titre }}</span></a></li>{% endfor %}</ul>
      </section>
      {% endif %}
      {% include "public/_webtv.html" %}
    </aside>
  </div>
</div>
{% endblock %}