{% extends '@admin/base.html.twig' %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        .inv-layout { display:grid; grid-template-columns: minmax(0,1fr); gap: 14px; }
        .inv-filter { border: 1px solid #dee2e6; border-radius: 0.375rem; padding: 1rem; background-color: #fff; }
        #invFilterPanel {
            --bs-offcanvas-width: var(--aside-width, 268px);
            top: var(--inventory-offcanvas-top, 100px);
            height: calc(100vh - var(--inventory-offcanvas-top, 100px));
            z-index: 1030;
        }
        .inv-filter .form-label { font-size:.82rem; color:#64748b; margin-bottom:.25rem; }
        .inv-card { border:1px solid #e5e7eb; border-radius:12px; }
        .inv-tree-table thead th { font-size:.78rem; text-transform:uppercase; color:#6b7280; }
        .inv-prod-row { background:#f9fafb; }
        .inv-toggle { width:28px; height:28px; border:1px solid #d1d5db; border-radius:8px; background:#fff; font-weight:700; line-height:1; }
        .inv-toggle[disabled] { opacity:.4; cursor:not-allowed; }
        .inv-child-cell { padding-left:44px !important; background:#fff; }
        .inv-badge { font-size:.72rem; padding:.15rem .45rem; border-radius:999px; border:1px solid #e2e8f0; background:#f8fafc; }
        .inv-badge-gap { font-size:.72rem; padding:.15rem .45rem; border-radius:999px; border:1px solid transparent; }
        .inv-badge-gap.zero { background:#f8fafc; border-color:#e2e8f0; color:#334155; }
        .inv-badge-gap.pos { background:#dcfce7; border-color:#86efac; color:#166534; }
        .inv-badge-gap.neg { background:#fee2e2; border-color:#fca5a5; color:#991b1b; }
        .inv-thumb { width:32px; height:40px; border-radius:8px; border:1px solid #e2e8f0; object-fit:cover; background:#fff; }
        .inv-count-input { width: 86px; min-width: 86px; margin: 0 auto; text-align: center; }
        .js-line-row.inv-line-selected { border-left: 3px solid #3b82f6 !important; }
        .js-line-row.inv-line-selected td { background: #eaf2ff !important; }
        .inv-line-corrected { background:#ecfdf3 !important; border-left:3px solid #22c55e; }
        .inv-line-not-corrected { background:#fffaf0 !important; border-left:3px solid #f59e0b; }
        .inv-corr-badge { font-size:.68rem; padding:.14rem .45rem; border-radius:999px; border:1px solid transparent; }
        .inv-corr-badge.ok { background:#dcfce7; border-color:#86efac; color:#166534; }
        .inv-corr-badge.no { background:#fef3c7; border-color:#fcd34d; color:#92400e; }
        .inv-name-cell { display:flex; align-items:flex-start; justify-content:space-between; gap:.6rem; }
        .inv-name-main { min-width:0; }
        .inv-name-main .small { overflow-wrap:anywhere; }
        .inv-footer { position:sticky; bottom:0; background:#fff; border-top:1px solid #e5e7eb; padding:.75rem; z-index:2; }
        .inv-mobile-filter-btn { display:inline-flex; align-items:center; gap:.45rem; margin-bottom: 10px; }
        .inv-mobile-filter-btn i { margin-right:0 !important; line-height:1; }
        .inv-applied-filters { display:flex; flex-wrap:wrap; gap:.45rem; }
        .inv-applied-filter-chip { display:inline-flex; align-items:center; gap:.35rem; padding:.38rem .72rem; border-radius:999px; border:1px solid #dbe5f0; background:#fff; color:#334155; font-size:.78rem; font-weight:600; box-shadow:0 2px 8px rgba(15,23,42,.04); }
        .inv-applied-filter-chip i { color:#64748b; }
        .inv-content-loading { position:relative; min-height:240px; }
        .inv-loading-overlay {
            position:absolute; inset:0; z-index:5; background:rgba(255,255,255,.82);
            display:flex; align-items:center; justify-content:center; flex-direction:column; gap:.6rem;
        }
        .inv-loading-overlay.d-none { display:none !important; }
        .inv-loading-spinner {
            width:2.2rem; height:2.2rem; border:.26rem solid #dbeafe; border-top-color:#2563eb;
            border-radius:50%; animation:invSpin .75s linear infinite;
        }
        .inv-state-filters { display:flex; flex-wrap:wrap; gap:.55rem; }
        .inv-state-filter-option .btn {
            border-radius:999px; padding:.4rem .9rem; font-size:.8rem; font-weight:700;
            border-width:1px; box-shadow:0 2px 8px rgba(15,23,42,.05);
        }
        .inv-state-filter-option .btn i { font-size:.72rem; }
        .inv-state-filter-all { border-color:#d6deea; color:#475569; background:#fff; }
        .inv-state-filter-corrected { border-color:#b7e4c7; color:#166534; background:#fff; }
        .inv-state-filter-not-corrected { border-color:#fcd34d; color:#92400e; background:#fff; }
        .btn-check:checked + .btn.inv-state-filter-all { background:#e2e8f0; border-color:#94a3b8; color:#0f172a; }
        .btn-check:checked + .btn.inv-state-filter-corrected { background:#dcfce7; border-color:#86efac; color:#166534; }
        .btn-check:checked + .btn.inv-state-filter-not-corrected { background:#fef3c7; border-color:#fbbf24; color:#92400e; }
        @keyframes invSpin { to { transform:rotate(360deg); } }
        @media (max-width: 992px) {
            #invFilterPanel { --bs-offcanvas-width: min(78vw, 320px); }
        }
    </style>
{% endblock %}

{% block subheader %}
    <div class="badge-titre d-flex justify-content-between align-items-center flex-wrap w-100 mb-3" style="min-height:3.2rem;">
        <div class="d-flex flex-column flex-sm-row align-items-start align-items-sm-center gap-2">
            <span class="crm-badge me-2"><i class="fa fa-clipboard-check"></i></span>
            <div>
                <h3 class="m-subheader__title m-0">
                    {% if mode == 'edit' and inventory %}
                        Modifier inventaire {{ inventory.code }}
                    {% else %}
                        Nouvel inventaire
                    {% endif %}
                </h3>
                <small class="text-muted">Verification et correction des stocks</small>
            </div>
        </div>
        <div class="d-flex gap-2">
            <a href="{{ path('inventory_index') }}" class="btn btn-secondary btn-sm">
                <i class="fa fa-list me-1"></i> Liste inventaires
            </a>
        </div>
    </div>
{% endblock %}

{% block breadcrumb %}{% endblock %}

{% block bodycontent %}
    <div class="contentMargin">
        <div class="d-flex align-items-center flex-wrap gap-2 mb-3">
            <button type="button"
                    class="btn btn-outline-primary btn-sm inv-mobile-filter-btn"
                    data-bs-toggle="offcanvas"
                    data-bs-target="#invFilterPanel"
                    aria-controls="invFilterPanel">
                <i class="fa fa-filter"></i><span>Filtres</span>
            </button>
            <div class="inv-applied-filters">
                {% if filters.lineState is defined and filters.lineState and filters.lineState != 'all' %}
                    <span class="inv-applied-filter-chip">
                        <i class="fa fa-sliders"></i>
                        Etat correction: {{ filters.lineState == 'corrected' ? 'Corrige' : 'Non corrige' }}
                    </span>
                {% endif %}
                {% if filters.reference is defined and filters.reference %}
                    <span class="inv-applied-filter-chip"><i class="fa fa-barcode"></i>Ref: {{ filters.reference }}</span>
                {% endif %}
                {% if filters.category is defined and filters.category %}
                    {% set appliedCategory = categories|filter(c => c.id == filters.category)|first %}
                    <span class="inv-applied-filter-chip"><i class="fa fa-folder-open"></i>Categorie: {{ appliedCategory ? appliedCategory.name : filters.category }}</span>
                {% endif %}
                {% if filters.supplier is defined and filters.supplier %}
                    {% set appliedSupplier = suppliers|filter(s => s.id == filters.supplier)|first %}
                    <span class="inv-applied-filter-chip"><i class="fa fa-truck"></i>Fournisseur: {{ appliedSupplier ? appliedSupplier.name : filters.supplier }}</span>
                {% endif %}
                {% if filters.storehouse is defined and filters.storehouse %}
                    <span class="inv-applied-filter-chip"><i class="fa fa-warehouse"></i>Entrepot: {{ filters.storehouse }}</span>
                {% endif %}
                {% if filters.dateFrom is defined and filters.dateFrom %}
                    <span class="inv-applied-filter-chip"><i class="fa fa-calendar"></i>Du: {{ filters.dateFrom }}</span>
                {% endif %}
                {% if filters.dateTo is defined and filters.dateTo %}
                    <span class="inv-applied-filter-chip"><i class="fa fa-calendar-check"></i>Au: {{ filters.dateTo }}</span>
                {% endif %}
            </div>
        </div>

        <div class="inv-layout">
            <div class="offcanvas offcanvas-start"
                 tabindex="-1"
                 id="invFilterPanel"
                 aria-labelledby="invFilterPanelLabel"
                 data-bs-backdrop="false"
                 data-bs-scroll="true">
                <div class="offcanvas-header">
                    <h5 id="invFilterPanelLabel" class="offcanvas-title">
                        <i class="fa fa-filter me-2"></i> Filtres
                    </h5>
                    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"></button>
                </div>
                <div class="offcanvas-body">
                <div class="inv-filter">
                <form method="get"
                      action="{% if mode == 'edit' and inventory %}{{ path('inventory_edit', {id: inventory.id}) }}{% else %}{{ path('inventory_new') }}{% endif %}"
                      id="inventoryFilterForm">

                    <div class="mb-2">
                        <label class="form-label">Etat correction</label>
                        <div class="inv-state-filters">
                            <div class="inv-state-filter-option">
                                <input type="radio" name="lineState" id="inventoryLineState_all" class="btn-check" value="all" {{ (filters.lineState|default('all')) == 'all' ? 'checked' : '' }}>
                                <label for="inventoryLineState_all" class="btn btn-outline-secondary inv-state-filter-all">
                                    <i class="fa fa-layer-group me-1"></i>Tous
                                </label>
                            </div>
                            <div class="inv-state-filter-option">
                                <input type="radio" name="lineState" id="inventoryLineState_corrected" class="btn-check" value="corrected" {{ (filters.lineState|default('all')) == 'corrected' ? 'checked' : '' }}>
                                <label for="inventoryLineState_corrected" class="btn btn-outline-secondary inv-state-filter-corrected">Corrige <span class="ms-1">{{ correctedProductsCount|default(0) }}</span></label>
                            </div>
                            <div class="inv-state-filter-option">
                                <input type="radio" name="lineState" id="inventoryLineState_not_corrected" class="btn-check" value="not_corrected" {{ (filters.lineState|default('all')) == 'not_corrected' ? 'checked' : '' }}>
                                <label for="inventoryLineState_not_corrected" class="btn btn-outline-secondary inv-state-filter-not-corrected">Non corrige <span class="ms-1">{{ notCorrectedProductsCount|default(0) }}</span></label>
                            </div>
                        </div>
                    </div>
                    <div class="mb-2">
                        <label class="form-label">Reference produit</label>
                        <input type="hidden" name="reference" id="inventory_reference" value="{{ filters.reference }}">
                        <input type="text" id="add_reference_produit_inventory_form" value="{{ filters.reference }}" class="form-control form-control-sm" placeholder="Reference produit">
                        <div class="result-search-reference-produit-inventory-form" style="display:none; min-width:194px;">
                            <ul class="m-menu__subnav padding-5" id="content-result-reference-produit-inventory-form"></ul>
                        </div>
                    </div>

                    <div class="mb-2">
                        <label class="form-label">Categorie</label>
                        <select name="category" class="form-select form-select-sm">
                            <option value="">Toutes</option>
                            {% for c in categories %}
                                <option value="{{ c.id }}" {{ filters.category == c.id ? 'selected' : '' }}>{{ c.name }}</option>
                            {% endfor %}
                        </select>
                    </div>

                    <div class="mb-2">
                        <label class="form-label">Fournisseur</label>
                        <select name="supplier" class="form-select form-select-sm">
                            <option value="">Tous</option>
                            {% for s in suppliers %}
                                <option value="{{ s.id }}" {{ filters.supplier == s.id ? 'selected' : '' }}>{{ s.name }}</option>
                            {% endfor %}
                        </select>
                    </div>

                    <div class="mb-2">
                        <label class="form-label">Entrepot</label>
                        <input type="text" name="storehouse" value="{{ filters.storehouse }}" class="form-control form-control-sm">
                    </div>

                    <div class="mb-2">
                        <label class="form-label">Date creation debut</label>
                        <input type="date" name="dateFrom" value="{{ filters.dateFrom }}" class="form-control form-control-sm">
                    </div>
                    <div class="mb-2">
                        <label class="form-label">Date creation fin</label>
                        <input type="date" name="dateTo" value="{{ filters.dateTo }}" class="form-control form-control-sm">
                    </div>

                    <div class="d-grid gap-2 mt-3">
                        <button type="submit" class="btn btn-dark btn-sm">Filtrer</button>
                        <a href="{% if mode == 'edit' and inventory %}{{ path('inventory_edit', {id: inventory.id}) }}{% else %}{{ path('inventory_new') }}{% endif %}"
                           class="btn btn-light btn-sm border">Reinitialiser</a>
                    </div>
                </form>
                </div>
                </div>
            </div>

            <section class="inv-card inv-content-loading" id="inventoryContentSection">
                <div class="inv-loading-overlay d-none" id="inventoryLoadingOverlay">
                    <div class="inv-loading-spinner" aria-hidden="true"></div>
                    <div class="small text-muted">Chargement des resultats...</div>
                </div>
                <form method="post"
                      action="{% if mode == 'edit' and inventory %}{{ path('inventory_edit', {id: inventory.id, page: page}) }}{% else %}{{ path('inventory_new', filters|merge({'page': page})) }}{% endif %}"
                      id="inventorySaveForm">
                    <div class="p-2 border-bottom bg-light d-flex flex-wrap align-items-center gap-2">
                        <span class="small text-muted">Statistiques (page):</span>
                        <span class="inv-badge">Stock total avant: <strong id="inv_stat_before">0</strong></span>
                        <span class="inv-badge">Stock total apres: <strong id="inv_stat_after">0</strong></span>
                        <span class="inv-badge-gap zero">Ecart global: <strong id="inv_stat_gap">0</strong></span>
                    </div>
                    <div class="card-body p-0">
                        <table class="table table-sm align-middle mb-0 inv-tree-table" id="inventoryTable">
                            <thead>
                            <tr>
                                <th style="width:40px;" class="text-center"><input type="checkbox" id="inv_check_all"></th>
                                <th style="width:52px;" class="text-center">Photo</th>
                                <th style="width:48px;"></th>
                                <th>Reference</th>
                                <th>Produit / Declinaison</th>
                                <th class="text-center">Entrepot</th>
                                <th class="text-center">Theorique</th>
                                <th class="text-center">Reserve</th>
                                <th class="text-center">Compte</th>
                                <th class="text-center">Ecart</th>
                            </tr>
                            </thead>
                            <tbody id="inventoryTreeBody">
                            {% for p in products %}
                                {% set prod = attribute(p, 0) is defined ? p[0] : p %}
                                {% set hasDecli = prod.produitDeclinationValues|length > 0 %}
                                {% set pQtStock = attribute(p, 'qtStock') is defined ? (p.qtStock|default(0)) : 0 %}
                                {% set pQtReserved = attribute(p, 'qtReserved') is defined ? (p.qtReserved|default(0)) : 0 %}
                                {% set pQtAvailable = pQtStock - pQtReserved %}
                                {% set prodImg = (prod.image ?: ((prod.picture is defined and prod.picture|length > 0) ? (prod.picture|first).imageName : 'no-image-50px.png')) %}
                                {% set prodImgFile = (prodImg starts with 'http' or prodImg starts with '/') ? prodImg : (prodImg|split('/')|last) %}
                                {% set prodImgSrc = (prodImgFile starts with 'http' or prodImgFile starts with '/') ? prodImgFile : asset('images/' ~ prodImgFile) %}
                                {% set prodImgUploadSrc = (prodImgFile starts with 'http' or prodImgFile starts with '/') ? prodImgFile : asset('uploads/images/' ~ prodImgFile) %}
                                {% set productInventoryLines = mode == 'edit' and inventory ? inventory.lines|filter(line => line.produitId == prod.id) : [] %}
                                {% set productIsCorrected = productInventoryLines|filter(line => (line.qtGap|default(0)) != 0)|length > 0 %}
                                <tr class="inv-prod-row" data-product-id="{{ prod.id }}" data-prod-stock="{{ pQtStock }}" data-prod-gap="0" data-prod-state="{{ productIsCorrected ? 'corrected' : 'not_corrected' }}">
                                    <td class="text-center">
                                        <input type="checkbox" class="inv-line-check js-product-check" data-product-id="{{ prod.id }}">
                                    </td>
                                    <td class="text-center">
                                        <img class="inv-thumb"
                                             src="{{ prodImgSrc }}"
                                             onerror="if(!this.dataset.fallbackTried){this.dataset.fallbackTried='1';this.src='{{ prodImgUploadSrc }}';}else{this.onerror=null;this.src='{{ asset('images/no-image-50px.png') }}';}"
                                             alt="">
                                    </td>
                                    <td class="text-center">
                                        <button type="button" class="inv-toggle js-toggle-product" data-product-id="{{ prod.id }}" data-loaded="0" {{ hasDecli ? '' : 'disabled' }}>
                                            {{ hasDecli ? '+' : '*' }}
                                        </button>
                                    </td>
                                    <td>
                                        <div class="fw-semibold">
                                            <a href="{{ path('produit_show', {id: prod.id}) }}" target="_blank" class="text-decoration-none">
                                                {{ prod.reference }}
                                            </a>
                                        </div>
                                        <div class="small text-muted">{{ prod.createdAt ? prod.createdAt|date('d/m/Y') : '' }}</div>
                                    </td>
                                    <td>
                                        <div class="inv-name-cell">
                                            <div class="inv-name-main">
                                                <div class="fw-semibold">{{ prod.name }}</div>
                                                <div class="small text-muted">
                                                    {{ prod.categories ? prod.categories.name : '-' }}
                                                    {% if prod.supplier %} · {{ prod.supplier.name }}{% endif %}
                                                </div>
                                            </div>
                                            <span class="js-prod-corr-state inv-corr-badge {{ productIsCorrected ? 'ok' : 'no' }}">{{ productIsCorrected ? 'Corrige' : 'Non corrige' }}</span>
                                        </div>
                                    </td>
                                    <td class="text-center"><span class="inv-badge">{{ filters.storehouse ?: 'Tous' }}</span></td>
                                    <td class="text-center" colspan="4">
                                        <div class="small d-inline-flex flex-wrap align-items-center justify-content-center" style="gap:.35rem;">
                                            <span class="inv-badge">Stock: {{ pQtStock }}</span>
                                            <span class="inv-badge">Reserve: {{ pQtReserved }}</span>
                                            <span class="inv-badge">Dispo: {{ pQtAvailable }}</span>
                                            <span class="js-prod-gap inv-badge-gap zero">Ecart: 0</span>
                                            {% if not hasDecli %}<span class="text-muted">Produit simple</span>{% endif %}
                                        </div>
                                    </td>
                                </tr>
                                <tr class="js-children-wrap d-none" data-parent="{{ prod.id }}">
                                    <td colspan="10" class="inv-child-cell"><div class="small text-muted py-2">Chargement...</div></td>
                                </tr>
                            {% else %}
                                <tr><td colspan="10" class="text-center text-muted py-4">Aucun produit.</td></tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>

                    <div class="inv-footer">
                        <div class="row g-2 align-items-center">
                            <div class="col-12 col-lg-4">
                                <div class="small text-muted">Total produits: {{ total }}</div>
                                <div class="small text-muted">Page {{ page }} / {{ totalPages }}</div>
                            </div>
                            <div class="col-12 col-lg-8 d-flex justify-content-lg-end gap-2">
                                <button type="button" id="inventorySaveDraftBtn" class="btn btn-secondary btn-sm">Enregistrer brouillon</button>
                                <button type="button" id="inventoryValidateBtn" class="btn btn-success btn-sm">Valider et corriger</button>
                            </div>
                            <div class="col-12">
                                <label class="form-label mb-1">Note inventaire</label>
                                <textarea name="note" rows="2" class="form-control form-control-sm">{{ mode == 'edit' and inventory ? inventory.note : '' }}</textarea>
                                <input type="hidden" name="inventory_storehouse" value="{{ filters.storehouse }}">
                            </div>
                        </div>
                    </div>
                </form>

                {% if totalPages > 1 %}
                    <div class="p-2 border-top d-flex flex-wrap gap-1 justify-content-center">
                        {% set base = { reference: filters.reference, category: filters.category, supplier: filters.supplier, storehouse: filters.storehouse, dateFrom: filters.dateFrom, dateTo: filters.dateTo } %}
                        <a class="btn btn-sm btn-light border {{ page <= 1 ? 'disabled' : '' }}"
                           href="{% if page > 1 %}{% if mode == 'edit' and inventory %}{{ path('inventory_edit', {id: inventory.id, page: page-1, reference: filters.reference, category: filters.category, supplier: filters.supplier, storehouse: filters.storehouse, dateFrom: filters.dateFrom, dateTo: filters.dateTo}) }}{% else %}{{ path('inventory_new', base|merge({page: page-1})) }}{% endif %}{% else %}#{% endif %}">Precedent</a>
                        {% for p in 1..totalPages %}
                            {% if p >= page-2 and p <= page+2 %}
                                <a class="btn btn-sm {{ p == page ? 'btn-dark' : 'btn-light border' }}"
                                   href="{% if mode == 'edit' and inventory %}{{ path('inventory_edit', {id: inventory.id, page: p, reference: filters.reference, category: filters.category, supplier: filters.supplier, storehouse: filters.storehouse, dateFrom: filters.dateFrom, dateTo: filters.dateTo}) }}{% else %}{{ path('inventory_new', base|merge({page: p})) }}{% endif %}">{{ p }}</a>
                            {% endif %}
                        {% endfor %}
                        <a class="btn btn-sm btn-light border {{ page >= totalPages ? 'disabled' : '' }}"
                           href="{% if page < totalPages %}{% if mode == 'edit' and inventory %}{{ path('inventory_edit', {id: inventory.id, page: page+1, reference: filters.reference, category: filters.category, supplier: filters.supplier, storehouse: filters.storehouse, dateFrom: filters.dateFrom, dateTo: filters.dateTo}) }}{% else %}{{ path('inventory_new', base|merge({page: page+1})) }}{% endif %}{% else %}#{% endif %}">Suivant</a>
                    </div>
                {% endif %}
            </section>
        </div>
    </div>
{% endblock %}

{% block js %}
    {{ parent() }}
    <script>
      (function () {
        var lineIndex = 0;
        var inventoryId = {{ mode == 'edit' and inventory ? inventory.id : 0 }};
        var isEditMode = {{ mode == 'edit' and inventory ? 'true' : 'false' }};
        var imgBase = '{{ asset('images/') }}';
        var imgUploadBase = '{{ asset('uploads/images/') }}';
        var productShowTpl = '{{ path('produit_show', {id: '__ID__'}) }}';
        var decliShowTpl = '{{ path('produit_declination_value_show', {id: '__ID__'}) }}';

        function esc(v) {
          return String(v === null || v === undefined ? '' : v)
            .replace(/&/g, '&amp;').replace(/</g, '&lt;')
            .replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
        }
        function normalizeImageName(name) {
          var n = String(name || '').trim().replace(/\\/g, '/');
          if (!n) return 'no-image-50px.png';
          if (/^https?:\/\//i.test(n)) return n;
          if (n.charAt(0) === '/') return n;
          if (n.indexOf('/') !== -1) n = n.split('/').pop() || n;
          return n;
        }
        function joinAssetBase(base, fileName) {
          var b = String(base || '');
          var f = String(fileName || '').replace(/^\/+/, '');
          var qPos = b.indexOf('?');
          var root = qPos >= 0 ? b.substring(0, qPos) : b;
          var query = qPos >= 0 ? b.substring(qPos) : '';

          if (!root.endsWith('/')) root += '/';
          return root + f + query;
        }
        function fileUrl(name, preferWeb) {
          var n = normalizeImageName(name);
          if (/^https?:\/\//i.test(n) || n.charAt(0) === '/') return n;
          return joinAssetBase(imgBase, n);
        }
        function fileUrlUpload(name) {
          var n = normalizeImageName(name);
          if (/^https?:\/\//i.test(n) || n.charAt(0) === '/') return n;
          return joinAssetBase(imgUploadBase, n);
        }
        function toInt(v, dflt) {
          var n = parseInt(v, 10);
          return Number.isNaN(n) ? dflt : n;
        }
        function signedInt(v) {
          var n = toInt(v, 0);
          return n > 0 ? ('+' + n) : String(n);
        }
        function applyCorrectionUi(tr) {
          var inp = tr.querySelector('.js-counted');
          var th = tr.querySelector('.js-theoretical');
          var correctedFromGap = false;
          if (inp && th) {
            var theoVal = toInt(tr.getAttribute('data-theoretical'), toInt(th.textContent, 0));
            correctedFromGap = toInt(inp.value, theoVal) !== theoVal;
          }
          tr.classList.toggle('inv-line-corrected', correctedFromGap);
          tr.classList.toggle('inv-line-not-corrected', !correctedFromGap);
          var stateCell = tr.querySelector('.js-corr-state');
          if (stateCell) stateCell.innerHTML = correctedFromGap ? '<span class="inv-corr-badge ok">Corrige</span>' : '<span class="inv-corr-badge no">Non corrige</span>';
          updateProductCorrectionState(tr);
        }
        function setGapBadge(el, value, prefix) {
          if (!el) return;
          var v = toInt(value, 0);
          var cls = v === 0 ? 'zero' : (v > 0 ? 'pos' : 'neg');
          el.className = (el.className || '').replace(/\bzero\b|\bpos\b|\bneg\b/g, '').trim();
          if (el.className.indexOf('inv-badge-gap') === -1) el.className += ' inv-badge-gap';
          el.className += ' ' + cls;
          el.innerHTML = (prefix || 'Ecart: ') + signedInt(v);
        }
        function updateGlobalInventoryStats() {
          var before = 0;
          var gap = 0;
          document.querySelectorAll('#inventoryTreeBody tr.inv-prod-row').forEach(function (row) {
            before += toInt(row.getAttribute('data-prod-stock'), 0);
            gap += toInt(row.getAttribute('data-prod-gap'), 0);
          });
          var after = before + gap;

          var elBefore = document.getElementById('inv_stat_before');
          var elAfter = document.getElementById('inv_stat_after');
          var elGap = document.getElementById('inv_stat_gap');
          if (elBefore) elBefore.textContent = before;
          if (elAfter) elAfter.textContent = after;
          if (elGap) {
            var wrap = elGap.closest('.inv-badge-gap');
            if (wrap) {
              wrap.className = 'inv-badge-gap ' + (gap === 0 ? 'zero' : (gap > 0 ? 'pos' : 'neg'));
            }
            elGap.textContent = signedInt(gap);
          }
        }
        function updateProductCorrectionState(lineRow) {
          var parentWrap = lineRow.closest('.js-children-wrap');
          if (!parentWrap) return;
          var parentId = parentWrap.getAttribute('data-parent');
          if (!parentId) return;
          var productRow = document.querySelector('tr.inv-prod-row[data-product-id="' + parentId + '"]');
          if (!productRow) return;
          var badge = productRow.querySelector('.js-prod-corr-state');
          if (!badge) return;

          var lineRows = parentWrap.querySelectorAll('.js-line-row');
          if (!lineRows.length) {
            badge.className = 'js-prod-corr-state inv-corr-badge no';
            badge.textContent = 'Non corrige';
            productRow.setAttribute('data-prod-gap', '0');
            productRow.setAttribute('data-prod-state', 'not_corrected');
            var prodGapEmpty = productRow.querySelector('.js-prod-gap');
            setGapBadge(prodGapEmpty, 0, 'Ecart: ');
            updateGlobalInventoryStats();
            updateInventoryStateFilterCounts();
            applyStateFilter();
            return;
          }

          var anyCorrected = false;
          var totalGap = 0;
          lineRows.forEach(function (row) {
            if (row.classList.contains('inv-line-corrected')) anyCorrected = true;
            var gapEl = row.querySelector('.js-gap');
            totalGap += toInt(gapEl ? gapEl.textContent : 0, 0);
          });
          badge.className = anyCorrected
            ? 'js-prod-corr-state inv-corr-badge ok'
            : 'js-prod-corr-state inv-corr-badge no';
          badge.textContent = anyCorrected ? 'Corrige' : 'Non corrige';
          productRow.setAttribute('data-prod-gap', String(totalGap));
          productRow.setAttribute('data-prod-state', anyCorrected ? 'corrected' : 'not_corrected');
          var prodGap = productRow.querySelector('.js-prod-gap');
          setGapBadge(prodGap, totalGap, 'Ecart: ');
          updateGlobalInventoryStats();
          updateInventoryStateFilterCounts();
          applyStateFilter();
        }
        function getInventoryStateSelection() {
          return ['all'];
        }
        function updateInventoryStateFilterCounts() {}
        function applyStateFilter() {}
        function focusAdjacentCountInput(currentInput, reverse) {
          var inputs = Array.prototype.slice.call(document.querySelectorAll('#inventoryTreeBody .js-line-row .js-counted'))
            .filter(function (input) {
              if (!input || input.disabled) return false;
              var row = input.closest('.js-line-row');
              return !!row && row.offsetParent !== null && row.style.display !== 'none';
            });
          if (!inputs.length) return;
          var currentIndex = inputs.indexOf(currentInput);
          if (currentIndex === -1) return;
          var nextIndex = reverse ? currentIndex - 1 : currentIndex + 1;
          if (nextIndex < 0 || nextIndex >= inputs.length) return;
          inputs[nextIndex].focus();
          inputs[nextIndex].select();
        }
        function bindGapCalcul(tr) {
          var th = tr.querySelector('.js-theoretical');
          var inp = tr.querySelector('.js-counted');
          var gap = tr.querySelector('.js-gap');
          var rowCheckbox = tr.querySelector('.inv-line-check');
          var refLink = tr.querySelector('td a');
          if (rowCheckbox) rowCheckbox.tabIndex = -1;
          if (refLink) refLink.tabIndex = -1;
          if (!th || !inp || !gap) return;
          function refresh() {
            var theoretical = toInt(tr.getAttribute('data-theoretical'), toInt(th.textContent, 0));
            var counted = toInt(inp.value, 0);
            var d = counted - theoretical;
            gap.textContent = signedInt(d);
            gap.className = 'badge js-gap ' + (d === 0 ? 'bg-light text-dark border' : (d > 0 ? 'bg-success' : 'bg-danger'));
            applyCorrectionUi(tr);
            applyStateFilter();
          }
          inp.addEventListener('input', refresh);
          inp.addEventListener('keydown', function (e) {
            if (e.key !== 'Tab') return;
            e.preventDefault();
            focusAdjacentCountInput(inp, e.shiftKey === true);
          });
          refresh();
        }
        function renderLineRow(r) {
          var idx = lineIndex++;
          var theoretical = toInt(r.qtStock, 0);
          var counted = (r.qtCounted !== null && r.qtCounted !== undefined) ? toInt(r.qtCounted, theoretical) : theoretical;
          var gap = counted - theoretical;
          var isCorrected = gap !== 0;
          var imageName = r.declinationImage || r.productImage || 'no-image-50px.png';
          var imageSrc = fileUrl(imageName, false);
          var referenceLink = r.declinationId
            ? decliShowTpl.replace('__ID__', encodeURIComponent(r.declinationId))
            : productShowTpl.replace('__ID__', encodeURIComponent(r.produitId));
          return ''
            + '<tr class="js-line-row" data-theoretical="' + theoretical + '">'
            + '  <td class="text-center"><input type="checkbox" class="inv-line-check" tabindex="-1"></td>'
            + '  <td class="text-center"><img class="inv-thumb" src="' + esc(imageSrc) + '" onerror="if(!this.dataset.fallbackTried){this.dataset.fallbackTried=\'1\';this.src=\'' + esc(fileUrlUpload(imageName)) + '\';}else{this.onerror=null;this.src=\'' + esc(fileUrl('no-image-50px.png', false)) + '\';}" alt=""></td>'
            + '  <td></td>'
            + '  <td>'
            + '    <a target="_blank" tabindex="-1" class="text-decoration-none fw-semibold" href="' + esc(referenceLink) + '">' + esc(r.reference) + '</a>'
            + '    <input type="hidden" name="lines[' + idx + '][stock_id]" value="' + esc(r.stockId) + '">'
            + '    <input type="hidden" name="lines[' + idx + '][produit_id]" value="' + esc(r.produitId) + '">'
            + '    <input type="hidden" name="lines[' + idx + '][declination_id]" value="' + esc(r.declinationId) + '">'
            + '    <input type="hidden" name="lines[' + idx + '][reference]" value="' + esc(r.reference) + '">'
            + '    <input type="hidden" name="lines[' + idx + '][name]" value="' + esc(r.name) + '">'
            + '    <input type="hidden" name="lines[' + idx + '][storehouse]" value="' + esc(r.storehouse || 'Principal') + '">'
            + '    <input type="hidden" name="lines[' + idx + '][qt_theoretical]" value="' + theoretical + '">'
            + '    <input type="hidden" name="lines[' + idx + '][qt_reserved]" value="' + parseInt(r.qtReserved || 0, 10) + '">'
            + '  </td>'
            + '  <td>'
            + '    <div class="inv-name-cell">'
            + '      <div class="inv-name-main">' + esc(r.name) + '</div>'
            + '      <span class="js-corr-state">' + (isCorrected ? '<span class="inv-corr-badge ok">Corrige</span>' : '<span class="inv-corr-badge no">Non corrige</span>') + '</span>'
            + '    </div>'
            + '  </td>'
            + '  <td class="text-center">' + esc(r.storehouse || 'Principal') + '</td>'
            + '  <td class="text-center js-theoretical"><span class="inv-badge">Stock: ' + theoretical + '</span></td>'
            + '  <td class="text-center"><span class="inv-badge">Reserve: ' + toInt(r.qtReserved, 0) + '</span></td>'
            + '  <td class="text-center"><input type="number" class="form-control form-control-sm js-counted inv-count-input" name="lines[' + idx + '][qt_counted]" value="' + counted + '"></td>'
            + '  <td class="text-center"><span class="badge js-gap ' + (gap === 0 ? 'bg-light text-dark border' : (gap > 0 ? 'bg-success' : 'bg-danger')) + '">' + signedInt(gap) + '</span></td>'
            + '</tr>';
        }

        document.addEventListener('click', function (e) {
          var btn = e.target.closest('.js-toggle-product');
          if (!btn) return;
          e.preventDefault();
          var productId = btn.getAttribute('data-product-id');
          var wrap = document.querySelector('.js-children-wrap[data-parent="' + productId + '"]');
          if (!wrap) return;
          if (wrap.classList.contains('d-none')) { wrap.classList.remove('d-none'); btn.textContent = '-'; }
          else { wrap.classList.add('d-none'); btn.textContent = '+'; return; }
          if (btn.getAttribute('data-loaded') === '1') return;

          var storehouse = encodeURIComponent('{{ filters.storehouse|default('') }}');
          var url = '{{ path('inventory_new') }}' + '?ajax_declinations=1&productId=' + encodeURIComponent(productId) + '&storehouse=' + storehouse + '&inventoryId=' + encodeURIComponent(inventoryId);
          fetch(url)
            .then(function (r) { return r.json(); })
            .then(function (resp) {
              if (!resp || !resp.success) throw new Error('load failed');
              if (!resp.rows || !resp.rows.length) {
                wrap.children[0].innerHTML = '<div class="text-muted small py-2">Aucune declinaison/ligne de stock.</div>';
                btn.setAttribute('data-loaded', '1');
                return;
              }
              var html = '<table class="table table-sm align-middle mb-0"><tbody>';
              resp.rows.forEach(function (r) { html += renderLineRow(r); });
              html += '</tbody></table>';
              wrap.children[0].innerHTML = html;
              wrap.querySelectorAll('.js-line-row').forEach(function (tr) { bindGapCalcul(tr); });
              wrap.querySelectorAll('.js-line-row').forEach(function (tr) { updateProductCorrectionState(tr); });
              applyStateFilter();
              btn.setAttribute('data-loaded', '1');
            })
            .catch(function () { wrap.children[0].innerHTML = '<div class="text-danger small py-2">Erreur de chargement.</div>'; });
        });

        var refVisible = document.getElementById('add_reference_produit_inventory_form');
        var refHidden = document.getElementById('inventory_reference');
        if (refVisible && refHidden) refVisible.addEventListener('input', function () { refHidden.value = refVisible.value.trim(); });
        $(document).off('keyup.inventoryFormRef', '#add_reference_produit_inventory_form')
          .on('keyup.inventoryFormRef', '#add_reference_produit_inventory_form', function () {
            var query = $.trim($(this).val());
            var $list = $('#content-result-reference-produit-inventory-form');
            if (!query) {
              $('#inventory_reference').val('');
              $list.empty();
              $('.result-search-reference-produit-inventory-form').hide();
              return;
            }

            $.ajax({
              url: Routing.generate('search_item'),
              method: 'POST',
              data: { query: query, type: ['product'] },
              success: function (data) {
                if ($('#add_reference_produit_inventory_form').val().trim() === '') return;
                $list.empty();

                if (!data || data.length === 0) {
                  $list.html(
                    '<li><div class="m-alert m-alert--icon m-alert--air alert alert-dismissible fade show" role="alert">' +
                    '<div class="m-alert__icon"><i class="fa fa-warning"></i></div>' +
                    '<div class="m-alert__text">Pas de resultat disponible.</div></div></li>'
                  );
                  $('.result-search-reference-produit-inventory-form').show();
                  return;
                }

                var seen = {};
                $.each(data, function () {
                  var dedupeKey = String(this.id || '') + '::' + String(this.reference || '');
                  if (seen[dedupeKey]) return;
                  seen[dedupeKey] = true;

                  var html = ''
                    + '<li class="m-menu__item search-dropdown-item-produit-reference-inventory-form margin-5 row" '
                    + 'data-value="' + esc(this.reference) + '" aria-haspopup="true" style="cursor:pointer;">'
                    + '<span class="col-3"><span class="m-menu__link-text width-30"><img class="img-search" src="' + esc(this.picture) + '"></span></span>'
                    + '<span class="col-9"><span class="m-menu__link-text">' + esc(this.reference) + '</span><br>'
                    + '<small class="m-menu__link-text">' + esc(this.name) + '</small></span>'
                    + '</li>';
                  $list.append(html);
                });

                $('.result-search-reference-produit-inventory-form').show();
              }
            });
          });

        $(document).off('click.inventoryFormRef', '.search-dropdown-item-produit-reference-inventory-form')
          .on('click.inventoryFormRef', '.search-dropdown-item-produit-reference-inventory-form', function () {
            var ref = ($(this).data('value') || '').toString();
            $('#add_reference_produit_inventory_form').val(ref);
            $('#inventory_reference').val(ref);
            $('.result-search-reference-produit-inventory-form').hide();
            $('#content-result-reference-produit-inventory-form').empty();
          });

        function refreshInventoryContentFromHtml(html, pushUrl) {
          var parser = new DOMParser();
          var doc = parser.parseFromString(html, 'text/html');
          var nextSection = doc.getElementById('inventoryContentSection');
          var currentSection = document.getElementById('inventoryContentSection');
          if (!nextSection || !currentSection) return;
          currentSection.innerHTML = nextSection.innerHTML;
          lineIndex = 0;
          updateGlobalInventoryStats();
          var checkAllBox = document.getElementById('inv_check_all');
          if (checkAllBox) checkAllBox.checked = false;
          if (pushUrl && window.history && typeof window.history.replaceState === 'function') {
            window.history.replaceState({}, '', pushUrl);
          }
        }

        function toggleInventoryLoading(isLoading) {
          var overlay = document.getElementById('inventoryLoadingOverlay');
          var section = document.getElementById('inventoryContentSection');
          if (!overlay || !section) return;
          overlay.classList.toggle('d-none', !isLoading);
          section.classList.toggle('is-loading', !!isLoading);
        }

        function fetchInventoryFilteredContent(url) {
          toggleInventoryLoading(true);
          return fetch(url, {
            headers: {
              'X-Requested-With': 'XMLHttpRequest'
            }
          })
            .then(function (response) {
              if (!response.ok) throw new Error('inventory filter request failed');
              return response.text();
            })
            .then(function (html) {
              refreshInventoryContentFromHtml(html, url);
            })
            .finally(function () {
              toggleInventoryLoading(false);
            });
        }

        function hasInventoryDraftPayload() {
          var saveForm = document.getElementById('inventorySaveForm');
          if (!saveForm) return false;
          if (saveForm.querySelector('.js-line-row .js-counted')) return true;
          var noteField = saveForm.querySelector('textarea[name="note"]');
          return !!(noteField && noteField.value.trim() !== '');
        }

        function syncInventoryFormActions(payload) {
          if (!payload) return;
          if (payload.inventoryId) {
            inventoryId = parseInt(payload.inventoryId, 10) || inventoryId;
            isEditMode = true;
          }
          var filterForm = document.getElementById('inventoryFilterForm');
          var saveForm = document.getElementById('inventorySaveForm');
          if (filterForm && payload.filterUrl) {
            filterForm.setAttribute('action', payload.filterUrl);
          }
          if (saveForm && payload.saveUrl) {
            saveForm.setAttribute('action', payload.saveUrl);
          }
        }

        function saveDraftBeforeNavigation(targetUrl) {
          var saveForm = document.getElementById('inventorySaveForm');
          if (!saveForm || !hasInventoryDraftPayload()) {
            return Promise.resolve(targetUrl);
          }

          var formData = new FormData(saveForm);
          formData.set('save_action', 'draft');

          return fetch(saveForm.getAttribute('action') || window.location.href, {
            method: 'POST',
            headers: {
              'X-Requested-With': 'XMLHttpRequest'
            },
            body: formData
          })
            .then(function (response) {
              if (!response.ok) throw new Error('inventory draft save failed');
              return response.json();
            })
            .then(function (payload) {
              if (!payload || payload.success !== true) {
                throw new Error('inventory draft save failed');
              }
              syncInventoryFormActions(payload);
              if (payload.filterUrl) {
                var nextUrl = new URL(targetUrl, window.location.origin);
                return payload.filterUrl + nextUrl.search;
              }
              return targetUrl;
            });
        }

        function showInventorySaveError(title, text) {
          if (window.Swal) {
            return window.Swal.fire({ icon: 'error', title: title, text: text });
          }
          window.alert(text);
          return Promise.resolve();
        }

        function confirmInventoryValidation() {
          var message = 'Le stock sera mis a jour selon les quantites comptees.';
          if (window.Swal) {
            return window.Swal.fire({
              icon: 'warning',
              title: 'Valider et corriger ?',
              text: message,
              showCancelButton: true,
              confirmButtonText: 'Oui, valider',
              cancelButtonText: 'Fermer',
              reverseButtons: true
            }).then(function (result) {
              return !!result.isConfirmed;
            });
          }
          return Promise.resolve(window.confirm('Valider et corriger cet inventaire ? ' + message));
        }

        function submitInventorySave(saveAction) {
          var saveForm = document.getElementById('inventorySaveForm');
          if (!saveForm) {
            return Promise.reject(new Error('inventory save form not found'));
          }

          var formData = new FormData(saveForm);
          formData.set('save_action', saveAction);
          toggleInventoryLoading(true);

          return fetch(saveForm.getAttribute('action') || window.location.href, {
            method: 'POST',
            headers: {
              'X-Requested-With': 'XMLHttpRequest'
            },
            body: formData
          })
            .then(function (response) {
              if (!response.ok) throw new Error('inventory save failed');
              return response.json();
            })
            .then(function (payload) {
              if (!payload || payload.success !== true) {
                throw new Error('inventory save failed');
              }

              syncInventoryFormActions(payload);

              if (payload.validated && payload.redirectUrl) {
                var redirect = function () { window.location.href = payload.redirectUrl; };
                if (window.Swal && payload.message) {
                  return window.Swal.fire({
                    icon: 'success',
                    title: 'Inventaire valide',
                    text: payload.message,
                    timer: 1400,
                    showConfirmButton: false
                  }).then(function () {
                    redirect();
                    return payload;
                  });
                }
                redirect();
                return payload;
              }

              if (payload.filterUrl && window.history && typeof window.history.replaceState === 'function') {
                var nextUrl = new URL(payload.filterUrl, window.location.origin);
                var currentUrl = new URL(window.location.href);
                nextUrl.search = currentUrl.search;
                window.history.replaceState({}, '', nextUrl.pathname + nextUrl.search);
              }

              if (payload.message && window.Swal) {
                return window.Swal.fire({
                  icon: 'success',
                  title: 'Brouillon enregistre',
                  text: payload.message,
                  timer: 1200,
                  showConfirmButton: false
                }).then(function () {
                  return payload;
                });
              }

              return payload;
            })
            .finally(function () {
              toggleInventoryLoading(false);
            });
        }

        var inventoryFilterForm = document.getElementById('inventoryFilterForm');
        if (inventoryFilterForm) {
          inventoryFilterForm.addEventListener('submit', function (e) {
            e.preventDefault();
            var action = inventoryFilterForm.getAttribute('action') || window.location.pathname;
            var formData = new FormData(inventoryFilterForm);
            var query = new URLSearchParams();
            formData.forEach(function (value, key) {
              if (value !== null && String(value).trim() !== '') query.append(key, String(value));
            });
            var targetUrl = action + (query.toString() ? ('?' + query.toString()) : '');
            saveDraftBeforeNavigation(targetUrl)
              .then(function (nextUrl) {
                return fetchInventoryFilteredContent(nextUrl);
              })
              .catch(function () {
                if (window.Swal) {
                  window.Swal.fire({ icon: 'error', title: 'Sauvegarde impossible', text: "Le brouillon n'a pas pu etre enregistre avant le filtrage." });
                } else {
                  window.alert("Le brouillon n'a pas pu etre enregistre avant le filtrage.");
                }
              });
          });
        }

        document.addEventListener('click', function (e) {
          var pagerLink = e.target.closest('#inventoryContentSection a[href]');
          if (pagerLink) {
            var href = pagerLink.getAttribute('href') || '';
            if (!href || href === '#' || pagerLink.classList.contains('disabled')) return;
            e.preventDefault();
            saveDraftBeforeNavigation(href)
              .then(function (nextUrl) {
                return fetchInventoryFilteredContent(nextUrl);
              })
              .catch(function () {
                showInventorySaveError('Sauvegarde impossible', "Le brouillon n'a pas pu etre enregistre avant le changement de page.");
              });
            return;
          }

          var draftBtn = e.target.closest('#inventorySaveDraftBtn');
          if (draftBtn) {
            e.preventDefault();
            submitInventorySave('draft').catch(function () {
              showInventorySaveError('Enregistrement impossible', 'Le brouillon n a pas pu etre enregistre.');
            });
            return;
          }

          var validateBtn = e.target.closest('#inventoryValidateBtn');
          if (validateBtn) {
            e.preventDefault();
            confirmInventoryValidation()
              .then(function (confirmed) {
                if (!confirmed) return null;
                return submitInventorySave('validate');
              })
              .catch(function () {
                showInventorySaveError('Validation impossible', 'L inventaire n a pas pu etre valide.');
              });
          }
        });

        document.addEventListener('submit', function (e) {
          var saveForm = e.target.closest('#inventorySaveForm');
          if (!saveForm) return;
          e.preventDefault();
        });

        var checkAll = document.getElementById('inv_check_all');
        if (checkAll) checkAll.addEventListener('change', function () {
          document.querySelectorAll('#inventoryTreeBody .inv-line-check').forEach(function (cb) {
            if (cb.offsetParent === null) return;
            cb.checked = checkAll.checked;
            var row = cb.closest('tr');
            if (row && row.classList.contains('js-line-row')) {
              row.classList.toggle('inv-line-selected', cb.checked);
            }
          });
        });
        document.addEventListener('change', function (e) {
          var cb = e.target.closest('.js-line-row .inv-line-check');
          if (!cb) return;
          var row = cb.closest('.js-line-row');
          if (!row) return;
          row.classList.toggle('inv-line-selected', cb.checked);
        });
        function initFilterOffcanvasTopOffset() {
          var offcanvasEl = document.getElementById('invFilterPanel');
          if (!offcanvasEl) return;
          function applyOffset() {
            var topnav = document.querySelector('.topbar, .topnav, .app-topbar, #kt_header');
            var top = 100;
            if (topnav) {
              var rect = topnav.getBoundingClientRect();
              top = Math.max(56, Math.round(rect.height + rect.top));
            }
            offcanvasEl.style.setProperty('--inventory-offcanvas-top', top + 'px');
          }
          applyOffset();
          window.addEventListener('resize', applyOffset);
          offcanvasEl.addEventListener('show.bs.offcanvas', applyOffset);
        }
        initFilterOffcanvasTopOffset();
        updateGlobalInventoryStats();

        // En mode edition, les declinaisons restent fermees par defaut.
      })();
    </script>
{% endblock %}