{% load i18n admin_urls static %}
<div class="js-inline-admin-formset inline-group dark:bg-gray-800"
     id="{{ inline_admin_formset.formset.prefix }}-group"
     data-inline-type="stacked"
     data-inline-formset="{{ inline_admin_formset.inline_formset_data }}">

<fieldset class="module bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 mb-6">
  
  <h2 class="text-lg font-semibold text-gray-900 dark:text-white px-4 py-3 bg-gray-50 dark:bg-gray-750 border-b border-gray-200 dark:border-gray-700 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center gap-2"
      onclick="toggleInlineSection(this)">
    <svg class="section-collapse-icon w-4 h-4 text-gray-500 transform transition-transform duration-200" 
         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>
    {{ inline_admin_formset.opts.verbose_name_plural|capfirst }}
  </h2>
  
  {{ inline_admin_formset.formset.management_form }}

  {% for inline_admin_form in inline_admin_formset %}
  <div class="inline-related{% if forloop.last and inline_admin_formset.has_add_permission %} empty-form{% endif %}"
       id="{{ inline_admin_formset.formset.prefix }}-{% if forloop.last and inline_admin_formset.has_add_permission %}empty{% else %}{{ forloop.counter0 }}{% endif %}">
    
    <div class="inline-header flex items-center justify-between px-4 py-3 bg-gray-100 dark:bg-gray-700 border-t border-gray-200">
      <div class="flex items-center gap-3 cursor-pointer flex-1" onclick="toggleInlineCollapse(this.parentElement)">
        <svg class="collapse-icon w-4 h-4 text-gray-500 transform transition-transform duration-200 rotate-180" 
             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>
        <h3 class="inline-label text-sm font-medium text-gray-700 dark:text-gray-300">
          {{ inline_admin_form.original|default:"New item" }}
        </h3>
      </div>
      {% if inline_admin_formset.formset.can_delete and inline_admin_form.original %}
      <label class="inline-flex items-center gap-2 text-sm text-gray-500 hover:text-red-600 cursor-pointer">
        {{ inline_admin_form.form.DELETE }}
        <span>Delete</span>
      </label>
      {% endif %}
    </div>
    
    <div class="inline-content px-4 py-4" style="display: none;">
      {# Hidden fields - CRITICAL for saving #}
      {% if inline_admin_form.pk_field %}{{ inline_admin_form.pk_field.field }}{% endif %}
      {% if inline_admin_form.fk_field %}{{ inline_admin_form.fk_field.field }}{% endif %}
      
      
      
      {# Form errors #}
      {% if inline_admin_form.form.non_field_errors %}
      <div class="text-red-600 text-sm mb-4">{{ inline_admin_form.form.non_field_errors }}</div>
      {% endif %}
      
      {% for fieldset in inline_admin_form %}
        {% for line in fieldset %}
          {% for field in line %}
            {% if not field.field.is_hidden %}
            <div class="mb-4">
              <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                {{ field.field.label }}
                {% if field.field.required %}<span class="text-red-500">*</span>{% endif %}
              </label>
              {% if field.is_readonly %}
                <div class="readonly-field text-gray-900 dark:text-gray-100 py-2">{{ field.contents }}</div>
              {% else %}
                {{ field.field }}
                {% if field.field.errors %}
                <div class="text-red-600 text-sm mt-1">{{ field.field.errors }}</div>
                {% endif %}
              {% endif %}
            </div>
            {% endif %}
          {% endfor %}
        {% endfor %}
      {% endfor %}
    </div>
    
  </div>
  {% endfor %}

</fieldset>
</div>

<style>
.add-row {
  background: transparent;
  border: none;
  padding-left: 1rem;
}
.inline-related .delete,
.inline-deletelink {
  display: none !important;
}
.add-row a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #2563eb;
  text-decoration: none;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.add-row a:hover {
  color: #1d4ed8;
  text-decoration: underline;
}
.add-row a::before {
  content: "+";
  font-size: 1.25rem;
  margin-right: 0.25rem;
}

</style>

<script>
function toggleInlineCollapse(header) {
  var content = header.nextElementSibling;
  var icon = header.querySelector('.collapse-icon');
  
  if (content.style.display === 'none') {
    content.style.display = 'block';
    icon.classList.remove('rotate-180');
  } else {
    content.style.display = 'none';
    icon.classList.add('rotate-180');
  }
}

function toggleInlineSection(header) {
  var fieldset = header.closest('fieldset');
  var content = fieldset.querySelectorAll('.inline-related, .add-row');
  var icon = header.querySelector('.section-collapse-icon');
  
  content.forEach(function(el) {
    if (el.style.display === 'none') {
      el.style.display = '';
      icon.classList.remove('rotate-180');
    } else {
      el.style.display = 'none';
      icon.classList.add('rotate-180');
    }
  });
}

</script>