{% load adminita_tags %}
<fieldset class="module aligned {{ fieldset.classes }}{% if not forloop.first %} border-t border-gray-200 dark:border-gray-700{% endif %}">
    
    {% if fieldset.name %}
    {# Collapsible Header #}
    <h2 class="fieldset-header flex items-center gap-2 px-6 py-4 bg-gray-50 dark:bg-gray-750 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
        onclick="toggleFieldset(this)">
        <svg class="collapse-icon w-4 h-4 text-gray-500 transform transition-transform duration-200 -rotate-90" 
             fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
        </svg>
        <span class="text-lg font-semibold text-gray-900 dark:text-white">
            {{ fieldset.name }}
        </span>
    </h2>
    {% if fieldset.description %}
    <p class="fieldset-description px-6 pb-2 text-sm text-gray-600 dark:text-gray-400 hidden">
        {{ fieldset.description|safe }}
    </p>
    {% endif %}
    {% endif %}
    
    {# Fieldset Content #}
    <div class="fieldset-content px-6 py-6 space-y-6{% if fieldset.name %} hidden{% endif %}">
        {% for line in fieldset %}
        <div class="form-row{% if line.fields|length > 1 %} grid grid-cols-1 md:grid-cols-{{ line.fields|length }} gap-6{% endif %}{% if line.errors %} errors{% endif %}{% if not line.has_visible_field %} hidden{% endif %}">
            
            {% if line.fields|length == 1 %}{{ line.errors }}{% endif %}
            
            {% for field in line %}
            <div{% if not line.fields|length == 1 %} class="fieldBox{% if field.field.name %} field-{{ field.field.name }}{% endif %}{% if not field.is_readonly and field.errors %} errors{% endif %}"{% endif %}>
                
                {% if field.is_checkbox %}
                {# Checkbox fields - label comes after the input #}
                <div class="flex items-center gap-2">
                    {{ field.field }}
                    {{ field.label_tag }}
                </div>
                {% else %}
                {# Regular fields and readonly fields #}
                {{ field.label_tag }}
                
                {% if field.is_readonly %}
                <div class="px-3 py-2 bg-gray-50 dark:bg-gray-750 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-900 dark:text-gray-100">
                    {{ field|safe_contents }}
                </div>
                {% else %}
                {{ field.field }}
                {% endif %}
                {% endif %}
                
                {# Help text - different access for readonly vs regular fields #}
                {% if field.is_readonly %}
                    {% if field.help_text %}
                    <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
                        {{ field.help_text|safe }}
                    </p>
                    {% endif %}
                {% else %}
                    {% if field.field.help_text %}
                    <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
                        {{ field.field.help_text|safe }}
                    </p>
                    {% endif %}
                {% endif %}
                
                {# Field errors - only for non-readonly fields #}
                {% if not field.is_readonly and field.field.errors %}
                <div class="mt-2 text-sm text-red-600 dark:text-red-400">
                    {{ field.field.errors }}
                </div>
                {% endif %}
                
            </div>
            {% endfor %}
        </div>
        {% endfor %}
    </div>
</fieldset>