{% extends "backoffice/base.html" %}
{% block page_title %}Commentaires{% endblock %}
{% block breadcrumb %}Audience <span class="mx-1 text-slate-300">/</span> <span class="font-semibold text-brand-900">Commentaires</span>{% endblock %}
{% block content %}
<c-page-header title="Modération des commentaires" subtitle="Les commentaires des lecteurs ne sont publiés qu'après validation." />

<nav class="-mx-4 mb-4 overflow-x-auto px-4 md:mx-0 md:px-0">
  <ul class="flex min-w-max gap-1 border-b border-slate-200">
    {% for key, label, count in tabs %}
    <li><a href="?statut={{ key }}" class="flex items-center gap-2 border-b-2 px-3 pt-1 pb-3 text-sm font-semibold {% if current == key %}border-brand-800 text-brand-900{% else %}border-transparent text-slate-500 hover:text-brand-800{% endif %}">
      {{ label }} <span class="rounded-full px-2 py-0.5 text-[11px] font-bold {% if key == 'en_attente' and count %}bg-gold-100 text-gold-700{% else %}bg-slate-100 text-slate-500{% endif %}">{{ count }}</span></a></li>
    {% endfor %}
  </ul>
</nav>

<form method="get" class="mb-4"><input type="hidden" name="statut" value="{{ current }}">
  <input type="search" name="q" value="{{ request.GET.q }}" placeholder="Rechercher dans les commentaires, auteurs, articles…" class="form-input" aria-label="Rechercher">
</form>

<form method="post" action="{% url 'engagement:comment-moderate' %}" x-data="{ n: 0 }" @change="n = $el.querySelectorAll('input[name=ids]:checked').length">
  {% csrf_token %}<input type="hidden" name="next" value="{{ request.get_full_path }}">
  <div class="card overflow-hidden">
    <div class="flex flex-wrap items-center gap-2 border-b border-slate-100 bg-slate-50/60 px-4 py-2.5">
      <label class="flex items-center gap-2 text-sm font-semibold text-slate-600"><input type="checkbox" class="form-checkbox" data-check-all> Tout</label>
      <span class="text-xs text-slate-400" x-text="n ? n + ' sélectionné(s)' : ''"></span>
      <div class="ml-auto flex flex-wrap gap-2" :class="!n && 'pointer-events-none opacity-40'">
        <button name="action" value="approve" class="btn btn-primary btn-sm">{% icon "check" %} Approuver</button>
        <button name="action" value="reject" class="btn btn-secondary btn-sm">Rejeter</button>
        <button name="action" value="spam" class="btn btn-secondary btn-sm">Indésirable</button>
        <button name="action" value="delete" class="btn btn-danger-ghost btn-sm">{% icon "trash" %} Supprimer</button>
      </div>
    </div>
    {% if page_obj.object_list %}
    <ul class="divide-y divide-slate-100">
      {% for c in page_obj %}
      <li class="flex gap-4 p-4 hover:bg-brand-50/30">
        <input type="checkbox" name="ids" value="{{ c.pk }}" class="form-checkbox mt-1" aria-label="Sélectionner">
        <span class="flex size-10 shrink-0 items-center justify-center rounded-full bg-brand-100 text-sm font-bold text-brand-800">{{ c.author_name|slice:":1"|upper }}</span>
        <div class="min-w-0 flex-1">
          <div class="flex flex-wrap items-center gap-x-2 gap-y-1 text-sm">
            <span class="font-bold text-brand-900">{{ c.author_name }}</span>
            <span class="text-slate-400">{{ c.author_email }}</span>
            <span class="badge {{ c.statut|status_class }}">{{ c.get_statut_display }}</span>
            <span class="text-xs text-slate-400">{{ c.created_at|date:"d/m/Y H:i" }}</span>
          </div>
          {% if c.parent %}<p class="mt-1 text-xs text-slate-500">En réponse à {{ c.parent.author_name }}</p>{% endif %}
          <p class="mt-2 text-sm whitespace-pre-line text-slate-700">{{ c.contenu }}</p>
          <p class="mt-2 text-xs text-slate-500">Sur <a href="{{ c.article.get_absolute_url }}" target="_blank" class="font-semibold text-brand-700 hover:underline">{{ c.article.titre|truncatechars:80 }}</a></p>
        </div>
        <div class="flex shrink-0 flex-col gap-1 sm:flex-row sm:items-start">
          {% if c.statut != "approuve" %}<button form="one-{{ c.pk }}" name="action" value="approve" class="btn btn-ghost btn-icon text-brand-700" title="Approuver">{% icon "check" "size-4" %}</button>{% endif %}
          {% if c.statut != "rejete" %}<button form="one-{{ c.pk }}" name="action" value="reject" class="btn btn-ghost btn-icon" title="Rejeter">{% icon "x" "size-4" %}</button>{% endif %}
        </div>
      </li>
      {% endfor %}
    </ul>
    {% else %}<c-empty icon="chat" title="Aucun commentaire ici">{% if current == "en_attente" %}Tout est modéré. Bravo !{% endif %}</c-empty>{% endif %}
  </div>
</form>
{% for c in page_obj %}
<form id="one-{{ c.pk }}" method="post" action="{% url 'engagement:comment-moderate' %}" class="hidden">{% csrf_token %}<input type="hidden" name="ids" value="{{ c.pk }}"><input type="hidden" name="next" value="{{ request.get_full_path }}"></form>
{% endfor %}
<div class="mt-5"><c-pagination :page="page_obj" label="commentaires" /></div>
{% endblock %}