{% load ads %}
<article class="{% if is_continuation %}mt-16 border-t-4 border-brand-900 pt-10{% endif %}" data-article="{{ article.pk }}">
  <nav class="mb-4 flex items-center gap-2 text-xs font-semibold text-slate-500" aria-label="Fil d'Ariane">
    <a href="{% url 'public:home' %}" class="hover:text-brand-700">Accueil</a> {% icon "chevron-right" "size-3" %}
    <a href="{{ article.categorie.get_absolute_url }}" class="text-signal-500 uppercase hover:underline">{{ article.categorie.nom }}</a>
  </nav>

  <header>
    <h1 class="text-3xl leading-tight font-extrabold md:text-[2.6rem]">{% if is_continuation %}<a href="{{ article.get_absolute_url }}" class="hover:text-brand-600">{{ article.titre }}</a>{% else %}{{ article.titre }}{% endif %}</h1>
    {% if article.resume %}<p class="mt-4 text-lg leading-relaxed font-medium text-slate-700 md:text-xl">{{ article.resume }}</p>{% endif %}
    <div class="mt-6 flex flex-wrap items-center justify-between gap-4 border-y border-slate-200 py-4">
      <div class="flex items-center gap-3">
        <span class="flex size-11 items-center justify-center rounded-full bg-brand-800 text-sm font-bold text-white">{{ article.auteur.initials }}</span>
        <div class="text-sm leading-tight">
          <p class="font-bold text-brand-900">Par {{ article.auteur.name }}</p>
          <p class="text-slate-500">
            <time datetime="{{ article.publie_le|date:'c' }}">{{ article.publie_le|date:"l d F Y à H:i" }}</time>
            {% if article.updated_at|date:"YmdHi" > article.publie_le|date:"YmdHi" %} · Mis à jour le {{ article.updated_at|date:"d/m/Y" }}{% endif %}
            · {{ article.reading_time }} min de lecture
          </p>
        </div>
      </div>
      {% with url=request.scheme|add:"://"|add:request.get_host|add:article.get_absolute_url %}
      <div class="flex items-center gap-1.5" aria-label="Partager">
        <a href="https://www.facebook.com/sharer/sharer.php?u={{ url|urlencode }}" target="_blank" rel="noopener" class="flex size-9 items-center justify-center rounded-full bg-slate-100 text-brand-800 hover:bg-brand-800 hover:text-white" aria-label="Partager sur Facebook">{% icon "facebook" "size-4" %}</a>
        <a href="https://twitter.com/intent/tweet?url={{ url|urlencode }}&text={{ article.titre|urlencode }}" target="_blank" rel="noopener" class="flex size-9 items-center justify-center rounded-full bg-slate-100 text-brand-800 hover:bg-brand-800 hover:text-white" aria-label="Partager sur X">{% icon "twitter" "size-4" %}</a>
        <a href="https://www.linkedin.com/sharing/share-offsite/?url={{ url|urlencode }}" target="_blank" rel="noopener" class="flex size-9 items-center justify-center rounded-full bg-slate-100 text-brand-800 hover:bg-brand-800 hover:text-white" aria-label="Partager sur LinkedIn">{% icon "linkedin" "size-4" %}</a>
        <a href="https://wa.me/?text={{ article.titre|urlencode }}%20{{ url|urlencode }}" target="_blank" rel="noopener" class="flex size-9 items-center justify-center rounded-full bg-slate-100 text-brand-800 hover:bg-brand-800 hover:text-white" aria-label="Partager sur WhatsApp">{% icon "share" "size-4" %}</a>
      </div>
      {% endwith %}
    </div>
  </header>

  {% if article.image_principale %}
  <figure class="mt-8">
    {% picture article.image_principale "lg" "w-full rounded-2xl" sizes="(min-width:1024px) 860px, 100vw" eager=True %}
    {% if article.legende_image or article.image_principale.credit %}
    <figcaption class="mt-2 flex flex-wrap justify-between gap-2 border-l-4 border-gold-400 pl-3 text-sm text-slate-600">
      <span>{{ article.legende_image }}</span>{% if article.image_principale.credit %}<span class="text-xs text-slate-400">{{ article.image_principale.credit }}</span>{% endif %}
    </figcaption>
    {% endif %}
  </figure>
  {% endif %}

  <div class="article-body mt-8">{{ article.contenu|safe }}</div>

  {% if gallery %}
  <section class="mt-10" x-data="{ open: false, i: 0, items: [{% for g in gallery %}{ src: '{{ g.media.variant_url|escapejs }}', full: '{{ g.media.url|escapejs }}', cap: '{{ g.legende|default:g.media.legende|escapejs }}' }{% if not forloop.last %},{% endif %}{% endfor %}] }">
    <h2 class="section-title mb-4 !text-lg">En images</h2>
    <ul class="grid grid-cols-2 gap-3 md:grid-cols-3">
      {% for g in gallery %}
      <li><button type="button" class="group block w-full overflow-hidden rounded-xl" @click="i = {{ forloop.counter0 }}; open = true">
        {% picture g.media "sm" "aspect-[4/3] w-full object-cover transition duration-500 group-hover:scale-105" sizes="(min-width:768px) 280px, 50vw" alt=g.legende %}
      </button>{% if g.legende %}<p class="mt-1 line-clamp-2 text-xs text-slate-500">{{ g.legende }}</p>{% endif %}</li>
      {% endfor %}
    </ul>
    <div x-cloak x-show="open" x-transition.opacity class="fixed inset-0 z-[70] flex flex-col items-center justify-center bg-brand-950/95 p-4" @keydown.escape.window="open = false" @keydown.arrow-right.window="i = (i + 1) % items.length" @keydown.arrow-left.window="i = (i - 1 + items.length) % items.length" role="dialog" aria-modal="true">
      <button type="button" class="absolute top-4 right-4 rounded-full bg-white/10 p-2 text-white hover:bg-white/20" @click="open = false" aria-label="Fermer">{% icon "x" "size-6" %}</button>
      <img :src="items[i].full" :alt="items[i].cap" class="max-h-[80vh] max-w-full rounded-lg">
      <p class="mt-3 max-w-2xl text-center text-sm text-brand-100" x-text="items[i].cap"></p>
      <div class="mt-4 flex gap-3">
        <button type="button" class="rounded-full bg-white/10 p-2 text-white hover:bg-white/20" @click="i = (i - 1 + items.length) % items.length" aria-label="Précédente">{% icon "chevron-left" %}</button>
        <span class="self-center text-sm text-brand-200" x-text="(i + 1) + ' / ' + items.length"></span>
        <button type="button" class="rounded-full bg-white/10 p-2 text-white hover:bg-white/20" @click="i = (i + 1) % items.length" aria-label="Suivante">{% icon "chevron-right" %}</button>
      </div>
    </div>
  </section>
  {% endif %}

  {% if tags %}
  <div class="mt-8 flex flex-wrap gap-2">{% for t in tags %}<a href="{{ t.get_absolute_url }}" class="rounded-full border border-slate-200 bg-white px-3 py-1 text-xs font-semibold text-brand-800 hover:border-brand-300 hover:bg-brand-50">#{{ t.nom }}</a>{% endfor %}</div>
  {% endif %}

  <div class="mt-8 flex flex-wrap items-center gap-3 rounded-2xl bg-white p-4 shadow-(--shadow-card)">
    <button type="button" data-like-url="{% url 'public:react' article.pk %}" class="group btn btn-secondary [&.is-liked]:border-signal-500 [&.is-liked]:bg-signal-50 [&.is-liked]:text-signal-600 {% if has_liked %}is-liked{% endif %}" {% if preview %}disabled{% endif %}>
      {% icon "heart" "size-5 group-[.is-liked]:fill-current" %} <span>J'apprécie</span> <span data-like-count class="font-extrabold">{{ likes }}</span>
    </button>
    <a href="#commentaires-{{ article.pk }}" class="btn btn-ghost">{% icon "chat" %} {{ comment_count }} commentaire{{ comment_count|pluralize }}</a>
  </div>

  {% if article.auteur.bio %}
  <aside class="mt-8 flex gap-4 rounded-2xl border-l-4 border-brand-800 bg-brand-50 p-5">
    <span class="flex size-14 shrink-0 items-center justify-center rounded-full bg-brand-800 text-lg font-bold text-white">{{ article.auteur.initials }}</span>
    <div><p class="font-bold text-brand-900">{{ article.auteur.name }}</p>{% if article.auteur.fonction %}<p class="text-xs font-semibold text-signal-500 uppercase">{{ article.auteur.fonction }}</p>{% endif %}<p class="mt-1 text-sm text-slate-600">{{ article.auteur.bio }}</p></div>
  </aside>
  {% endif %}

  {% ad_slot "article" css="mt-10" %}

  {% if similaires %}
  <section class="mt-12">
    <h2 class="section-title mb-5">À lire aussi</h2>
    <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">{% for a in similaires %}<c-article-card :article="a" show_excerpt="" />{% endfor %}</div>
  </section>
  {% endif %}

  {% include "public/_comments.html" %}
</article>

{% if not preview %}
<div hx-get="{% url 'public:article-next' article.pk %}" hx-trigger="revealed" hx-swap="outerHTML" class="py-10 text-center">
  <span class="htmx-indicator inline-flex items-center gap-2 text-sm font-semibold text-brand-700">Chargement de l'article suivant…</span>
</div>
{% endif %}