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

{% block panel_title %}Subskrybenci{% endblock %}
{% block heading %}Subskrybenci{% endblock %}
{% block subheading %}
  <p class="text-sm text-slate-500 dark:text-slate-400">
    Adresy zapisane na newsletter. Aktywnych: {{ counts.active }}, czeka na potwierdzenie: {{ counts.pending }}, wypisanych: {{ counts.unsubscribed }}.
  </p>
{% endblock %}
{% block actions %}
  <a class="btn-ghost" href="{% url 'panel:newsletter:export' %}">Eksport CSV</a>
  <a class="btn-primary" href="{% url 'panel:newsletter:create' %}">Nowy adres</a>
{% endblock %}

{% block content %}
{% if not settings.enabled %}
  <p class="card card-body text-sm text-amber-700 dark:text-amber-300">
    Subskrypcja jest wyłączona - formularz nie pokazuje się na stronie.
    Włączysz ją w <a class="underline" href="{% url 'panel:newsletter_settings:index' %}">ustawieniach newslettera</a>.
  </p>
{% endif %}

<form method="get" class="card card-body flex flex-wrap items-end gap-3">
  <div class="min-w-48 flex-1">
    <label class="label" for="q">Szukaj</label>
    <input class="input mt-1" type="search" id="q" name="q" value="{{ query }}" placeholder="adres albo imię">
  </div>
  <div>
    <label class="label" for="status">Status</label>
    <select class="input mt-1" id="status" name="status">
      <option value="">wszystkie</option>
      {% for value, label in statuses %}
        <option value="{{ value }}" {% if status == value %}selected{% endif %}>{{ label }}</option>
      {% endfor %}
    </select>
  </div>
  <button class="btn-primary" type="submit">Filtruj</button>
  {% if query or status %}<a class="btn-ghost" href="{% url 'panel:newsletter:index' %}">Wyczyść</a>{% endif %}
</form>

{% comment %}Jeden formularz na cała tabelę - akcje zbiorcze idą do widoku
   bulk, a przycisk wiersza podmienia adres atrybutem formaction
   (formularza w formularzu być nie może).{% endcomment %}
<form method="post" action="{% url 'panel:newsletter: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 'adres' 'Adres' %}</th>
              <th class="th">{% sort_header 'status' 'Status' %}</th>
              <th class="th">Źródło</th>
              <th class="th">{% sort_header 'zapis' 'Zapisano' %}</th>
              <th class="th text-right">Akcje</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-slate-100 dark:divide-slate-800">
          {% for item 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=item.pk label=item.email %}</td>
              <td class="td">
                <a class="font-medium hover:text-brand-600" href="{% url 'panel:newsletter:edit' item.pk %}">{{ item.email }}</a>
                {% if item.name %}<span class="block text-xs text-slate-400">{{ item.name }}</span>{% endif %}
              </td>
              <td class="td"><span class="badge {{ item.badge_class }}">{{ item.get_status_display|lower }}</span></td>
              <td class="td">{{ item.get_source_display }}</td>
              <td class="td whitespace-nowrap">{{ item.created_at|date:"SHORT_DATETIME_FORMAT" }}</td>
              <td class="td">
                <div class="flex justify-end gap-2">
                  <a class="btn-ghost !px-3 !py-1 text-xs" href="{% url 'panel:newsletter:edit' item.pk %}">Edytuj</a>
                  <button class="btn-danger !px-3 !py-1 text-xs" type="submit"
                          formaction="{% url 'panel:newsletter:delete' item.pk %}"
                          data-confirm="Usunąć adres {{ item.email }} z listy? Wypisanie zostawia po nim ślad, kasowanie nie.">Usuń</button>
                </div>
              </td>
            </tr>
          {% empty %}
            {% url 'panel:newsletter_settings:index' as create_url %}
            {% include 'panel/partials/empty.html' with colspan=6 url=create_url action="Ustawienia newslettera" title="Nie ma jeszcze żadnego zapisu na newsletter." hint="Zapisy przychodzą z formularza w serwisie. Sprawdź w ustawieniach, czy moduł jest włączony i czy formularz stoi tam, gdzie ma go zobaczyć odwiedzający." %}
          {% 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="activate" data-bulk-action disabled>Aktywuj</button>
        <button class="btn-ghost" type="submit" name="action" value="unsubscribe" data-bulk-action disabled
                data-confirm="Wypisać zaznaczone adresy? Zostaną na liście ze stanem &quot;wypisany&quot;.">Wypisz</button>
        <button class="btn-danger" type="submit" name="action" value="delete" data-bulk-action disabled
                data-confirm="Usunąć zaznaczone adresy z listy? Po skasowaniu nie zostaje po nich ślad.">Usuń zaznaczone</button>
      </div>
    </section>
  {% endif %}
</form>
{% endblock %}