{% load ads %}
<aside class="space-y-8">
  {% include "public/_webtv.html" %}
  {% if populaires %}
  <section>
    <h2 class="section-title mb-4 !text-lg">Les plus lus</h2>
    <ol class="space-y-4">
      {% for a in populaires %}
      <li class="flex gap-4">
        <span class="text-3xl leading-none font-extrabold {% if forloop.first %}text-signal-500{% else %}text-brand-200{% endif %}">{{ forloop.counter }}</span>
        <c-article-card :article="a" variant="compact" />
      </li>
      {% endfor %}
    </ol>
  </section>
  {% endif %}
  {% ad_slot "sidebar" limit=2 css="rounded-xl bg-white p-2 shadow-(--shadow-card)" %}
  <section class="rounded-2xl bg-brand-900 p-5 text-white">
    <h2 class="text-lg font-extrabold !text-white">Restez informé</h2>
    <p class="mt-1 mb-4 text-sm text-brand-200">Recevez chaque semaine notre sélection d'articles.</p>
    {% include "public/_newsletter_form.html" with dark=True %}
  </section>
</aside>