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

{% block panel_title %}{% if object %}Edycja formularza{% else %}Nowy formularz{% endif %}{% endblock %}
{% block heading %}{% if object %}{{ object.name }}{% else %}Nowy formularz{% endif %}{% endblock %}
{% block subheading %}
  <p class="text-sm text-slate-500 dark:text-slate-400">
    {% if object %}
      Adres w serwisie: <span class="font-mono text-xs">/formularz/{{ object.slug }}/</span>
    {% else %}
      Najpierw opis formularza, potem jego pola - pola dodasz zaraz po zapisie.
    {% endif %}
  </p>
{% endblock %}
{% block actions %}
  <div class="flex flex-wrap gap-2">
    {% if object %}
      {% if object.publication.visible %}
        <a class="btn-ghost" href="{{ object.get_absolute_url }}" target="_blank" rel="noopener">Podgląd</a>
      {% elif preview_url %}
        <a class="btn-ghost" href="{{ preview_url }}" target="_blank" rel="noopener">Zobacz szkic</a>
      {% endif %}
      <a class="btn-ghost" href="{% url 'panel:form_submissions:index' %}?formularz={{ object.pk }}">Zgłoszenia ({{ submissions_count }})</a>
      <a class="btn-ghost" href="{% url 'panel:revisions:content' label='formbuilder.form' object_id=object.pk %}">Historia zmian{% if revisions_count %} ({{ revisions_count }}){% endif %}</a>
    {% endif %}
    <a class="btn-ghost" href="{% url 'panel:formbuilder:index' %}">Wróć do listy</a>
  </div>
{% endblock %}

{% block content %}
<form method="post" enctype="multipart/form-data" novalidate class="max-w-4xl space-y-4">
  {% csrf_token %}

  {% if form.non_field_errors %}
    <div class="border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800 dark:border-red-900 dark:bg-red-950 dark:text-red-200">
      {% for error in form.non_field_errors %}<p>{{ error }}</p>{% endfor %}
    </div>
  {% endif %}

  {% for item in form.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>
        <div class="{{ item.group.grid_class }}">
          {% for field in item.fields %}{% include 'panel/partials/field.html' %}{% endfor %}
        </div>
        {% 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 %}

  {% if formset %}
    <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">Pola formularza</h2>
          <p class="help">
            Każdy wiersz to jedno pytanie. Kolejność na stronie ustala pole "kolejność".
            Rola mówi skrzynce wiadomości, które pole jest nadawca, które jego adresem,
            a które tematem - bez adresu nie da się odpisać z panelu ani wysłać
            potwierdzenia. Puste wiersze są pomijane.
          </p>
        </div>

        {{ formset.management_form }}
        {% for error in formset.non_form_errors %}<p class="error-text">{{ error }}</p>{% endfor %}

        <div class="space-y-4">
          {% for row in formset %}
            <div class="border border-slate-200 p-4 dark:border-slate-800">
              {% for hidden in row.hidden_fields %}{{ hidden }}{% endfor %}
              <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
                {% for field in row.visible_fields %}
                  {% include 'panel/partials/field.html' %}
                {% endfor %}
              </div>
            </div>
          {% endfor %}
        </div>

        <p class="help border-t border-slate-200 pt-3 dark:border-slate-800">
          Zapisz, aby dodać kolejne puste wiersze.
        </p>
      </div>
    </section>
  {% endif %}

  <div class="card">
    <div class="card-body flex flex-wrap items-center justify-between gap-3">
      <button class="btn-primary" type="submit">{% if object %}Zapisz formularz{% else %}Dodaj formularz{% endif %}</button>
      {% if object %}
        <p class="help">Ostatnia zmiana: {{ object.updated_at|date:"d.m.Y H:i" }}</p>
      {% else %}
        <p class="help">Pola dodasz na następnym ekranie.</p>
      {% endif %}
    </div>
  </div>
</form>
{% endblock %}