{% load i18n document_viewer_tags short_name %}
{% comment %}
  Reusable document thumbnail grid + carousel viewer.
  Rendered by: common/templatetags/document_viewer_tags.py → render_document_viewer

  Context variables:
    docs          – list of doc dicts, sorted by (tag.order, tag.name, doc.title)
    modal_id      – HTML id for the viewer modal
    carousel_id   – derived id for Bootstrap carousel
    thumbs_id     – derived id for bottom strip
    download_id   – derived id for download button
    fullpage_id   – derived id for open-in-new-tab button
    allow_delete  – show delete-overlay buttons (edit-mode)
    show_tags     – show tag badge on thumbnails and in carousel caption
    show_versions – show version number + history button on thumbnails
    location_id   – context-object PK emitted as data-location-id on history buttons
{% endcomment %}

{% if docs %}

{% if not modal_only %}
{# ═══════════════════════════ Thumbnail Grid ═══════════════════════════ #}
<div class="row g-2" id="{{ modal_id }}-grid">
    {% for doc in docs %}
    <div class="col-6 col-sm-4 col-md-3 col-lg-2" id="doc-thumb-{{ doc.doc_id }}" data-upload-date="{{ doc.attached_at|date:'c' }}">

        {# ── Card wrapper ── #}
        <div class="card h-100 shadow-sm position-relative">

            {# ── Delete overlay ── #}
            {% if doc.legacy_delete_url %}
            {# Legacy doc: always-visible delete button, triggers Bootstrap modal #}
            <button type="button"
                    class="btn btn-danger btn-sm position-absolute top-0 end-0"
                    data-bs-toggle="modal"
                    data-bs-target="#documentDeleteModal"
                    data-filename="{{ doc.filename }}"
                    data-delete-url="{{ doc.legacy_delete_url }}"
                    data-document-id="{{ doc.doc_id }}"
                    data-document-name="{{ doc.filename }}"
                    title="{% translate 'Supprimer' %}"
                    style="z-index: 2; border-radius: 0 4px 0 6px; padding: 2px 7px; line-height: 1;">
                <i class="bi bi-trash" style="font-size: 0.7rem;"></i>
            </button>
            {% elif allow_delete and delete_always_visible %}
            {# Always-visible delete button (e.g. intervention page) #}
            <button type="button"
                    class="btn btn-danger btn-sm position-absolute top-0 end-0 document-delete-btn delete-document-btn"
                    data-document-id="{{ doc.doc_id }}"
                    data-document-name="{{ doc.filename }}"
                    title="{% translate 'Supprimer' %}"
                    style="z-index: 2; border-radius: 0 4px 0 6px; padding: 2px 7px; line-height: 1;">
                <i class="bi bi-trash" style="font-size: 0.7rem;"></i>
            </button>
            {% elif allow_delete %}
            {# Managed doc: edit-mode only, hidden by default #}
            <button type="button"
                    class="btn btn-danger btn-sm position-absolute top-0 end-0 document-delete-btn delete-document-btn d-none"
                    data-edit-mode-only="true"
                    data-document-id="{{ doc.doc_id }}"
                    data-document-name="{{ doc.filename }}"
                    title="{% translate 'Supprimer' %}"
                    style="z-index: 2; border-radius: 0 4px 0 6px; padding: 2px 7px; line-height: 1;">
                <i class="bi bi-trash" style="font-size: 0.7rem;"></i>
            </button>
            {% endif %}

            {# ── Copy overlay ── #}
            {% if allow_copy %}
            <button type="button"
                    class="btn btn-secondary btn-sm position-absolute top-0 start-0 copy-document-btn"
                    data-document-id="{{ doc.doc_id }}"
                    data-document-name="{{ doc.filename }}"
                    data-bs-toggle="modal"
                    data-bs-target="#copyDocumentModal"
                    title="{% translate 'Copier vers une localisation ou un asset' %}"
                    style="z-index: 2; border-radius: 4px 0 6px 0; padding: 2px 7px; line-height: 1;">
                <i class="bi bi-copy" style="font-size: 0.7rem;"></i>
            </button>
            {% endif %}

            {# ── Card header: tag badges (when relevant) ── #}
            {% if show_tags and doc.tags_list %}
            <div class="card-header px-2 py-1 d-flex align-items-center justify-content-between"
                 style="background: transparent; border-bottom: 1px solid rgba(0,0,0,.08);">
                <div class="d-flex flex-wrap gap-1">
                    {% for t in doc.tags_list %}
                    <span class="badge text-bg-primary" style="font-size: 0.6rem;">{{ t.name }}{% if doc.unique_params.format %} ({{ doc.unique_params.format }}){% endif %}</span>
                    {% endfor %}
                </div>
                {% if show_versions and doc.tag_slug %}
                <button type="button"
                        class="btn btn-sm p-0 border-0 bg-transparent doc-viewer-history-btn ms-1"
                        data-bs-toggle="modal"
                        data-bs-target="#documentHistoryModal"
                        data-tag-slug="{{ doc.tag_slug }}"
                        data-location-id="{{ location_id }}"
                        data-use-managed="true"
                        data-unique-params="{{ doc.unique_params_json }}"
                        title="{% translate 'Historique des versions' %}">
                    <i class="bi bi-clock-history text-primary" style="font-size: 0.8rem;"></i>
                </button>
                {% endif %}
            </div>
            {% endif %}

            {# ── Clickable thumbnail (card-img area) ── #}
            <a href="#"
               class="d-block text-decoration-none doc-viewer-thumb"
               data-bs-toggle="modal"
               data-bs-target="#{{ modal_id }}"
               data-viewer-modal="{{ modal_id }}"
               data-doc-index="{{ doc.index }}"
               title="{{ doc.filename }}">
                <div class="overflow-hidden bg-light d-flex align-items-center justify-content-center"
                     style="height: 90px; border-radius: {% if show_tags and doc.tags_list %}0{% else %}calc(var(--bs-card-inner-border-radius) - 1px) calc(var(--bs-card-inner-border-radius) - 1px){% endif %} 0 0;">
                    {% if doc.thumbnail_url %}
                        <img src="{{ doc.thumbnail_url }}"
                             alt="{{ doc.title }}"
                             style="width: 100%; height: 100%; object-fit: cover;"
                             loading="lazy">
                    {% elif doc.is_image %}
                        <img src="{{ doc.file_url }}"
                             alt="{{ doc.title }}"
                             style="width: 100%; height: 100%; object-fit: cover;"
                             loading="lazy">
                    {% else %}
                        <i class="{{ doc.ext|file_icon_class }}" style="font-size: 2.5rem;"></i>
                    {% endif %}
                </div>
            </a>

            {# ── Card body: filename + metadata ── #}
            <div class="card-body px-2 pt-1 pb-2">
                <p class="text-truncate text-muted mb-0"
                   style="font-size: 0.75em; line-height: 1.3;"
                   title="{{ doc.filename }}">
                    {{ doc.filename }}
                </p>
                {% if doc.attached_at or doc.attached_by or show_versions and doc.version_number %}
                <p class="text-muted mb-0" style="font-size: 0.68em; line-height: 1.3;">
                    {% if doc.attached_at %}{{ doc.attached_at|date:"d/m/Y" }}{% endif %}{% if doc.attached_by %} · {{ doc.attached_by|short_name }}{% endif %}{% if show_versions and doc.version_number %} · <strong>v{{ doc.version_number }}</strong>{% endif %}
                </p>
                {% endif %}
                {# History button without tag (no header) #}
                {% if show_versions and doc.tag_slug and not show_tags %}
                <button type="button"
                        class="btn btn-sm p-0 border-0 bg-transparent mt-1 doc-viewer-history-btn"
                        data-bs-toggle="modal"
                        data-bs-target="#documentHistoryModal"
                        data-tag-slug="{{ doc.tag_slug }}"
                        data-location-id="{{ location_id }}"
                        data-use-managed="true"
                        data-unique-params="{{ doc.unique_params_json }}"
                        title="{% translate 'Historique des versions' %}">
                    <i class="bi bi-clock-history text-primary" style="font-size: 0.8rem;"></i>
                    <span class="text-muted" style="font-size: 0.7em;">{% translate "Historique" %}</span>
                </button>
                {% endif %}
            </div>

        </div>{# /card #}

    </div>
    {% endfor %}
</div>
{% endif %}


{% if not grid_only %}
{# ═══════════════════════════ Viewer Modal ════════════════════════════ #}
<div class="modal fade"
     id="{{ modal_id }}"
     tabindex="-1"
     aria-labelledby="{{ modal_id }}Label"
     aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl">
        <div class="modal-content">

            {# ── Header ── #}
            <div class="modal-header py-2">
                <h5 class="modal-title" id="{{ modal_id }}Label">
                    {% translate "Visionneuse de documents" %}
                </h5>
                <div class="d-flex align-items-center ms-auto gap-2">
                    <a href="#"
                       id="{{ fullpage_id }}"
                       class="btn btn-sm btn-outline-secondary"
                       target="_blank"
                       rel="noopener noreferrer"
                       title="{% translate 'Ouvrir en pleine page' %}">
                        <i class="bi bi-box-arrow-up-right"></i>
                    </a>
                    <a href="#"
                       id="{{ download_id }}"
                       class="btn btn-sm btn-outline-primary"
                       download
                       title="{% translate 'Télécharger' %}">
                        <i class="bi bi-download me-1"></i>{% translate "Télécharger" %}
                    </a>
                    <button type="button"
                            class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="{% translate 'Fermer' %}"></button>
                </div>
            </div>

            {# ── Body: carousel ── #}
            <div class="modal-body p-0">
                <div id="{{ carousel_id }}" class="carousel slide" data-bs-ride="false">
                    <div class="carousel-inner">
                        {% for doc in docs %}
                        <div class="carousel-item {% if forloop.first %}active{% endif %}"
                             data-doc-url="{{ doc.file_url }}"
                             data-doc-filename="{{ doc.filename }}"
                             data-doc-title="{{ doc.title }}">
                            <div class="d-flex justify-content-center align-items-center"
                                 style="min-height: 60vh; background: #f8f9fa;">
                                {% if doc.is_pdf %}
                                    <iframe src="{{ doc.file_url }}"
                                            style="width: 100%; height: 70vh; border: none;"
                                            title="{{ doc.title }}"></iframe>
                                {% elif doc.is_image %}
                                    <div class="doc-viewer-image-viewport position-relative w-100 d-flex justify-content-center align-items-center overflow-hidden"
                                         style="height: 70vh; min-height: 60vh; user-select: none;">
                                        <img src="{{ doc.file_url }}"
                                             class="doc-viewer-zoom-img"
                                             alt="{{ doc.title }}"
                                             draggable="false"
                                             style="max-height: 70vh; max-width: 100%; object-fit: contain; cursor: zoom-in; transition: transform 0.15s ease-out; transform-origin: center center;">

                                        {# Floating zoom controls toolbar #}
                                        <div class="doc-viewer-zoom-toolbar position-absolute bottom-0 start-50 translate-middle-x mb-2 d-flex align-items-center gap-1 px-2 py-1 rounded-pill shadow-sm"
                                             style="background: rgba(33, 37, 41, 0.78); backdrop-filter: blur(4px); z-index: 5;">
                                            <button type="button" class="btn btn-sm btn-link text-white p-1 text-decoration-none doc-zoom-out" title="{% translate 'Dézoomer' %}">
                                                <i class="bi bi-dash-circle fs-6"></i>
                                            </button>
                                            <span class="text-white-50 px-1 doc-zoom-level fw-semibold" style="font-size: 0.75rem; min-width: 44px; text-align: center;">100%</span>
                                            <button type="button" class="btn btn-sm btn-link text-white p-1 text-decoration-none doc-zoom-in" title="{% translate 'Zoomer' %}">
                                                <i class="bi bi-plus-circle fs-6"></i>
                                            </button>
                                            <button type="button" class="btn btn-sm btn-link text-white p-1 text-decoration-none doc-zoom-reset" title="{% translate 'Réinitialiser' %}">
                                                <i class="bi bi-arrow-counterclockwise fs-6"></i>
                                            </button>
                                        </div>
                                    </div>
                                {% elif doc.text_preview %}
                                    <div class="w-100 p-3 overflow-auto" style="max-height: 70vh;">
                                        <pre class="bg-light border rounded p-3 mb-0" style="font-size:.85rem;white-space:pre-wrap;word-break:break-all;">{{ doc.text_preview }}</pre>
                                        {% if doc.text_truncated %}
                                            <p class="text-muted small mt-2 mb-0">{% translate "File truncated to the first 50 000 characters." %}</p>
                                        {% endif %}
                                    </div>
                                {% elif doc.tabular_rows %}
                                    <div class="w-100 px-2 overflow-auto" style="max-height: 70vh;">
                                        <table class="table table-sm table-bordered table-hover mb-0 align-top">
                                            <thead class="table-light sticky-top">
                                                <tr>{% for cell in doc.tabular_rows.0 %}<th scope="col">{{ cell }}</th>{% endfor %}</tr>
                                            </thead>
                                            <tbody>
                                                {% for row in doc.tabular_rows|slice:"1:" %}
                                                    <tr>{% for cell in row %}<td>{{ cell }}</td>{% endfor %}</tr>
                                                {% endfor %}
                                            </tbody>
                                        </table>
                                        {% if doc.tabular_truncated %}
                                            <p class="text-muted small mt-2 mb-0">{% translate "Only the first 200 rows are shown." %}</p>
                                        {% endif %}
                                    </div>
                                {% else %}
                                    {# Generic file: show icon + download prompt #}
                                    <div class="text-center p-5">
                                        <i class="{{ doc.ext|file_icon_class }}"
                                           style="font-size: 5rem;"></i>
                                        <p class="mt-3 fw-semibold text-truncate">
                                            {{ doc.filename }}
                                        </p>
                                        <a href="{{ doc.file_url }}"
                                           class="btn btn-primary mt-2"
                                           target="_blank"
                                           rel="noopener noreferrer">
                                            <i class="bi bi-download me-2"></i>
                                            {% translate "Télécharger" %}
                                        </a>
                                    </div>
                                {% endif %}
                            </div>
                            {# Caption bar #}
                            <div class="px-3 py-2 text-center text-white d-flex align-items-center justify-content-center flex-wrap gap-2"
                                 style="background: rgba(0,0,0,.65);">
                                {% if doc.phase_title %}
                                <span class="badge {{ doc.phase_badge_class }}" style="font-size: .8rem;">
                                    <i class="bi {{ doc.phase_icon }} me-1"></i>{{ doc.phase_title }}
                                </span>
                                {% endif %}
                                <strong>{{ doc.filename }}</strong>
                                {% if show_tags and doc.tags_list %}
                                {% for t in doc.tags_list %}
                                <span class="badge bg-primary ms-1" style="font-size: .7em; vertical-align: middle;">{{ t.name }}{% if doc.unique_params.format %} ({{ doc.unique_params.format }}){% endif %}</span>
                                {% endfor %}
                                {% endif %}
                                {% if show_versions and doc.version_number %}
                                <span class="ms-2 opacity-75" style="font-size: .85em;">v{{ doc.version_number }}</span>
                                {% endif %}
                                {% if doc.attached_at %}
                                <span class="ms-2 opacity-75" style="font-size: .85em;">
                                    {{ doc.attached_at|date:"d/m/Y H:i" }}
                                </span>
                                {% endif %}
                                {% if doc.attached_by %}
                                <span class="ms-1 opacity-75" style="font-size: .85em;">
                                    – {{ doc.attached_by|short_name }}
                                </span>
                                {% endif %}
                            </div>
                        </div>
                        {% endfor %}
                    </div>

                    {# Prev / Next controls (only when multiple docs) #}
                    {% if docs|length > 1 %}
                    <button class="carousel-control-prev" type="button"
                            data-bs-target="#{{ carousel_id }}" data-bs-slide="prev"
                            style="width: auto; height: auto; top: 50%; bottom: auto; transform: translateY(-50%); padding: 0 4px;">
                        <span class="carousel-control-prev-icon"
                              style="background-color: rgba(0,0,0,.5); border-radius: 50%; padding: 18px;"
                              aria-hidden="true"></span>
                        <span class="visually-hidden">{% translate "Précédent" %}</span>
                    </button>
                    <button class="carousel-control-next" type="button"
                            data-bs-target="#{{ carousel_id }}" data-bs-slide="next"
                            style="width: auto; height: auto; top: 50%; bottom: auto; transform: translateY(-50%); padding: 0 4px;">
                        <span class="carousel-control-next-icon"
                              style="background-color: rgba(0,0,0,.5); border-radius: 50%; padding: 18px;"
                              aria-hidden="true"></span>
                        <span class="visually-hidden">{% translate "Suivant" %}</span>
                    </button>
                    {% endif %}
                </div>

                {# ── Bottom thumbnail strip (only when multiple docs) ── #}
                {% if docs|length > 1 %}
                <div class="p-2 border-top bg-light">
                    <div class="d-flex flex-wrap justify-content-center gap-2"
                         id="{{ thumbs_id }}">
                        {% for doc in docs %}
                        <button type="button"
                                class="doc-strip-thumb {% if forloop.first %}active{% endif %}"
                                data-bs-target="#{{ carousel_id }}"
                                data-bs-slide-to="{{ doc.index }}"
                                aria-label="{{ doc.title }}"
                                title="{% if doc.phase_title %}{{ doc.phase_title }} - {% endif %}{{ doc.filename }}"
                                style="border: 3px solid {% if forloop.first %}#0d6efd{% else %}transparent{% endif %};
                                       padding: 0; background: none; cursor: pointer;
                                       border-radius: 4px; transition: border-color .2s;">
                            {% if doc.thumbnail_url %}
                                <img src="{{ doc.thumbnail_url }}"
                                     alt="{{ doc.title }}"
                                     style="width: 60px; height: 60px; object-fit: cover;
                                            border-radius: 2px; display: block;"
                                     loading="lazy">
                            {% elif doc.is_image %}
                                <img src="{{ doc.file_url }}"
                                     alt="{{ doc.title }}"
                                     style="width: 60px; height: 60px; object-fit: cover;
                                            border-radius: 2px; display: block;"
                                     loading="lazy">
                            {% else %}
                                <div style="width: 60px; height: 60px; display: flex;
                                            align-items: center; justify-content: center;
                                            background: #e9ecef; border-radius: 2px;">
                                    <i class="{{ doc.ext|file_icon_class }}"
                                       style="font-size: 1.4rem;"></i>
                                </div>
                            {% endif %}
                        </button>
                        {% endfor %}
                    </div>
                </div>
                {% endif %}

            </div>{# /modal-body #}
        </div>{# /modal-content #}
    </div>{# /modal-dialog #}
</div>{# /modal #}
{% endif %}

<style>
.doc-viewer-zoom-toolbar button:hover {
    color: #0dcaf0 !important;
    transform: scale(1.15);
}
.doc-viewer-zoom-toolbar button {
    transition: transform 0.1s ease, color 0.1s ease;
}
.doc-viewer-image-viewport {
    background-color: #f8f9fa;
}
</style>

{# ═══════════════════════════ Inline JS ══════════════════════════════ #}
<script>
(function () {
    'use strict';

    const modalId    = '{{ modal_id }}';
    const carouselId = '{{ carousel_id }}';
    const thumbsId   = '{{ thumbs_id }}';
    const downloadId = '{{ download_id }}';
    const fullpageId = '{{ fullpage_id }}';

    const modal       = document.getElementById(modalId);
    const carousel    = document.getElementById(carouselId);
    const downloadBtn = document.getElementById(downloadId);
    const fullpageBtn = document.getElementById(fullpageId);

    if (!modal || !carousel) return;

    /* ── Update download + fullpage buttons to reflect the active slide ── */
    function updateDownloadBtn() {
        const active = carousel.querySelector('.carousel-item.active');
        if (active) {
            const url = active.dataset.docUrl || '#';
            if (downloadBtn) {
                downloadBtn.href = url;
                downloadBtn.setAttribute('download', active.dataset.docFilename || '');
            }
            if (fullpageBtn) {
                fullpageBtn.href = url;
            }
        }
    }

    /* ── Click on a grid thumbnail → jump carousel to that index ── */
    document.querySelectorAll('[data-viewer-modal="' + modalId + '"]').forEach(function (thumb) {
        thumb.addEventListener('click', function (e) {
            e.preventDefault();
            const idx = parseInt(this.dataset.docIndex, 10);
            if (!isNaN(idx)) {
                bootstrap.Carousel.getOrCreateInstance(carousel).to(idx);
            }
        });
    });

    /* ── Keep strip thumbnail highlight in sync with carousel ── */
    carousel.addEventListener('slide.bs.carousel', function (e) {
        const stripThumbs = document.querySelectorAll('#' + thumbsId + ' .doc-strip-thumb');
        stripThumbs.forEach(function (btn, idx) {
            const active = idx === e.to;
            btn.style.borderColor = active ? '#0d6efd' : 'transparent';
            btn.classList.toggle('active', active);
        });
    });

    /* ── Update download button after each slide ── */
    carousel.addEventListener('slid.bs.carousel', updateDownloadBtn);

    /* ── Keyboard navigation while modal is open ── */
    modal.addEventListener('keydown', function (e) {
        if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') return;
        e.preventDefault();
        const bsCarousel = bootstrap.Carousel.getOrCreateInstance(carousel);
        e.key === 'ArrowLeft' ? bsCarousel.prev() : bsCarousel.next();
    });

    /* ── Initialise download button when modal becomes visible ── */
    modal.addEventListener('shown.bs.modal', updateDownloadBtn);

    /* ── Image Zoom & Pan functionality ── */
    function initImageZoom() {
        const viewports = carousel.querySelectorAll('.doc-viewer-image-viewport');
        viewports.forEach(function (vp) {
            const img = vp.querySelector('.doc-viewer-zoom-img');
            const zoomInBtn = vp.querySelector('.doc-zoom-in');
            const zoomOutBtn = vp.querySelector('.doc-zoom-out');
            const zoomResetBtn = vp.querySelector('.doc-zoom-reset');
            const zoomLevel = vp.querySelector('.doc-zoom-level');

            if (!img) return;

            let scale = 1;
            let posX = 0;
            let posY = 0;
            let isDragging = false;
            let startPointerX = 0;
            let startPointerY = 0;
            let initialPinchDist = 0;
            let initialScale = 1;

            function clampPan(targetX, targetY, curScale) {
                if (curScale <= 1) return { x: 0, y: 0 };
                const vpWidth = vp.clientWidth;
                const vpHeight = vp.clientHeight;
                const maxPanX = Math.max(0, (vpWidth * (curScale - 1)) / 2 + 50);
                const maxPanY = Math.max(0, (vpHeight * (curScale - 1)) / 2 + 50);
                return {
                    x: Math.min(maxPanX, Math.max(-maxPanX, targetX)),
                    y: Math.min(maxPanY, Math.max(-maxPanY, targetY))
                };
            }

            function applyTransform(animate) {
                img.style.transition = animate ? 'transform 0.15s ease-out' : 'none';
                img.style.transform = 'translate(' + posX + 'px, ' + posY + 'px) scale(' + scale + ')';

                if (zoomLevel) {
                    zoomLevel.textContent = Math.round(scale * 100) + '%';
                    if (scale > 1.05) {
                        zoomLevel.classList.remove('text-white-50');
                        zoomLevel.classList.add('text-white');
                    } else {
                        zoomLevel.classList.remove('text-white');
                        zoomLevel.classList.add('text-white-50');
                    }
                }

                if (scale > 1.05) {
                    img.style.cursor = isDragging ? 'grabbing' : 'grab';
                } else {
                    img.style.cursor = 'zoom-in';
                }
            }

            function setZoom(newScale, focalX, focalY, animate) {
                const prevScale = scale;
                scale = Math.min(5, Math.max(1, newScale));

                if (scale <= 1) {
                    scale = 1;
                    posX = 0;
                    posY = 0;
                } else if (focalX !== undefined && focalY !== undefined && prevScale !== scale) {
                    const vpRect = vp.getBoundingClientRect();
                    const cx = focalX - (vpRect.left + vpRect.width / 2);
                    const cy = focalY - (vpRect.top + vpRect.height / 2);
                    const ratio = scale / prevScale;
                    posX = posX - cx * (ratio - 1);
                    posY = posY - cy * (ratio - 1);
                    const clamped = clampPan(posX, posY, scale);
                    posX = clamped.x;
                    posY = clamped.y;
                } else {
                    const clamped = clampPan(posX, posY, scale);
                    posX = clamped.x;
                    posY = clamped.y;
                }
                applyTransform(animate !== false);
            }

            function resetZoom() {
                scale = 1;
                posX = 0;
                posY = 0;
                applyTransform(true);
            }

            vp._resetZoom = resetZoom;

            if (zoomInBtn) {
                zoomInBtn.addEventListener('click', function (e) {
                    e.stopPropagation();
                    setZoom(scale * 1.35, undefined, undefined, true);
                });
            }

            if (zoomOutBtn) {
                zoomOutBtn.addEventListener('click', function (e) {
                    e.stopPropagation();
                    setZoom(scale / 1.35, undefined, undefined, true);
                });
            }

            if (zoomResetBtn) {
                zoomResetBtn.addEventListener('click', function (e) {
                    e.stopPropagation();
                    resetZoom();
                });
            }

            vp.addEventListener('wheel', function (e) {
                e.preventDefault();
                const factor = e.deltaY < 0 ? 1.15 : (1 / 1.15);
                setZoom(scale * factor, e.clientX, e.clientY, false);
            }, { passive: false });

            vp.addEventListener('dblclick', function (e) {
                if (e.target.closest('.doc-viewer-zoom-toolbar')) return;
                e.preventDefault();
                if (scale > 1.2) {
                    resetZoom();
                } else {
                    setZoom(2.5, e.clientX, e.clientY, true);
                }
            });

            vp.addEventListener('mousedown', function (e) {
                if (e.target.closest('.doc-viewer-zoom-toolbar')) return;
                if (scale <= 1) return;
                isDragging = true;
                startPointerX = e.clientX - posX;
                startPointerY = e.clientY - posY;
                img.style.cursor = 'grabbing';
                e.preventDefault();
                e.stopPropagation();
            });

            window.addEventListener('mousemove', function (e) {
                if (!isDragging) return;
                const clamped = clampPan(e.clientX - startPointerX, e.clientY - startPointerY, scale);
                posX = clamped.x;
                posY = clamped.y;
                applyTransform(false);
            });

            window.addEventListener('mouseup', function () {
                if (!isDragging) return;
                isDragging = false;
                if (scale > 1) img.style.cursor = 'grab';
            });

            function getTouchDistance(t1, t2) {
                const dx = t1.clientX - t2.clientX;
                const dy = t1.clientY - t2.clientY;
                return Math.sqrt(dx * dx + dy * dy);
            }

            vp.addEventListener('touchstart', function (e) {
                if (e.target.closest('.doc-viewer-zoom-toolbar')) return;
                if (e.touches.length === 2) {
                    initialPinchDist = getTouchDistance(e.touches[0], e.touches[1]);
                    initialScale = scale;
                    e.preventDefault();
                    e.stopPropagation();
                } else if (e.touches.length === 1 && scale > 1) {
                    isDragging = true;
                    startPointerX = e.touches[0].clientX - posX;
                    startPointerY = e.touches[0].clientY - posY;
                    e.stopPropagation();
                }
            }, { passive: false });

            vp.addEventListener('touchmove', function (e) {
                if (e.target.closest('.doc-viewer-zoom-toolbar')) return;
                if (e.touches.length === 2 && initialPinchDist > 0) {
                    const currentDist = getTouchDistance(e.touches[0], e.touches[1]);
                    const factor = currentDist / initialPinchDist;
                    const midX = (e.touches[0].clientX + e.touches[1].clientX) / 2;
                    const midY = (e.touches[0].clientY + e.touches[1].clientY) / 2;
                    setZoom(initialScale * factor, midX, midY, false);
                    e.preventDefault();
                    e.stopPropagation();
                } else if (e.touches.length === 1 && isDragging && scale > 1) {
                    const clamped = clampPan(e.touches[0].clientX - startPointerX, e.touches[0].clientY - startPointerY, scale);
                    posX = clamped.x;
                    posY = clamped.y;
                    applyTransform(false);
                    e.preventDefault();
                    e.stopPropagation();
                }
            }, { passive: false });

            vp.addEventListener('touchend', function (e) {
                if (e.touches.length < 2) {
                    initialPinchDist = 0;
                }
                if (e.touches.length === 0) {
                    isDragging = false;
                }
            });
        });
    }

    function resetAllZooms() {
        carousel.querySelectorAll('.doc-viewer-image-viewport').forEach(function (vp) {
            if (typeof vp._resetZoom === 'function') {
                vp._resetZoom();
            }
        });
    }

    carousel.addEventListener('slide.bs.carousel', resetAllZooms);
    modal.addEventListener('hidden.bs.modal', resetAllZooms);

    initImageZoom();

})();
</script>

{% else %}
<p class="text-muted mb-0" id="{{ modal_id }}-empty">
    {% translate "Aucun document associé" %}
</p>
{% endif %}