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

{% block panel_title %}Pułapki antyspamowe{% endblock %}
{% block heading %}Pułapki antyspamowe{% endblock %}
{% block subheading %}<p class="text-sm text-slate-500 dark:text-slate-400">Reguły chroniące formularze serwisu i lista zgłoszeń, które zatrzymały.</p>{% endblock %}

{% block actions %}
{% if total %}
  <form method="post" action="{% url 'panel:journal:traps_clear' %}"
        data-confirm="Usunąć wszystkie ślady zatrzymanych zgłoszeń?">
    {% csrf_token %}
    <button class="btn-danger" type="submit">Wyczyść listę</button>
  </form>
{% endif %}
{% endblock %}

{% block content %}

<section class="grid grid-cols-2 gap-4">
  <div class="card"><div class="card-body"><p class="text-xs uppercase text-slate-400">Zatrzymane razem</p><p class="text-2xl font-semibold">{{ total }}</p></div></div>
  <div class="card"><div class="card-body"><p class="text-xs uppercase text-slate-400">W ostatnich 7 dniach</p><p class="text-2xl font-semibold">{{ last_week }}</p></div></div>
</section>

<form method="post" novalidate class="max-w-2xl space-y-4">
  {% csrf_token %}

  {% for item in groups %}
    <section class="card">
      <div class="card-body space-y-4">
        <div class="space-y-1">
          <h2 class="text-sm font-semibold text-slate-900 dark:text-slate-100">{{ item.group.title }}</h2>
          {% if item.group.description %}<p class="help">{{ item.group.description }}</p>{% endif %}
        </div>
        <div class="{{ item.group.grid_class }}">
          {% for field in item.fields %}{% include 'panel/partials/field.html' %}{% endfor %}
        </div>
        {% if item.group.note %}
          <p class="help border-t border-slate-200 pt-3 dark:border-slate-800">{{ item.group.note }}</p>
        {% endif %}
      </div>
    </section>
  {% endfor %}

  <div class="card save-bar">
    <div class="card-body">
      {% include "panel/partials/dirty-note.html" %}
      <button class="btn-primary" type="submit">Zapisz ustawienia</button>
    </div>
  </div>
</form>

<form method="get" class="flex flex-wrap items-end gap-2">
  <div class="w-56">{{ filters.form }}</div>
  <div class="w-56">{{ filters.reason }}</div>
  <button class="btn-ghost" type="submit">Filtruj</button>
  <a class="btn-ghost" href="{% url 'panel:journal:traps' %}">Wyczyść filtry</a>
</form>

<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">Kiedy</th>
          <th class="th">Formularz</th>
          <th class="th">Powód</th>
          <th class="th">Nadawca</th>
          <th class="th">Fragment</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-slate-100 dark:divide-slate-800">
        {% for hit in page_obj %}
          <tr class="hover:bg-slate-50 dark:hover:bg-slate-800/50">
            <td class="td whitespace-nowrap">{{ hit.created_at|date:"d.m.Y H:i:s" }}</td>
            <td class="td">{{ hit.get_form_display }}</td>
            <td class="td">
              <span class="badge {{ hit.badge_class }}">{{ hit.get_reason_display }}</span>
              {% if hit.detail %}<span class="mt-1 block text-xs text-slate-400">{{ hit.detail }}</span>{% endif %}
            </td>
            <td class="td">
              <span class="block">{{ hit.email|default:"-" }}</span>
              {% if hit.ip %}<span class="text-xs text-slate-400">{{ hit.ip }}</span>{% endif %}
            </td>
            <td class="td text-xs text-slate-500">{{ hit.excerpt|truncatechars:120 }}</td>
          </tr>
        {% empty %}
          <tr><td class="td py-10 text-center text-slate-500" colspan="5">Żadne zgłoszenie nie zostało jeszcze zatrzymane.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  {% if page_obj.paginator.num_pages > 1 %}
    <nav class="flex items-center justify-between gap-4 border-t border-slate-200 px-4 py-3 text-sm dark:border-slate-800">
      <span class="text-slate-500 dark:text-slate-400">Strona {{ page_obj.number }} z {{ page_obj.paginator.num_pages }}</span>
      <div class="flex gap-2">
        {% if page_obj.has_previous %}<a class="btn-ghost !px-3 !py-1" href="?page={{ page_obj.previous_page_number }}">Poprzednia</a>{% endif %}
        {% if page_obj.has_next %}<a class="btn-ghost !px-3 !py-1" href="?page={{ page_obj.next_page_number }}">Następna</a>{% endif %}
      </div>
    </nav>
  {% endif %}
</section>
{% endblock %}