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

{% block panel_title %}Tematy kontaktu{% endblock %}
{% block heading %}Tematy kontaktu{% endblock %}
{% block subheading %}<p class="text-sm text-slate-500 dark:text-slate-400">Lista tematów do wyboru w formularzu kontaktowym.</p>{% endblock %}
{% block actions %}<a class="btn-primary" href="{% url 'panel:contact_topics:create' %}">Nowy temat</a>{% endblock %}

{% block content %}
<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">Temat</th>
          <th class="th">Powiadomienia</th>
          <th class="th">Wiadomości</th>
          <th class="th">Kolejność</th>
          <th class="th">Aktywny</th>
          <th class="th text-right">Akcje</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-slate-100 dark:divide-slate-800">
        {% for topic in topics %}
          <tr class="hover:bg-slate-50 dark:hover:bg-slate-800/50">
            <td class="td">
              <span class="block font-medium">{{ topic.name }}</span>
              {% if topic.description %}<span class="text-xs text-slate-400">{{ topic.description|truncatechars:80 }}</span>{% endif %}
            </td>
            <td class="td">{{ topic.notify_email|default:"adres ze strony kontaktu" }}</td>
            <td class="td">{{ topic.messages.count }}</td>
            <td class="td">{{ topic.order }}</td>
            <td class="td">
              {% if topic.is_active %}
                <span class="badge bg-emerald-100 text-emerald-700 dark:bg-emerald-950 dark:text-emerald-300">tak</span>
              {% else %}
                <span class="badge bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-300">nie</span>
              {% endif %}
            </td>
            <td class="td">
              <div class="flex justify-end gap-2">
                <a class="btn-ghost !px-3 !py-1 text-xs" href="{% url 'panel:contact_topics:edit' topic.pk %}">Edytuj</a>
                <form method="post" action="{% url 'panel:contact_topics:delete' topic.pk %}"
                      data-confirm="Usunąć temat {{ topic.name }}? Wysłane wiadomości zostają.">
                  {% csrf_token %}
                  <button class="btn-danger !px-3 !py-1 text-xs" type="submit">Usuń</button>
                </form>
              </div>
            </td>
          </tr>
        {% empty %}
          {% url 'panel:contact_topics:create' as create_url %}
          {% include 'panel/partials/empty.html' with colspan=6 url=create_url action="Nowy temat" title="Nie ma jeszcze żadnego tematu kontaktu." hint="Bez tematów nadawca wpisuje temat z ręki, a każda wiadomość idzie na jeden adres. Dodaj temat, żeby pytania trafiały od razu do właściwej osoby." %}
        {% endfor %}
      </tbody>
    </table>
  </div>
</section>

<p class="mt-4 text-sm text-slate-500 dark:text-slate-400">
  Pierwszy aktywny temat zamienia pole tekstowe w formularzu na listę wyboru.
  Czy temat jest obowiązkowy, ustawiasz w zakładce
  <a class="text-brand-600 hover:underline" href="{% url 'panel:contact:index' %}">Formularz kontaktowy</a>.
</p>
{% endblock %}