{% load i18n %}
<fieldset class="module aligned {{ fieldset.classes }} flex flex-col gap-10 mb-16 last:mb-0" {% if fieldset.name %} aria-labelledby="{{ prefix }}-{{ id_prefix}}-{{ id_suffix }}-heading"{% endif %}>
    {% if fieldset.name %}
        <div class="border-b border-gray-100 dark:border-slate-700/50 pb-5">
            {% if fieldset.is_collapsible %}<details class="group" open><summary class="list-none cursor-pointer">{% endif %}
            <h{{ heading_level|default:2 }} id="{{ prefix }}-{{ id_prefix}}-{{ id_suffix }}-heading" 
                class="text-xl font-black tracking-tight text-slate-800 dark:text-white flex items-center justify-between">
                <span class="flex items-center gap-3">
                    <i class="pi pi-bookmark-fill text-blue-500"></i>
                    {{ fieldset.name }}
                </span>
                {% if fieldset.is_collapsible %}
                    <i class="pi pi-chevron-down text-slate-400 group-open:rotate-180 transition-transform duration-300"></i>
                {% endif %}
            </h{{ heading_level|default:2 }}>
            {% if fieldset.is_collapsible %}</summary>{% endif %}
        </div>
    {% endif %}
    
    {% if fieldset.description %}
        <div class="description bg-blue-50/30 dark:bg-blue-900/10 p-4 rounded-2xl border-l-4 border-blue-400 text-sm text-slate-600 dark:text-slate-400 font-medium italic">
            {{ fieldset.description|safe }}
        </div>
    {% endif %}

    <div class="flex flex-col gap-8">
    {% for line in fieldset %}
        <div class="form-row border-b border-gray-50 dark:border-slate-700/30 last:border-0 pb-8 last:pb-0 {% if line.fields|length == 1 and line.errors %} bg-red-500/5 -mx-6 px-6 rounded-2xl {% endif %}{% if not line.has_visible_field %} hidden{% endif %}{% for field in line %}{% if field.field.name %} field-{{ field.field.name }}{% endif %}{% endfor %}">
            {% if line.fields|length == 1 %}{{ line.errors }}{% else %}<div class="grid grid-cols-1 md:grid-cols-2 gap-10 items-start">{% endif %}
            {% for field in line %}
                {% if field.is_fieldset %}<fieldset class="flex flex-col gap-4"{% if field.field.help_text %} aria-describedby="{{ field.field.id_for_label }}_helptext"{% endif %}>{{ field.label_tag }}{% endif %}
                <div class="flex flex-col gap-2">
                    {% if not line.fields|length == 1 and not field.is_readonly %}{{ field.errors }}{% endif %}
                    
                    <div class="flex flex-col gap-2 {% if field.is_checkbox %} flex-row items-center gap-4 bg-gray-50 dark:bg-slate-900/40 p-5 rounded-2xl border border-gray-100 dark:border-slate-700/50 {% endif %}">
                        {% if field.is_checkbox %}
                            <div class="relative flex items-center">
                                {{ field.field }}
                            </div>
                            {% if not field.is_fieldset %}
                                <label class="text-sm font-black text-slate-700 dark:text-slate-200 cursor-pointer" for="{{ field.field.id_for_label }}">
                                    {{ field.field.label }}
                                </label>
                            {% endif %}
                        {% else %}
                            {% if not field.is_fieldset %}
                                <label class="text-[11px] font-black uppercase tracking-[0.15em] text-slate-400 dark:text-slate-500 ml-1 flex items-center justify-between" for="{{ field.field.id_for_label }}">
                                    <span>{{ field.field.label }}</span>
                                    {% if field.field.field.required %}
                                        <i class="pi pi-asterisk text-red-500 text-[8px]" title="{% translate 'Obbligatorio' %}"></i>
                                    {% endif %}
                                </label>
                            {% endif %}
                            
                            {% if field.is_readonly %}
                                <div class="readonly bg-slate-50 dark:bg-slate-900/60 px-5 py-4 rounded-2xl text-sm font-bold text-slate-600 dark:text-slate-300 border border-slate-100 dark:border-slate-700">
                                    {{ field.contents }}
                                </div>
                            {% else %}
                                <div class="custom-input-wrapper">
                                    {{ field.field }}
                                </div>
                            {% endif %}
                        {% endif %}
                    </div>

                    {% if field.field.help_text %}
                        <div class="help text-[10px] font-bold text-slate-400 uppercase tracking-widest ml-1 flex items-center gap-2 {% if field.field.is_hidden %} hidden{% endif %}"{% if field.field.id_for_label %} id="{{ field.field.id_for_label }}_helptext"{% endif %}>
                            <i class="pi pi-info-circle opacity-50"></i>
                            <div>{{ field.field.help_text|safe }}</div>
                        </div>
                    {% endif %}
                </div>
                {% if field.is_fieldset %}</fieldset>{% endif %}
            {% endfor %}
            {% if not line.fields|length == 1 %}</div>{% endif %}
        </div>
    {% endfor %}
    </div>
    
    {% if fieldset.name and fieldset.is_collapsible %}</details>{% endif %}
</fieldset>

<style>
    /* Neo-Angular Modern Input Styling */
    .custom-input-wrapper input:not([type="checkbox"]):not([type="radio"]), 
    .custom-input-wrapper select, 
    .custom-input-wrapper textarea {
        width: 100% !important;
        background: #f8fafc !important;
        border: 2px solid #f1f5f9 !important;
        border-radius: 12px !important;
        padding: 0.875rem 1.25rem !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        color: #1e293b !important;
        outline: none !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        box-sizing: border-box !important;
    }
    
    [data-theme="dark"] .custom-input-wrapper input:not([type="checkbox"]):not([type="radio"]), 
    [data-theme="dark"] .custom-input-wrapper select, 
    [data-theme="dark"] .custom-input-wrapper textarea {
        background: #0f172a !important;
        border-color: #1e293b !important;
        color: #f1f5f9 !important;
    }
    
    .custom-input-wrapper input:focus, 
    .custom-input-wrapper select:focus, 
    .custom-input-wrapper textarea:focus {
        background: #fff !important;
        border-color: #3b82f6 !important;
        box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1) !important;
        color: #000 !important;
    }
    
    [data-theme="dark"] .custom-input-wrapper input:focus, 
    [data-theme="dark"] .custom-input-wrapper select:focus, 
    [data-theme="dark"] .custom-input-wrapper textarea:focus {
        background: #020617 !important;
        color: #fff !important;
    }

    /* Select specific styling */
    .custom-input-wrapper select {
        padding-right: 2.5rem !important;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 1rem center;
        background-size: 1rem;
    }
    
    /* Error styling */
    .errorlist {
        background: #fef2f2;
        border-radius: 8px;
        color: #b91c1c;
        font-size: 11px;
        font-weight: 800;
        margin-bottom: 0.5rem;
        list-style: none;
        padding: 0.5rem 1rem;
        border-left: 3px solid #ef4444;
    }
    [data-theme="dark"] .errorlist {
        background: rgba(220, 38, 38, 0.1);
        color: #fecaca;
    }
</style>