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

{% block panel_title %}Komunikaty{% endblock %}
{% block heading %}Komunikaty{% endblock %}
{% block subheading %}<p class="text-sm text-slate-500 dark:text-slate-400">Paski informacyjne i ogłoszenia na części publicznej.</p>{% endblock %}
{% block actions %}
  <a class="btn-ghost" href="{% url 'panel:notices_settings:index' %}">Ustawienia</a>
  <a class="btn-primary" href="{% url 'panel:notices:create' %}">Nowy komunikat</a>
{% endblock %}

{% block content %}

{% if not settings.enabled %}
  <p class="border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900 dark:border-amber-900 dark:bg-amber-950 dark:text-amber-100">
    Komunikaty są wyłączone w ustawieniach modułu - żadne ogłoszenie nie pokazuje się na stronie.
    <a class="underline" href="{% url 'panel:notices_settings:index' %}">Włącz je</a>.
  </p>
{% endif %}

<section class="grid grid-cols-2 gap-4 sm:grid-cols-4">
  <div class="card"><div class="card-body"><p class="text-xs uppercase text-slate-400">Wszystkie</p><p class="text-2xl font-semibold">{{ counts.total }}</p></div></div>
  <div class="card"><div class="card-body"><p class="text-xs uppercase text-slate-400">Widoczne</p><p class="text-2xl font-semibold">{{ counts.live }}</p></div></div>
  <div class="card"><div class="card-body"><p class="text-xs uppercase text-slate-400">Zaplanowane</p><p class="text-2xl font-semibold">{{ counts.planned }}</p></div></div>
  <div class="card"><div class="card-body"><p class="text-xs uppercase text-slate-400">Zakończone</p><p class="text-2xl font-semibold">{{ counts.finished }}</p></div></div>
</section>

<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-[14rem]" name="placement">
    <option value="">Każde miejsce</option>
    {% for value, label in placements %}
      <option value="{{ value }}" {% if placement == value %}selected{% endif %}>{{ label }}</option>
    {% endfor %}
  </select>
  <select class="input max-w-[12rem]" name="state">
    <option value="">Każdy stan</option>
    <option value="widoczny" {% if state == 'widoczny' %}selected{% endif %}>Widoczny</option>
    <option value="zaplanowany" {% if state == 'zaplanowany' %}selected{% endif %}>Zaplanowany</option>
    <option value="zakonczony" {% if state == 'zakonczony' %}selected{% endif %}>Zakończony</option>
    <option value="wylaczony" {% if state == 'wylaczony' %}selected{% endif %}>Wyłączony</option>
  </select>
  <button class="btn-ghost" type="submit">Filtruj</button>
  {% if query or placement or state %}<a class="btn-ghost" href="{% url 'panel:notices: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">Komunikat</th>
          <th class="th">Miejsce</th>
          <th class="th">Zakres</th>
          <th class="th">Terminy</th>
          <th class="th">Stan</th>
          <th class="th text-right">Akcje</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-slate-100 dark:divide-slate-800">
        {% for notice in page_obj %}
          <tr class="hover:bg-slate-50 dark:hover:bg-slate-800/50">
            <td class="td">
              <span class="block font-medium">{{ notice.title|default:"(bez tytulu)" }}</span>
              <span class="text-xs text-slate-400">{{ notice.body|striptags|truncatechars:70 }}</span>
            </td>
            <td class="td">{{ notice.get_placement_display }}</td>
            <td class="td">{{ notice.get_scope_display }}</td>
            <td class="td text-xs text-slate-500">
              {% if notice.starts_at %}od {{ notice.starts_at|date:"SHORT_DATETIME_FORMAT" }}<br>{% endif %}
              {% if notice.ends_at %}do {{ notice.ends_at|date:"SHORT_DATETIME_FORMAT" }}{% endif %}
              {% if not notice.starts_at and not notice.ends_at %}bez terminu{% endif %}
            </td>
            <td class="td">
              {% if notice.is_live %}
                <span class="badge bg-brand-100 text-brand-800 dark:bg-brand-950 dark:text-brand-200">{{ notice.state_label }}</span>
              {% else %}
                <span class="badge bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-200">{{ notice.state_label }}</span>
              {% endif %}
            </td>
            <td class="td">
              <div class="flex justify-end gap-2">
                <form method="post" action="{% url 'panel:notices:toggle' notice.pk %}">
                  {% csrf_token %}
                  <button class="btn-ghost !px-3 !py-1 text-xs" type="submit">{% if notice.is_active %}Wyłącz{% else %}Włącz{% endif %}</button>
                </form>
                <a class="btn-ghost !px-3 !py-1 text-xs" href="{% url 'panel:notices:edit' notice.pk %}">Edytuj</a>
                <form method="post" action="{% url 'panel:notices:delete' notice.pk %}"
                      data-confirm="Usunąć ten komunikat?">
                  {% csrf_token %}
                  <button class="btn-danger !px-3 !py-1 text-xs" type="submit">Usuń</button>
                </form>
              </div>
            </td>
          </tr>
        {% empty %}
          {% url 'panel:notices:create' as create_url %}
          {% include 'panel/partials/empty.html' with colspan=6 url=create_url action="Nowy komunikat" title="Nie ma jeszcze żadnego komunikatu." hint="Komunikat to pasek nad nagłówkiem, ramka pod nim albo notka nad stopką - ogłoszenie, termin, awaria. Ustawisz mu zakres adresów i daty, po których zniknie sam." %}
        {% 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 %}