{% load i18n admin_urls %}
<div class="js-inline-admin-formset inline-group"
     id="{{ inline_admin_formset.formset.prefix }}-group"
     data-inline-type="stacked"
     data-inline-formset="{{ inline_admin_formset.inline_formset_data }}">
<fieldset class="module {{ inline_admin_formset.classes }} !border-0 !p-0">
  {% if inline_admin_formset.formset.max_num == 1 %}
    <h2 class="text-lg font-bold tracking-tight text-slate-900 dark:text-white mb-4">{{ inline_admin_formset.opts.verbose_name|capfirst }}</h2>
  {% else %}
    <h2 class="text-lg font-bold tracking-tight text-slate-900 dark:text-white mb-4">{{ inline_admin_formset.opts.verbose_name_plural|capfirst }}</h2>
  {% endif %}
{{ inline_admin_formset.formset.management_form }}
{{ inline_admin_formset.formset.non_form_errors }}

<div class="space-y-4">
{% for inline_admin_form in inline_admin_formset %}
  <div class="inline-related border border-slate-100 dark:border-zinc-800 rounded-xl bg-white/50 dark:bg-black/10 overflow-hidden transition-all duration-200{% if inline_admin_form.original or inline_admin_form.show_url %} has_original{% endif %}{% if forloop.last and inline_admin_formset.has_add_permission %} empty-form last-related{% endif %}" 
       id="{{ inline_admin_formset.formset.prefix }}-{% if forloop.last and inline_admin_formset.has_add_permission %}empty{% else %}{{ forloop.counter0 }}{% endif %}">
    
    <h3 class="flex items-center justify-between px-4 py-3 bg-slate-50/75 dark:bg-zinc-800/40 border-b border-slate-100 dark:border-zinc-800 text-sm font-semibold text-slate-700 dark:text-zinc-300">
      <div class="flex items-center gap-2">
        <span class="inline-collapsible-toggle cursor-pointer hover:text-slate-950 dark:hover:text-white transition-colors mr-1">
          <svg class="w-4 h-4 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>
        </span>
        <span>{{ inline_admin_formset.opts.verbose_name|capfirst }}:</span>
        <span class="inline_label font-normal text-slate-500 dark:text-zinc-400">
          {% if inline_admin_form.original %}
            {{ inline_admin_form.original }}
            {% if inline_admin_form.model_admin.show_change_link and inline_admin_form.model_admin.has_registered_model %}
              <a href="{% url inline_admin_form.model_admin.opts|admin_urlname:'change' inline_admin_form.original.pk|admin_urlquote %}" class="ml-2 text-xs text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300 font-semibold transition-colors">{% if inline_admin_formset.has_change_permission %}{% translate "Change" %}{% else %}{% translate "View" %}{% endif %}</a>
            {% endif %}
          {% else %}
            #{{ forloop.counter }}
          {% endif %}
        </span>
        {% if inline_admin_form.show_url %}
          <a href="{{ inline_admin_form.absolute_url }}" class="text-xs text-slate-400 hover:text-slate-600 dark:hover:text-zinc-200">{% translate "View on site" %}</a>
        {% endif %}
      </div>
      
      {% if inline_admin_formset.formset.can_delete and inline_admin_formset.has_delete_permission and inline_admin_form.original %}
        <span class="delete flex items-center gap-1.5 text-xs text-red-500 font-medium">
          {{ inline_admin_form.deletion_field.field }}
          {{ inline_admin_form.deletion_field.label_tag }}
        </span>
      {% endif %}
    </h3>

    <div class="inline-related-content p-4 space-y-4">
      {% if inline_admin_form.form.non_field_errors %}
        <div class="p-3 bg-red-50 dark:bg-red-950/10 text-xs text-red-500 rounded-lg">{{ inline_admin_form.form.non_field_errors }}</div>
      {% endif %}
      
      {% for fieldset in inline_admin_form %}
        {% include "admin/includes/fieldset.html" %}
      {% endfor %}
      
      {% if inline_admin_form.needs_explicit_pk_field %}{{ inline_admin_form.pk_field.field }}{% endif %}
      {% if inline_admin_form.fk_field %}{{ inline_admin_form.fk_field.field }}{% endif %}
    </div>
  </div>
{% endfor %}
</div>
</fieldset>
</div>