{% 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-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: {{ settings.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="space-y-1">
        <h2 class="text-sm font-semibold text-slate-900 dark:text-slate-100">Slajdy slidera</h2>
        <p class="help">Dodaj slajdy wyświetlane w sliderze na stronie głównej.</p>
      </div>

      {% if slides %}
        <ul class="divide-y divide-slate-100 dark:divide-slate-800">
          {% for slide in slides %}
            <li class="flex items-center gap-4 py-3">
              <img src="{{ slide.image.url }}" alt="{{ slide }}"
                   class="h-12 w-20 shrink-0 rounded object-cover">
              <div class="min-w-0 flex-1">
                <p class="truncate text-sm font-medium text-slate-900 dark:text-slate-100">{{ slide }}</p>
                <p class="help truncate">
                  Kolejność: {{ slide.order }}{% if slide.url %} &middot; {{ slide.url }}{% endif %}
                </p>
              </div>
              {% if slide.is_active %}
                <span class="badge bg-emerald-100 text-emerald-700 dark:bg-emerald-950 dark:text-emerald-300">aktywny</span>
              {% else %}
                <span class="badge bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-300">wyłączony</span>
              {% endif %}
              <div class="flex gap-2">
                <a class="btn-ghost !px-3 !py-1 text-xs" href="{% url 'panel:banner:slide_edit' slide.pk %}">Edytuj</a>
                <form method="post" action="{% url 'panel:banner:slide_delete' slide.pk %}"
                      data-confirm="Usunąć slajd {{ slide }}?">
                  {% 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 slajdów. Dodaj pierwszy poniżej.</p>
      {% endif %}

      <form method="post" action="{% url 'panel:banner:slide_create' %}" enctype="multipart/form-data"
            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">Nowy slajd</h3>
        {% include 'panel/partials/form.html' with form=slide_form %}
        <button class="btn-primary" type="submit">Dodaj slajd</button>
      </form>
    </div>
  </section>
</div>
{% endblock %}