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

{% block panel_title %}{% if object %}Edycja roli{% else %}Nowa rola{% endif %}{% endblock %}
{% block heading %}{% if object %}{{ object.name }}{% else %}Nowa rola{% endif %}{% endblock %}
{% block subheading %}<p class="text-sm text-slate-500 dark:text-slate-400">Zaznacz sekcje panelu, które ma widzieć konto z tą rolą.</p>{% endblock %}
{% block actions %}<a class="btn-ghost" href="{% url 'panel:roles:index' %}">Wróć do listy</a>{% endblock %}

{% block content %}
<form method="post" novalidate class="space-y-6">
  {% csrf_token %}

  <div class="card max-w-2xl">
    <div class="card-body space-y-4">
      {% if form.non_field_errors %}
        <div class="border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800 dark:border-red-900 dark:bg-red-950 dark:text-red-200">
          {% for error in form.non_field_errors %}<p>{{ error }}</p>{% endfor %}
        </div>
      {% endif %}
      {% for field in form %}
        {% if field.name != 'modules' %}{% include 'panel/partials/field.html' %}{% endif %}
      {% endfor %}
    </div>
  </div>

  <div class="card">
    <div class="card-body space-y-4">
      <div>
        <span class="label">{{ form.modules.label }}</span>
        <p class="help">Pulpit i Moje konto widzi każde konto z dostępem do panelu - tu wybierasz resztę.</p>
        {% for error in form.modules.errors %}<p class="error-text">{{ error }}</p>{% endfor %}
      </div>
      <div class="grid gap-6 md:grid-cols-2 xl:grid-cols-3">
        {% for group in form.module_groups %}
          <div class="space-y-2">
            <h3 class="text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">{{ group.title }}</h3>
            <div class="space-y-2">
              {% for item in group.items %}
                <label class="flex items-start gap-3 text-sm" for="{{ item.id_for_label }}">
                  <span class="pt-0.5">{{ item.tag }}</span>
                  <span class="min-w-0">{{ item.choice_label }}</span>
                </label>
              {% endfor %}
            </div>
          </div>
        {% endfor %}
      </div>
    </div>
  </div>

  <div class="flex gap-2">
    {% include "panel/partials/dirty-note.html" %}
    <button class="btn-primary" type="submit">Zapisz</button>
    <a class="btn-ghost" href="{% url 'panel:roles:index' %}">Anuluj</a>
  </div>
</form>
{% endblock %}