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

{% block panel_title %}{{ active_tab.title }}{% endblock %}
{% block heading %}{{ 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-3xl space-y-4">
  {% if active_tab.intro %}
    <p class="text-sm leading-relaxed text-slate-600 dark:text-slate-300">{{ active_tab.intro }}</p>
  {% endif %}

  {% for placement in placements %}
    <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">{{ placement.title }}</h2>
            <p class="help">
              {% if placement.key == 'main' %}
                Zakładki górnego menu serwisu. Pozycja bez adresu tylko rozwija podpozycje.
              {% else %}
                Pasek jednopoziomowy - same odnośniki, bez rozwijania. Wygląd i widoczność
                paska ustawiasz niżej, w tej samej zakładce.
              {% endif %}
            </p>
          </div>
          {% if not placement.enabled %}
            <span class="badge bg-amber-100 text-amber-800 dark:bg-amber-950 dark:text-amber-200">pasek wyłączony</span>
          {% elif placement.blank %}
            <span class="badge bg-amber-100 text-amber-800 dark:bg-amber-950 dark:text-amber-200">włączony, ale pusty</span>
          {% endif %}
        </div>

        {% if placement.blank %}
          <p class="border-l-4 border-l-amber-500 bg-amber-50 px-4 py-3 text-sm text-amber-900 dark:bg-amber-950 dark:text-amber-100">
            Pasek jest włączony, ale nie ma czego pokazać - brakuje tekstu i pozycji
            z adresem, więc na stronie się nie rysuje. Dopisz tekst w ustawieniach
            niżej albo dodaj pozycje z tym miejscem.
          </p>
        {% endif %}

        {% if placement.items %}
          <ul class="divide-y divide-slate-100 dark:divide-slate-800">
            {% for item in placement.items %}
              <li class="space-y-2 py-3">
                <div class="flex items-center gap-4">
                  <div class="min-w-0 flex-1">
                    <p class="truncate text-sm font-medium text-slate-900 dark:text-slate-100">{{ item.label }}</p>
                    <p class="help truncate">
                      Kolejność: {{ item.order }}
                      &middot; {% if item.href %}{{ item.href }}{% elif placement.key == 'main' %}bez adresu (sama rozwija){% else %}bez adresu - nie pokaże się w pasku{% endif %}
                      {% if item.new_tab %}&middot; nowa karta{% endif %}
                    </p>
                  </div>
                  {% if item.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:menu:item_edit' item.pk %}">Edytuj</a>
                    <form method="post" action="{% url 'panel:menu:item_delete' item.pk %}"
                          data-confirm="Usunąć pozycje {{ item }} razem z podpozycjami?">
                      {% csrf_token %}
                      <button class="btn-danger !px-3 !py-1 text-xs" type="submit">Usuń</button>
                    </form>
                  </div>
                </div>

                {% for child in item.children.all %}
                  <div class="flex items-center gap-4 pl-6">
                    <div class="min-w-0 flex-1">
                      <p class="truncate text-sm text-slate-700 dark:text-slate-300">&#8627; {{ child.label }}</p>
                      <p class="help truncate">
                        Kolejność: {{ child.order }}
                        &middot; {% if child.href %}{{ child.href }}{% else %}bez adresu{% endif %}
                        {% if not child.is_active %}&middot; wyłączona{% endif %}
                      </p>
                    </div>
                    <div class="flex gap-2">
                      <a class="btn-ghost !px-3 !py-1 text-xs" href="{% url 'panel:menu:item_edit' child.pk %}">Edytuj</a>
                      <form method="post" action="{% url 'panel:menu:item_delete' child.pk %}"
                            data-confirm="Usunąć pozycje {{ child }}?">
                        {% csrf_token %}
                        <button class="btn-danger !px-3 !py-1 text-xs" type="submit">Usuń</button>
                      </form>
                    </div>
                  </div>
                {% endfor %}
              </li>
            {% endfor %}
          </ul>
        {% else %}
          <p class="help">{{ placement.empty }}</p>
        {% endif %}
      </div>
    </section>
  {% endfor %}

  <section class="card">
    <div class="card-body space-y-4">
      <form method="post" action="{% url 'panel:menu:item_create' %}" novalidate class="space-y-4">
        {% csrf_token %}
        <div class="space-y-1">
          <h2 class="text-sm font-semibold text-slate-900 dark:text-slate-100">Nowa pozycja</h2>
          <p class="help">Pole "miejsce w nawigacji" decyduje, na której z list powyżej pozycja stanie.</p>
        </div>
        {% include 'panel/partials/form.html' with form=item_form %}
        <button class="btn-primary" type="submit">Dodaj pozycje</button>
      </form>
    </div>
  </section>

  <section class="card">
    <div class="card-body space-y-3">
      <div class="space-y-1">
        <h2 class="text-sm font-semibold text-slate-900 dark:text-slate-100">Strony w menu</h2>
        <p class="help">
          Strony treści wpinają się do menu głównego same - zaznaczeniem "pokaż
          w nawigacji" w zakładce Strony. Stoją na tej samej skali kolejności co
          pozycje menu głównego. Dodatkowe paski biorą wyłącznie pozycje z list powyżej.
        </p>
      </div>

      {% if menu_pages %}
        <ul class="space-y-1">
          {% for page in menu_pages %}
            <li class="flex items-center justify-between gap-4 text-sm">
              <span class="truncate text-slate-700 dark:text-slate-300">{{ page.title }}</span>
              <span class="help shrink-0">kolejność: {{ page.order }}</span>
            </li>
          {% endfor %}
        </ul>
      {% else %}
        <p class="help">Żadna strona nie jest teraz wpieta do menu.</p>
      {% endif %}
    </div>
  </section>

  <form method="post" 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>
          <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 %}

    <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: {{ settings.updated_at|date:"d.m.Y H:i" }}</p>
        <button class="btn-primary" type="submit">Zapisz ustawienia</button>
      </div>
    </div>
  </form>
</div>
{% endblock %}