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

{% block panel_title %}{% if object %}Edycja kolumny stopki{% else %}Nowa kolumna stopki{% endif %}{% endblock %}
{% block heading %}{% if object %}{{ object }}{% else %}Nowa kolumna stopki{% endif %}{% endblock %}
{% block subheading %}<p class="text-sm text-slate-500 dark:text-slate-400">{% if object %}Edycja kolumny stopki i jej pozycji.{% else %}Dodawanie kolumny stopki.{% endif %}</p>{% endblock %}
{% block actions %}<a class="btn-ghost" href="{% url 'panel:footer_categories:index' %}">Wróć do listy kategorii stopki</a>{% endblock %}

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

  <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">Dane kategorii</h2>
        <p class="help">
          Nazwa to nagłówek kolumny w stopce - można ją zostawić pusta, gdy wolisz
          pokazać sama treść bez tytułu. Kolejność ustala, w jakiej kolejności
          kolumny pojawia się w stopce.
        </p>
      </div>
      {% include 'panel/partials/form.html' %}
    </div>
  </section>

  {% 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">Elementy kolumny</h2>
          <p class="help">
            Oprócz stron treści kolumna może zawierać własne odnośniki (np. "Moje konto")
            oraz bloki tekstu - sam tekst pokazywany w stopce, bez odnośnika.
            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 gap-2">
      <button class="btn-primary" type="submit">{% if object %}Zapisz zmiany{% else %}Zapisz{% endif %}</button>
      <a class="btn-ghost" href="{% url 'panel:footer_categories:index' %}">Anuluj</a>
    </div>
  </div>
</form>
{% endblock %}