{% load i18n admin_urls %}
<fieldset
  id="fieldset-{{ forloop.counter }}"
  class="scroll-mt-24{% if 'user_permissions' in fieldset.fields or 'groups' in fieldset.fields or 'permissions' in fieldset.fields %} forge-fieldset-permissions{% endif %}"
>
  {% if fieldset.name %}
    <div class="px-4 py-3 border-b border-slate-200 dark:border-slate-800 bg-slate-50/60 dark:bg-slate-900/40">
      <h3 class="text-xs font-semibold uppercase tracking-wide text-slate-500">{{ fieldset.name }}</h3>
      {% if 'user_permissions' in fieldset.fields or 'groups' in fieldset.fields or 'permissions' in fieldset.fields %}
        <p class="mt-2 text-sm text-slate-600 dark:text-slate-400 font-normal normal-case tracking-normal">
          {% blocktrans %}Use the search box to filter long lists, then the arrows to move items. Groups bundle permissions; individual permissions are optional fine-grained control.{% endblocktrans %}
        </p>
      {% endif %}
    </div>
  {% elif 'user_permissions' in fieldset.fields or 'groups' in fieldset.fields or 'permissions' in fieldset.fields %}
    <div class="px-4 py-3 border-b border-slate-200 dark:border-slate-800 bg-slate-50/60 dark:bg-slate-900/40">
      <p class="text-sm text-slate-600 dark:text-slate-400">
        {% blocktrans %}Use the search box to filter long lists, then the arrows to move items. Groups bundle permissions; individual permissions are optional fine-grained control.{% endblocktrans %}
      </p>
    </div>
  {% endif %}
  {% if fieldset.description %}
    <p class="px-4 py-2 text-sm text-slate-500 border-b border-slate-200 dark:border-slate-800">{{ fieldset.description|safe }}</p>
  {% endif %}
  {% for line in fieldset %}
    {% for field in line %}
      <div class="forge-form-row {% if field.is_readonly %}opacity-80{% endif %}">
        <div class="forge-form-label">
          {% if field.is_checkbox %}
            <span class="block text-sm font-medium text-slate-700 dark:text-slate-200">{{ field.field.label }}</span>
          {% else %}
            {% if field.field.name %}
              <label class="block text-sm font-medium text-slate-700 dark:text-slate-200">
                {{ field.field.label }}
                {% if not field.is_readonly and field.field.field.required %}
                  <span class="text-rose-500">*</span>
                {% endif %}
              </label>
            {% endif %}
          {% endif %}
        </div>
        <div class="forge-form-control">
          {% if field.is_readonly %}
            <div class="rounded-md border border-slate-200 dark:border-slate-700 bg-slate-100 dark:bg-slate-800 px-3 py-2 text-sm text-slate-700 dark:text-slate-200">
              {{ field.contents }}
            </div>
          {% else %}
            {{ field.field }}
            {% if field.field.errors %}
              <ul class="space-y-1">
                {% for error in field.field.errors %}
                  <li class="text-xs text-rose-600 dark:text-rose-300">{{ error }}</li>
                {% endfor %}
              </ul>
            {% endif %}
          {% endif %}
          {% if field.field.help_text %}
            <p class="text-xs text-slate-500">{{ field.field.help_text|safe }}</p>
          {% endif %}
        </div>
      </div>
    {% endfor %}
  {% endfor %}
</fieldset>