{% load i18n daisy_theme %}
<div class="card bg-base-100 border border-base-200 shadow-sm mb-6 daisy-fieldset {{ fieldset.classes }} overflow-hidden"
     x-data="{ isCollapsed: {% if 'collapse' in fieldset.classes %}true{% else %}false{% endif %} }">

  {# ── Fieldset Header (only if named) ── #}
  {% if fieldset.name %}
  <div class="bg-gradient-to-l from-primary/5 via-base-100 to-base-100 border-b border-base-200 px-5 md:px-6 py-3.5 flex items-center justify-between {% if 'collapse' in fieldset.classes %}cursor-pointer select-none hover:from-primary/10 transition-all duration-200{% endif %}"
       {% if 'collapse' in fieldset.classes %}@click="isCollapsed = !isCollapsed"{% endif %}>
    <div class="flex items-center gap-2.5">
      <div class="w-7 h-7 rounded-lg bg-primary/10 flex items-center justify-center shrink-0">
        {% daisy_icon "folder" "w-3.5 h-3.5 text-primary" %}
      </div>
      <div>
        <h3 class="text-sm font-bold text-base-content">{{ fieldset.name }}</h3>
        {% if fieldset.description %}
          <p class="text-[11px] text-base-content/50 mt-0.5 leading-normal">{{ fieldset.description|safe }}</p>
        {% endif %}
      </div>
    </div>
    {% if 'collapse' in fieldset.classes %}
      <button type="button" class="btn btn-ghost btn-xs btn-circle" aria-label="Toggle Fieldset">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 transition-transform duration-200" :class="{ 'rotate-180': !isCollapsed }" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
        </svg>
      </button>
    {% endif %}
  </div>
  {% endif %}

  {# ── Field Rows ── #}
  <div class="p-5 md:p-6" x-show="!isCollapsed" x-transition>
    <div class="space-y-0 divide-y divide-base-200/60">
      {% for line in fieldset %}
        <div class="form-row py-4 first:pt-0 last:pb-0 {% 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 and line.errors %}
            <div class="field-errors mb-2">
              {{ line.errors }}
            </div>
          {% endif %}

          <div class="grid grid-cols-1 {% if line.fields|length > 1 %}md:grid-cols-{{ line.fields|length }} gap-5{% endif %}">
            {% for field in line %}
              <div class="form-control w-full">
                {% if not line.fields|length == 1 and not field.is_readonly and field.errors %}
                  <div class="field-errors mb-1.5">
                    {{ field.errors }}
                  </div>
                {% endif %}

                {% if field.is_checkbox %}
                  {# ── Checkbox Toggle Card ── #}
                  <label for="{{ field.field.id_for_label }}" class="flex items-center gap-3.5 p-3.5 rounded-xl border border-base-200 bg-base-200/20 hover:bg-primary/5 hover:border-primary/30 cursor-pointer transition-all duration-200 select-none group mt-1">
                    {{ field.field }}
                    <div class="flex flex-col">
                      <span class="text-sm font-semibold text-base-content group-hover:text-primary transition-colors">
                        {{ field.field.label }}
                        {% if field.field.field.required %}<span class="text-error font-bold">*</span>{% endif %}
                      </span>
                      {% if field.field.help_text %}
                        <span class="text-[11px] text-base-content/50 mt-0.5 leading-normal">{{ field.field.help_text|safe }}</span>
                      {% endif %}
                    </div>
                  </label>
                {% else %}
                  {# ── Standard Field ── #}
                  <div class="space-y-1.5">
                    <label for="{{ field.field.id_for_label }}" class="label py-0 px-0 flex justify-between items-center">
                      <span class="label-text text-xs font-bold text-base-content/70 flex items-center gap-1.5">
                        {% if field.field.field.required %}
                          <span class="w-1.5 h-1.5 rounded-full bg-primary shrink-0" title="{% translate 'Required' %}"></span>
                        {% endif %}
                        <span>{{ field.field.label }}</span>
                        {% if field.field.field.required %}<span class="text-error/70 text-[10px]">*</span>{% endif %}
                      </span>
                    </label>

                    {% if field.is_readonly %}
                      <div class="bg-base-200/40 border border-base-200 p-3 rounded-lg text-xs font-mono text-base-content/80 select-all">
                        {{ field.contents }}
                      </div>
                    {% else %}
                      <div class="daisy-field-wrapper w-full">
                        {{ field.field }}
                      </div>
                    {% endif %}

                    {% if field.field.help_text %}
                      <div class="text-[11px] text-base-content/45 pt-0.5 leading-normal flex items-start gap-1">
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 shrink-0 mt-px opacity-60" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" x2="12.01" y1="17" y2="17"/></svg>
                        <span>{{ field.field.help_text|safe }}</span>
                      </div>
                    {% endif %}
                  </div>
                {% endif %}
              </div>
            {% endfor %}
          </div>
        </div>
      {% endfor %}
    </div>
  </div>
</div>