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

{% block panel_title %}Bloki treści{% endblock %}
{% block heading %}Bloki treści{% endblock %}
{% block subheading %}
  <p class="text-sm text-slate-500 dark:text-slate-400">
    {% if target %}Bloki doczepione do treści: {{ target }}.{% else %}Kawałki strony wstawiane nad treścią i pod nią.{% endif %}
  </p>
{% endblock %}
{% block actions %}
  <a class="btn-primary" href="{% url 'panel:blocks:create' %}{% if label and object_id %}?rodzaj={{ label }}&amp;tresc={{ object_id }}{% endif %}">Nowy blok</a>
{% endblock %}

{% block content %}
{% if settings and not settings.enabled %}
  <div class="card">
    <div class="card-body text-sm text-slate-600 dark:text-slate-300">
      Moduł bloków jest wyłączony - żaden blok nie pokazuje się teraz w serwisie.
      Włącza się go w <a class="underline" href="{% url 'panel:block_settings:index' %}">ustawieniach bloków</a>.
    </div>
  </div>
{% endif %}

<form method="get" class="flex flex-wrap gap-2">
  <input class="input max-w-xs" type="search" name="q" value="{{ query }}" placeholder="Szukaj w nazwie i treści">
  <select class="input max-w-[12rem]" name="rodzaj">
    <option value="">Każdy rodzaj treści</option>
    {% for value, name in kinds %}
      <option value="{{ value }}" {% if value == label %}selected{% endif %}>{{ name }}</option>
    {% endfor %}
  </select>
  <select class="input max-w-[12rem]" name="stan">
    <option value="">Każdy stan</option>
    {% for value, name in states %}
      <option value="{{ value }}" {% if value == state %}selected{% endif %}>{{ name }}</option>
    {% endfor %}
  </select>
  {% if object_id %}<input type="hidden" name="tresc" value="{{ object_id }}">{% endif %}
  <button class="btn-ghost" type="submit">Filtruj</button>
  {% if query or state or label or object_id %}<a class="btn-ghost" href="{% url 'panel:blocks:index' %}">Wyczyść</a>{% endif %}
</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">Blok</th>
          <th class="th">Gdzie stoi</th>
          <th class="th">Stan</th>
          <th class="th">Kolejność</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">
              <span class="block font-medium">{{ item.label }}</span>
              <span class="text-xs text-slate-400">{{ item.preview }}</span>
            </td>
            <td class="td text-sm">
              {% if item.target %}
                <span class="block">{{ item.target }}</span>
                <span class="text-xs text-slate-400">{{ item.target_name }} &middot; {{ item.get_layout_display }}</span>
              {% else %}
                <span class="text-slate-400">treści już nie ma</span>
              {% endif %}
            </td>
            <td class="td"><span class="badge {{ item.publication.badge }}">{{ item.publication.label }}</span></td>
            <td class="td">{{ item.order }}</td>
            <td class="td">
              <div class="flex justify-end gap-2">
                {% if item.target.get_absolute_url %}
                  <a class="btn-ghost !px-3 !py-1 text-xs" href="{{ item.target.get_absolute_url }}" target="_blank" rel="noopener">Zobacz stronę</a>
                {% endif %}
                <form method="post" action="{% url 'panel:blocks:toggle' item.pk %}">
                  {% csrf_token %}
                  <button class="btn-ghost !px-3 !py-1 text-xs" type="submit">{% if item.is_active %}Wyłącz{% else %}Włącz{% endif %}</button>
                </form>
                <a class="btn-ghost !px-3 !py-1 text-xs" href="{% url 'panel:blocks:edit' item.pk %}">Edytuj</a>
                <form method="post" action="{% url 'panel:blocks:delete' item.pk %}"
                      data-confirm="Usunąć blok {{ item.label }}?">
                  {% csrf_token %}
                  <button class="btn-danger !px-3 !py-1 text-xs" type="submit">Usuń</button>
                </form>
              </div>
            </td>
          </tr>
        {% empty %}
          {% url 'panel:blocks:create' as create_url %}
          {% if target %}
            {% comment %}Lista otwarta przyciskiem z formularza strony albo wpisu:
               zawężenie nie jest filtrem, który ktoś tu założył, więc pusta lista
               mówi o tej treści i od razu daje blok z gotowym gospodarzem.{% endcomment %}
            {% with scoped_url=create_url|add:"?rodzaj="|add:label|add:"&tresc="|add:object_id %}
              {% include 'panel/partials/empty.html' with colspan=5 ignore="rodzaj tresc" url=scoped_url action="Nowy blok dla tej treści" title="Ta treść nie ma jeszcze żadnego bloku." hint="Blok stanie nad treścią albo pod nią - baner, tabela, wyróżniona notka. Nowy dostanie tę treść jako gospodarza, bez wybierania jej z listy." %}
            {% endwith %}
          {% else %}
            {% include 'panel/partials/empty.html' with colspan=5 url=create_url action="Nowy blok" title="Nie ma jeszcze żadnego bloku treści." hint="Blok to kawałek strony doczepiony nad treścią albo pod nią - baner, tabela, wyróżniona notka. Dodaj pierwszy i wskaż mu stronę albo wpis, przy którym ma stanąć." %}
          {% endif %}
        {% 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 }}&amp;{{ query_string }}">Poprzednia</a>{% endif %}
        {% if page_obj.has_next %}<a class="btn-ghost !px-3 !py-1" href="?page={{ page_obj.next_page_number }}&amp;{{ query_string }}">Następna</a>{% endif %}
      </div>
    </nav>
  {% endif %}
</section>
{% endblock %}