{% extends "backoffice/base.html" %}
{% block page_title %}Newsletter{% endblock %}
{% block breadcrumb %}Audience <span class="mx-1 text-slate-300">/</span> <span class="font-semibold text-brand-900">Newsletter</span>{% endblock %}
{% block content %}
<c-page-header title="Abonnés à la newsletter" subtitle="{{ active_count }} abonné{{ active_count|pluralize }} actif{{ active_count|pluralize }}.">
  <c-slot name="toolbar"><c-button variant="secondary" href="?export=csv" icon="download">Exporter (CSV)</c-button></c-slot>
</c-page-header>
<form method="get" class="mb-4"><input type="search" name="q" value="{{ request.GET.q }}" placeholder="Rechercher une adresse…" class="form-input" aria-label="Rechercher"></form>
<div class="card overflow-hidden">
  {% if page_obj.object_list %}
  <div class="table-wrap"><table class="table">
    <thead><tr><th>Email</th><th>Statut</th><th>Inscription</th><th class="text-right">Actions</th></tr></thead>
    <tbody>
    {% for s in page_obj %}
      <tr>
        <td class="font-medium text-brand-900">{{ s.email }}</td>
        <td>{% if s.is_active %}<span class="badge badge-blue">Actif</span>{% else %}<span class="badge badge-neutral">Désinscrit</span>{% endif %}</td>
        <td class="text-sm text-slate-500">{{ s.created_at|date:"d/m/Y" }}</td>
        <td><div class="flex justify-end gap-1">
          <c-post-button action="{% url 'contact:subscriber-toggle' s.pk %}" variant="ghost">{% if s.is_active %}Désactiver{% else %}Réactiver{% endif %}</c-post-button>
          <c-post-button action="{% url 'contact:subscriber-delete' s.pk %}" variant="ghost" size="" class="btn-icon text-signal-600 hover:bg-signal-50" icon="trash" title="Supprimer" confirm="Supprimer {{ s.email }} de la liste ?" confirm_label="Supprimer" />
        </div></td>
      </tr>
    {% endfor %}
    </tbody>
  </table></div>
  {% else %}<c-empty icon="mail" title="Aucun abonné" />{% endif %}
</div>
<div class="mt-5"><c-pagination :page="page_obj" label="abonnés" /></div>
{% endblock %}