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

{% block panel_title %}Kontakt{% endblock %}
{% block heading %}Kontakt{% endblock %}
{% block subheading %}<p class="text-sm text-slate-500 dark:text-slate-400">Dane teleadresowe i formularz kontaktowy.</p>{% endblock %}
{% block actions %}
<a class="btn-ghost" href="{% url 'panel:contact_topics:index' %}">Tematy kontaktu</a>
<a class="btn-ghost" href="{% url 'core:contact' %}" target="_blank" rel="noopener">Zobacz stronę</a>
{% endblock %}

{% comment %}Strona kontaktu ma ten sam układ co reszta zakładek: pola
   w grupach z nagłówkiem i uwagą pod spodem, ostatnia grupa to SEO
   (core/panel/site/forms.py, CONTACT_TAB). Formularz przyjmuje pliki,
   bo w grupie SEO stoi obrazek udostępnień.{% endcomment %}
{% block content %}
<div class="max-w-2xl space-y-4">
  <form method="post" enctype="multipart/form-data" novalidate class="space-y-4">
    {% csrf_token %}

    {% for item in groups %}
      <section class="card">
        <div class="card-body space-y-4">
          <div class="space-y-1">
            <h2 class="text-sm font-semibold text-slate-900 dark:text-slate-100">{{ item.group.title }}</h2>
            {% if item.group.description %}<p class="help">{{ item.group.description }}</p>{% endif %}
          </div>
          {% for field in item.fields %}{% include 'panel/partials/field.html' %}{% endfor %}
          {% if item.group.note %}
            <p class="help border-t border-slate-200 pt-3 dark:border-slate-800">{{ item.group.note }}</p>
          {% endif %}
        </div>
      </section>
    {% endfor %}

    <div class="card save-bar">
      <div class="card-body space-y-3">
        {% include "panel/partials/dirty-note.html" %}
        <div class="flex flex-wrap items-center justify-between gap-3">
          <p class="help">
            Tematy do wyboru w formularzu dodajesz w zakładce
            <a class="text-brand-600 hover:underline" href="{% url 'panel:contact_topics:index' %}">Tematy kontaktu</a>
            (teraz aktywnych: {{ page.topics.count }}).
          </p>
          <button class="btn-primary" type="submit">Zapisz stronę</button>
        </div>
      </div>
    </div>
  </form>
</div>
{% endblock %}