{% extends 'panel/base.html' %}
{% load listing %}

{% block panel_title %}Blog · Komentarze{% endblock %}
{% block heading %}Blog · Komentarze{% endblock %}
{% block subheading %}
  <p class="text-sm text-slate-500 dark:text-slate-400">
    Komentarze pod wpisami.
    {% if pending %}Oczekuje na decyzje: {{ pending }}.{% endif %}
  </p>
{% endblock %}

{% block content %}
<form method="get" class="flex flex-wrap gap-2">
  <input class="input max-w-xs" type="search" name="q" value="{{ query }}" placeholder="Szukaj w treści, podpisie i wpisie">
  <select class="input max-w-[12rem]" name="status">
    <option value="">Każdy status</option>
    {% for value, label in statuses %}
      <option value="{{ value }}" {% if value == status %}selected{% endif %}>{{ label }}</option>
    {% endfor %}
  </select>
  <button class="btn-ghost" type="submit">Filtruj</button>
  {% if query or status %}<a class="btn-ghost" href="{% url 'panel:blog_comments:index' %}">Wyczyść</a>{% endif %}
</form>

{% comment %}Jeden formularz na cała tabelę - moderacja zbiorcza idzie do
   widoku "bulk", a przyciski wiersza podmieniają adres atrybutem
   formaction. Status wiersza niesie sam przycisk (name/value), bo
   ukrytego pola nie da się już dać każdemu wierszowi osobno.{% endcomment %}
<form method="post" action="{% url 'panel:blog_comments:bulk' %}" data-bulk data-no-guard class="space-y-4">
  {% csrf_token %}
  <input type="hidden" name="next" value="{{ request.get_full_path }}">

  <section class="card overflow-hidden">
    <div class="overflow-x-auto">
        <table class="table">
          <thead class="bg-slate-50 dark:bg-slate-900/60">
            <tr>
              <th class="th w-10">{% include 'panel/partials/check-all.html' %}</th>
              <th class="th">{% sort_header 'autor' 'Autor' %}</th>
              <th class="th">Komentarz</th>
              <th class="th">{% sort_header 'wpis' 'Wpis' %}</th>
              <th class="th">{% sort_header 'status' 'Status' %}</th>
              <th class="th">{% sort_header 'dodano' 'Dodano' %}</th>
              <th class="th text-right">Akcje</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-slate-100 dark:divide-slate-800">
          {% for comment in page_obj %}
            <tr class="hover:bg-slate-50 dark:hover:bg-slate-800/50">
              <td class="td">{% include 'panel/partials/check.html' with value=comment.pk label=comment.display_name %}</td>
              <td class="td">
                <span class="block font-medium">{{ comment.display_name }}</span>
                {% if comment.email %}<span class="text-xs text-slate-400">{{ comment.email }}</span>{% endif %}
              </td>
              <td class="td max-w-md"><span class="block text-slate-600 dark:text-slate-300">{{ comment.content|truncatechars:160 }}</span></td>
              <td class="td">
                <a class="hover:underline" href="{{ comment.post.get_absolute_url }}">{{ comment.post.title }}</a>
              </td>
              <td class="td">
                {% if comment.status == 'approved' %}
                  <span class="badge bg-brand-100 text-brand-800 dark:bg-brand-950 dark:text-brand-200">zatwierdzony</span>
                {% elif comment.status == 'spam' %}
                  <span class="badge bg-red-100 text-red-800 dark:bg-red-950 dark:text-red-200">spam</span>
                {% else %}
                  <span class="badge bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-200">oczekuje</span>
                {% endif %}
              </td>
              <td class="td whitespace-nowrap">{{ comment.created_at|date:"d.m.Y H:i" }}</td>
              <td class="td">
                <div class="flex justify-end gap-2">
                  {% if comment.status != 'approved' %}
                    <button class="btn-ghost !px-3 !py-1 text-xs" type="submit" name="status" value="approved"
                            formaction="{% url 'panel:blog_comments:status' comment.pk %}">Zatwierdź</button>
                  {% endif %}
                  {% if comment.status != 'spam' %}
                    <button class="btn-ghost !px-3 !py-1 text-xs" type="submit" name="status" value="spam"
                            formaction="{% url 'panel:blog_comments:status' comment.pk %}">Spam</button>
                  {% endif %}
                  <button class="btn-danger !px-3 !py-1 text-xs" type="submit"
                          formaction="{% url 'panel:blog_comments:delete' comment.pk %}"
                          data-confirm="Usunąć komentarz od {{ comment.display_name }}?">Usuń</button>
                </div>
              </td>
            </tr>
          {% empty %}
            {% url 'panel:blog_settings:index' as create_url %}
            {% include 'panel/partials/empty.html' with colspan=6 url=create_url action="Ustawienia bloga" title="Nie ma jeszcze żadnego komentarza." hint="Komentarze piszą czytelnicy pod wpisem - tutaj będziesz je zatwierdzać i odsiewać spam. Jeśli formularza pod wpisem nie widać, włącz komentarze w ustawieniach bloga." %}
          {% endfor %}
        </tbody>
      </table>
    </div>

    {% include 'panel/partials/pagination.html' %}
  </section>

  {% if page_obj %}
    <section class="card">
      <div class="card-body flex flex-wrap items-center gap-2">
        <span class="mr-2 text-sm text-slate-500 dark:text-slate-400" data-bulk-count>Zaznacz wiersze, żeby wykonać akcje na kilku naraz.</span>
        <button class="btn-ghost" type="submit" name="action" value="approved" data-bulk-action disabled>Zatwierdź</button>
        <button class="btn-ghost" type="submit" name="action" value="pending" data-bulk-action disabled>Cofnij do oczekujących</button>
        <button class="btn-ghost" type="submit" name="action" value="spam" data-bulk-action disabled>Spam</button>
        <button class="btn-danger" type="submit" name="action" value="delete" data-bulk-action disabled
                data-confirm="Usunąć zaznaczone komentarze?">Usuń zaznaczone</button>
      </div>
    </section>
  {% endif %}
</form>
{% endblock %}