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

{% block panel_title %}Skrzynka wiadomości{% endblock %}
{% block heading %}Skrzynka wiadomości{% endblock %}
{% block subheading %}<p class="text-sm text-slate-500 dark:text-slate-400">Wiadomości z formularza kontaktowego i z formularzy własnych. Nieprzeczytanych: {{ counts.unread }}.</p>{% endblock %}
{% block actions %}
  <a class="btn-ghost" href="{% url 'panel:inbox:export' %}{% if query_string %}?{{ query_string }}{% endif %}">Eksport CSV</a>
  <a class="btn-ghost" href="{% url 'panel:contact_topics:index' %}">Tematy kontaktu</a>
{% endblock %}

{% block content %}

<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">Nieprzeczytane</p><p class="text-2xl font-semibold">{{ counts.unread }}</p></div></div>
  <div class="card"><div class="card-body"><p class="text-xs uppercase text-slate-400">W toku</p><p class="text-2xl font-semibold">{{ counts.open }}</p></div></div>
  <div class="card"><div class="card-body"><p class="text-xs uppercase text-slate-400">Załatwione</p><p class="text-2xl font-semibold">{{ counts.done }}</p></div></div>
</section>

<form method="get" class="flex flex-wrap gap-2">
  <input class="input max-w-xs" type="search" name="q" value="{{ filters.q }}" placeholder="Szukaj w nadawcy i treści">
  <select class="input max-w-[10rem]" name="status">
    <option value="">Każdy status</option>
    {% for value, label in statuses %}
      <option value="{{ value }}" {% if filters.status == value %}selected{% endif %}>{{ label }}</option>
    {% endfor %}
  </select>
  <select class="input max-w-[12rem]" name="topic">
    <option value="">Każdy temat</option>
    {% for topic in topics %}
      <option value="{{ topic.pk }}" {% if filters.topic == topic.pk|stringformat:"s" %}selected{% endif %}>{{ topic.name }}</option>
    {% endfor %}
  </select>
  <select class="input max-w-[12rem]" name="flag">
    <option value="">Wszystkie</option>
    <option value="unread" {% if filters.flag == 'unread' %}selected{% endif %}>Nieprzeczytane</option>
    <option value="starred" {% if filters.flag == 'starred' %}selected{% endif %}>Wyroznione</option>
    <option value="unanswered" {% if filters.flag == 'unanswered' %}selected{% endif %}>Bez odpowiedzi</option>
  </select>
  <button class="btn-ghost" type="submit">Filtruj</button>
  {% if query_string %}<a class="btn-ghost" href="{% url 'panel:inbox:index' %}">Wyczyść</a>{% endif %}
</form>

<form method="post" action="{% url 'panel:inbox:bulk' %}" class="space-y-4">
  {% csrf_token %}

  <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"><span class="sr-only">Zaznacz</span></th>
            <th class="th">Nadawca</th>
            <th class="th">Temat</th>
            <th class="th">Status</th>
            <th class="th">Otrzymano</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">
                <input type="checkbox" name="selected" value="{{ item.pk }}"
                       aria-label="Zaznacz wiadomość od {{ item.name }}"
                       class="h-4 w-4 rounded border-slate-300 text-brand-600 focus:ring-brand-500 dark:border-slate-700 dark:bg-slate-950">
              </td>
              <td class="td">
                <a class="font-medium hover:text-brand-600 {% if not item.is_read %}font-bold{% endif %}"
                   href="{% url 'panel:inbox:message' item.pk %}">{{ item.name }}</a>
                <span class="block text-xs text-slate-400">{{ item.email }}</span>
              </td>
              <td class="td">
                {% if item.is_starred %}<span title="wyróżniona" class="mr-1">*</span>{% endif %}
                {% if not item.is_read %}<span class="badge mr-2 bg-brand-100 text-brand-700 dark:bg-brand-950 dark:text-brand-200">nowa</span>{% endif %}
                <span class="block">{{ item.subject|default:"bez tematu"|truncatechars:60 }}</span>
                <span class="text-xs text-slate-400">{{ item.preview|truncatechars:70 }}</span>
              </td>
              <td class="td">
                <span class="badge {{ item.status_badge_class }}">{{ item.get_status_display }}</span>
                {% if item.is_answered %}<span class="mt-1 block text-xs text-slate-400">odpowiedziano</span>{% endif %}
              </td>
              <td class="td whitespace-nowrap">{{ item.created_at|date:"SHORT_DATETIME_FORMAT" }}</td>
              <td class="td">
                <div class="flex justify-end gap-2">
                  <button class="btn-ghost !px-3 !py-1 text-xs" type="submit"
                          formaction="{% url 'panel:inbox:star' item.pk %}">
                    {% if item.is_starred %}Zdejmij{% else %}Wyroznij{% endif %}
                  </button>
                  <a class="btn-ghost !px-3 !py-1 text-xs" href="{% url 'panel:inbox:message' item.pk %}">Otwórz</a>
                  <button class="btn-danger !px-3 !py-1 text-xs" type="submit"
                          formaction="{% url 'panel:inbox:message_delete' item.pk %}"
                          data-confirm="Usunąć wiadomość od {{ item.name }}?">Usuń</button>
                </div>
              </td>
            </tr>
          {% empty %}
            {% url 'panel:contact:index' as contact_url %}
            {% include 'panel/partials/empty.html' with colspan=6 url=contact_url action="Formularz kontaktowy" title="Skrzynka jest pusta." hint="Trafiają tutaj wiadomości z formularza kontaktowego i z formularzy własnych. Sprawdź, czy strona kontaktu stoi w menu i czy adres powiadomień jest ustawiony." %}
          {% 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 }}{% if query_string %}&amp;{{ query_string }}{% endif %}">Poprzednia</a>
          {% endif %}
          {% if page_obj.has_next %}
            <a class="btn-ghost !px-3 !py-1" href="?page={{ page_obj.next_page_number }}{% if query_string %}&amp;{{ query_string }}{% endif %}">Następna</a>
          {% endif %}
        </div>
      </nav>
    {% endif %}
  </section>

  {% if page_obj %}
    <section class="card">
      <div class="card-body flex flex-wrap gap-2">
        <button class="btn-ghost" type="submit" name="action" value="read">Oznacz jako przeczytane</button>
        <button class="btn-ghost" type="submit" name="action" value="unread">Oznacz jako nieprzeczytane</button>
        <button class="btn-ghost" type="submit" name="action" value="open">W toku</button>
        <button class="btn-ghost" type="submit" name="action" value="done">Załatwione</button>
        <button class="btn-ghost" type="submit" name="action" value="spam">Spam</button>
        <button class="btn-danger" type="submit" name="action" value="delete"
                data-confirm="Usunąć zaznaczone wiadomości?">Usuń zaznaczone</button>
      </div>
    </section>
  {% endif %}
</form>
{% endblock %}