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

{% block panel_title %}Strony{% endblock %}
{% block heading %}Strony{% endblock %}
{% block subheading %}<p class="text-sm text-slate-500 dark:text-slate-400">Strony treści serwisu - o nas, regulamin, polityka prywatności.</p>{% endblock %}
{% block actions %}<a class="btn-primary" href="{% url 'panel:pages:page_create' %}">Nowa strona</a>{% 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 tytule i treści">
  <select class="input max-w-[10rem]" name="active">
    <option value="">Wszystkie</option>
    <option value="1" {% if active == '1' %}selected{% endif %}>Aktywne</option>
    <option value="0" {% if active == '0' %}selected{% endif %}>Nieaktywne</option>
  </select>
  <select class="input max-w-[12rem]" name="stan">
    <option value="">Każdy stan publikacji</option>
    {% for value, label in states %}
      <option value="{{ value }}" {% if value == state %}selected{% endif %}>{{ label }}</option>
    {% endfor %}
  </select>
  <button class="btn-ghost" type="submit">Filtruj</button>
  {% if query or active or state %}<a class="btn-ghost" href="{% url 'panel:pages:index' %}">Wyczyść</a>{% endif %}
</form>

{% comment %}Jeden formularz na cała tabelę: akcje zbiorcze idą do widoku
   `bulk`, a przyciski w wierszu podmieniają adres atrybutem `formaction`.
   Formularza w formularzu być nie może, więc to jedyna droga, żeby wiersz
   miał własne akcje. Pole `next` niesie powrót na tę samą stronę listy -
   z filtrem i kolejnością.{% endcomment %}
<form method="post" action="{% url 'panel:pages: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 'tytul' 'Tytuł' %}</th>
            <th class="th">Publikacja</th>
            <th class="th">{% sort_header 'okno' 'Okno' %}</th>
            <th class="th">{% sort_header 'menu' 'W menu' %}</th>
            <th class="th">{% sort_header 'kolejnosc' 'Kolejność' %}</th>
            <th class="th">{% sort_header 'zmiana' 'Ostatnia zmiana' %}</th>
            <th class="th text-right">Akcje</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-slate-100 dark:divide-slate-800">
          {% for page 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=page.pk label=page.title %}</td>
              <td class="td">
                <span class="block font-medium">{{ page.title }}</span>
                <span class="text-xs text-slate-400">/{{ page.slug }}/</span>
              </td>
              <td class="td">
                <span class="badge {{ page.publication.badge }}">{{ page.publication.label }}</span>
              </td>
              <td class="td whitespace-nowrap text-xs text-slate-500 dark:text-slate-400">
                {% if page.publish_from or page.publish_to %}
                  {{ page.publish_from|date:"d.m.Y H:i"|default:"od zawsze" }} &ndash; {{ page.publish_to|date:"d.m.Y H:i"|default:"bez konca" }}
                {% else %}
                  bez ograniczeń
                {% endif %}
              </td>
              <td class="td">{% if page.show_in_menu %}tak{% else %}nie{% endif %}</td>
              <td class="td">{{ page.order }}</td>
              <td class="td whitespace-nowrap text-xs text-slate-500 dark:text-slate-400">
                {{ page.updated_at|date:"d.m.Y H:i" }}
              </td>
              <td class="td">
                <div class="flex justify-end gap-2">
                  {% if page.publication.visible %}
                    <a class="btn-ghost !px-3 !py-1 text-xs" href="{{ page.get_absolute_url }}" target="_blank" rel="noopener">Podgląd</a>
                  {% else %}
                    {% with draft=page|preview_url %}
                      {% if draft %}<a class="btn-ghost !px-3 !py-1 text-xs" href="{{ draft }}" target="_blank" rel="noopener">Zobacz szkic</a>{% endif %}
                    {% endwith %}
                  {% endif %}
                  <a class="btn-ghost !px-3 !py-1 text-xs" href="{{ page|history_url }}">Historia</a>
                  <a class="btn-ghost !px-3 !py-1 text-xs" href="{% url 'panel:pages:page_edit' page.pk %}">Edytuj</a>
                  <button class="btn-danger !px-3 !py-1 text-xs" type="submit"
                          formaction="{% url 'panel:pages:page_delete' page.pk %}"
                          data-confirm="Usunąć stronę {{ page.title }}? Wraz z nią znikną jej odnośniki w stopce.">Usuń</button>
                </div>
              </td>
            </tr>
          {% empty %}
            {% url 'panel:pages:page_create' as create_url %}
            {% include 'panel/partials/empty.html' with colspan=8 url=create_url action="Nowa strona" title="Nie ma jeszcze żadnej strony." hint="Strony treści to stałe teksty serwisu: o nas, regulamin, polityka prywatności. Zacznij od pierwszej - potem wepniesz ją do menu albo do stopki." %}
          {% 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>Włącz</button>
        <button class="btn-ghost" type="submit" name="action" value="deactivate" data-bulk-action disabled>Wyłącz</button>
        <button class="btn-ghost" type="submit" name="action" value="menu_on" data-bulk-action disabled>Pokaż w menu</button>
        <button class="btn-ghost" type="submit" name="action" value="menu_off" data-bulk-action disabled>Zdejmij z menu</button>
        <button class="btn-danger" type="submit" name="action" value="delete" data-bulk-action disabled
                data-confirm="Usunąć zaznaczone strony? Wraz z nimi znikną ich odnośniki w stopce.">Usuń zaznaczone</button>
      </div>
    </section>
  {% endif %}
</form>
{% endblock %}