{% extends "admin/change_form.html" %}
{% load static i18n admin_urls admin_modify %}

{% block extrastyle %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'admin_custom/css/modern_admin_unified.css' %}">
<link rel="stylesheet" href="{% static 'admin_custom/css/themes_modern.css' %}">
<link rel="stylesheet" href="{% static 'admin_custom/css/theme_override.css' %}">
<!-- CORRECTION CRITIQUE : TabularInline - DOIT être chargé en dernier -->
<link rel="stylesheet" href="{% static 'admin_custom/css/tabular_inline_fix.css' %}">
{% endblock %}

{% block content %}
<div class="admin-frontend-changeform">
  <div style="display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--space-4); margin-bottom:var(--space-6);">
    <h1 class="page-title" style="margin:0;">
      {% block page_title %}{% if add %}<i class="fa-solid fa-plus"></i> Ajouter {{ opts.verbose_name }}{% else %}<i class="fa-solid fa-pen"></i> Modifier {{ original|truncatewords:"18" }}{% endif %}{% endblock %}
    </h1>
    <div class="page-actions">
      {% block page_actions %}
      <a href="{% url opts|admin_urlname:'changelist' %}" class="btn btn-secondary">Annuler</a>
      <button type="submit" form="{{ opts.model_name }}_form" class="btn btn-primary" style="color:#fff!important"><i class="fa-solid fa-check" style="color:#fff!important"></i> {% block submit_button_text %}{% if add %}{% translate 'Add' %}{% else %}{% translate 'Save' %}{% endif %}{% endblock %}</button>
      {% endblock %}
    </div>
  </div>

  {{ block.super }}
</div>
{% endblock %}

{% block field_sets %}
{# Parent + enfants AU MÊME NIVEAU via onglets (style Jazzmin), version modern (Bootstrap 5) #}
{% if inline_admin_formsets %}
<div class="card mb-4 admin-inline-card admin-parent-children-tabs">
  <div class="card-header" style="border-bottom: 1px solid var(--color-border);">
    <ul class="nav nav-tabs admin-inline-tabs" role="tablist" style="border-bottom: none;">
      <li class="nav-item" role="presentation">
        <button
          class="nav-link active"
          id="tab-parent-tab"
          data-bs-toggle="tab"
          data-bs-target="#tab-parent"
          type="button"
          role="tab"
          aria-controls="tab-parent"
          aria-selected="true"
        >
          {{ opts.verbose_name|capfirst }}
        </button>
      </li>
      {% for inline_admin_formset in inline_admin_formsets %}
      {% with inline_id=inline_admin_formset.formset.prefix %}
      <li class="nav-item" role="presentation">
        <button
          class="nav-link"
          id="inline-tab-{{ inline_id }}-tab"
          data-bs-toggle="tab"
          data-bs-target="#inline-tab-{{ inline_id }}"
          type="button"
          role="tab"
          aria-controls="inline-tab-{{ inline_id }}"
          aria-selected="false"
        >
          {{ inline_admin_formset.opts.verbose_name_plural|capfirst }}
        </button>
      </li>
      {% endwith %}
      {% endfor %}
    </ul>
  </div>
  <div class="card-body">
    <div class="tab-content admin-inline-tab-content">
      <div
        class="tab-pane fade show active"
        id="tab-parent"
        role="tabpanel"
        aria-labelledby="tab-parent-tab"
      >
        {# Fieldsets du parent dans des cartes modernes #}
        {% for fieldset in adminform %}
        <div class="card mb-4">
          {% if fieldset.name %}
          <div class="card-header">{{ fieldset.name }}</div>
          {% endif %}
          <div class="card-body">
            {% include "admin/includes/fieldset.html" with heading_level=3 prefix="fieldset" id_prefix=0 id_suffix=forloop.counter0 hide_heading=True %}
          </div>
        </div>
        {% endfor %}
{# NOTE: on ne ferme pas le tab-pane ici pour inclure after_field_sets dans le même onglet. #}
{% else %}
  {# Sans inlines : fallback normal #}
  <div class="row g-4" style="display:flex; flex-wrap:wrap; gap:var(--space-6);">
    <div class="col-main" style="flex:1; min-width:0;">
      {% for fieldset in adminform %}
      <div class="card mb-4">
        {% if fieldset.name %}
        <div class="card-header">{{ fieldset.name }}</div>
        {% endif %}
        <div class="card-body">
          {% include "admin/includes/fieldset.html" with heading_level=3 prefix="fieldset" id_prefix=0 id_suffix=forloop.counter0 hide_heading=True %}
        </div>
      </div>
      {% endfor %}

      {% block after_field_sets %}{% endblock %}
    </div>
  </div>
{% endif %}
{% endblock %}

{% block inline_field_sets %}
{% if inline_admin_formsets %}
      </div>{# /#tab-parent #}

      {% for inline_admin_formset in inline_admin_formsets %}
      {% with inline_id=inline_admin_formset.formset.prefix %}
      <div
        class="tab-pane fade"
        id="inline-tab-{{ inline_id }}"
        role="tabpanel"
        aria-labelledby="inline-tab-{{ inline_id }}-tab"
      >
        {% include inline_admin_formset.opts.template %}
      </div>
      {% endwith %}
      {% endfor %}
    </div>
  </div>
</div>
{% endif %}
{% endblock %}

{% block submit_buttons_bottom %}
<div class="submit-row">
  <input type="submit" value="{% if add %}{% translate 'Add' %}{% else %}{% translate 'Save' %}{% endif %}" class="btn btn-primary" name="_save" style="color:#fff!important">
  {% if not add %}
  <input type="submit" value="{% translate 'Save and continue editing' %}" name="_continue" class="btn btn-secondary" style="background:var(--color-surface);border:1px solid var(--color-border);color:var(--color-text);">
  <input type="submit" value="{% translate 'Save and add another' %}" name="_addanother" class="btn btn-secondary" style="background:var(--color-surface);border:1px solid var(--color-border);color:var(--color-text);">
  {% endif %}
  <a href="{% url opts|admin_urlname:'changelist' %}" class="btn btn-secondary"><i class="fa-solid fa-times"></i> {% translate 'Cancel' %}</a>
</div>
{% endblock %}