{% 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 content %}
{% if settings_object.enabled and not settings_object.css and not settings_object.classes %}
  <div class="card border-amber-300 dark:border-amber-800">
    <div class="card-body text-sm text-amber-800 dark:text-amber-200">
      Własne style są włączone, ale puste - serwis wygląda tak, jak ustawiają go
      zakładki Wyglądu. Wpisz poniżej CSS albo zdejmij włącznik.
    </div>
  </div>
{% elif settings_object.enabled %}
  <div class="card">
    <div class="card-body text-sm text-slate-500 dark:text-slate-400">
      Na stronach serwisu pracuje własny CSS ({{ settings_object.css_lines }} linii){% if settings_object.classes %}
      i klasy <span class="font-mono text-slate-700 dark:text-slate-200">{{ settings_object.classes }}</span>{% endif %}.
    </div>
  </div>
{% endif %}

{% if active_tab.intro %}
  <p class="max-w-2xl text-sm text-slate-500 dark:text-slate-400">{{ active_tab.intro }}</p>
{% endif %}

<form method="post" novalidate class="max-w-2xl 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 gap-3">
      {% include "panel/partials/dirty-note.html" %}
      <button class="btn-primary" type="submit">Zapisz style</button>
      <a class="btn-ghost" href="/" target="_blank" rel="noopener">Zobacz serwis</a>
    </div>
  </div>
</form>
{% endblock %}