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

{% block panel_title %}{{ active_tab.title }}{% endblock %}
{% block heading %}Ustawienia · {{ active_tab.title }}{% endblock %}
{% block subheading %}<p class="text-sm text-slate-500 dark:text-slate-400">{{ active_tab.description }}</p>{% endblock %}
{% block actions %}<a class="btn-ghost" href="{% url 'core:home' %}" target="_blank" rel="noopener">Zobacz stronę</a>{% endblock %}

{% 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 flex flex-wrap items-center justify-between gap-3">
        {% include "panel/partials/dirty-note.html" %}
        <p class="help">Ostatnia zmiana: {{ page.updated_at|date:"d.m.Y H:i" }}</p>
        <button class="btn-primary" type="submit">Zapisz ustawienia</button>
      </div>
    </div>
  </form>

  <section class="card">
    <div class="card-body space-y-4">
      <div class="flex flex-wrap items-start justify-between gap-3">
        <div class="space-y-1">
          <h2 class="text-sm font-semibold text-slate-900 dark:text-slate-100">Kafelki pod nagłówkiem</h2>
          <p class="help">Krótkie bloki z tytułem, tekstem i odnośnikiem.</p>
        </div>
        <a class="btn-ghost !px-3 !py-1 text-xs" href="{% url 'panel:home:blocks' %}">
          Lista kafelków ({{ blocks|length }})
        </a>
      </div>
    </div>
  </section>

  <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">Dodatkowe sekcje</h2>
        <p class="help">
          Sekcje strony startowej z dowolnym HTML-em - własne oraz gotowe, wniesione przez
          szablon serwisu (oznaczone "szablon"). Wszystkie edytujesz tak samo. Numer kolejności
          jest wspólny z resztą elementów strony startowej, więc sekcje możesz wstawić w dowolnym
          miejscu. Dozwolone są wyłącznie klasy Tailwind - własne style, skrypty i zdarzenia
          są odrzucane przy zapisie. Sekcje można też przypisać do stylu strony
          startowej - wtedy gość widzi tylko ten zestaw, który pasuje do stylu
          wybranego wyżej.
        </p>
      </div>

      {% if sections %}
        <ul class="divide-y divide-slate-100 dark:divide-slate-800">
          {% for section in sections %}
            <li class="flex items-center gap-4 py-3">
              <span class="badge shrink-0 bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-300">
                #{{ section.order }}
              </span>
              <div class="min-w-0 flex-1">
                <p class="truncate text-sm font-medium text-slate-900 dark:text-slate-100">{{ section.label }}</p>
                <p class="help truncate">
                  {{ section.preview }}{% if section.ab_key %} &middot; test A/B: {{ section.ab_key }}{% if section.variant %} ({{ section.variant }}){% endif %}{% endif %}
                </p>
                {% if section.theme %}
                  <p class="help">szablon: {{ section.theme }}</p>
                {% endif %}
              </div>
              {% comment %}Sekcja przypisana do jednego stylu pokazuje się tylko
                 w nim - lista musi to mówić wprost, inaczej "aktywna" sekcja
                 wyglądałaby na zgubiona.{% endcomment %}
              {% if section.style %}
                <span class="badge bg-indigo-100 text-indigo-700 dark:bg-indigo-950 dark:text-indigo-300">
                  styl: {{ section.get_style_display|cut:"Tylko w stylu " }}
                </span>
              {% endif %}
              {% if section.is_active %}
                <span class="badge bg-emerald-100 text-emerald-700 dark:bg-emerald-950 dark:text-emerald-300">aktywna</span>
              {% else %}
                <span class="badge bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-300">wyłączona</span>
              {% endif %}
              <div class="flex gap-2">
                <a class="btn-ghost !px-3 !py-1 text-xs" href="{% url 'panel:home:section_edit' section.pk %}">Edytuj</a>
                <form method="post" action="{% url 'panel:home:section_delete' section.pk %}"
                      data-confirm="Usunąć sekcje {{ section.label }}?">
                  {% csrf_token %}
                  <button class="btn-danger !px-3 !py-1 text-xs" type="submit">Usuń</button>
                </form>
              </div>
            </li>
          {% endfor %}
        </ul>
      {% else %}
        <p class="help">Brak sekcji. Dodaj pierwsza poniżej.</p>
      {% endif %}

      <form method="post" action="{% url 'panel:home:section_create' %}" novalidate
            class="space-y-4 border-t border-slate-200 pt-4 dark:border-slate-800">
        {% csrf_token %}
        <h3 class="text-sm font-semibold text-slate-900 dark:text-slate-100">Nowa sekcja</h3>
        {% include 'panel/partials/form.html' with form=section_form %}
        <button class="btn-primary" type="submit">Dodaj sekcje</button>
      </form>
    </div>
  </section>
</div>
{% endblock %}