{% extends "allianceauth/base-bs5.html" %}
{% load i18n static kanban_tags %}

{% block page_title %}{% kanban_app_name %}{% endblock %}

{% block header_nav_brand %}
    {% kanban_app_name %} <span class="badge bg-secondary ms-2 text-white" style="font-size: 0.5em; vertical-align: middle;">v{% kanban_version %}</span>
{% endblock header_nav_brand %}

{% block content %}
<div class="container-fluid">
    {% block aa_kanban_content %}{% endblock %}
</div>

    <!-- Custom HTMX Confirm Modal -->
    <div class="modal fade" id="htmxConfirmModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">{% trans "Confirm Action" %}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% trans 'Close' %}"></button>
                </div>
                <div class="modal-body">
                    <p id="htmxConfirmModalMessage"></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans "Cancel" %}</button>
                    <button type="button" class="btn btn-danger" id="htmxConfirmModalBtn">{% trans "Confirm" %}</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Global Kanban Image Lightbox Modal -->
    <div class="modal fade" id="kanbanImageLightboxModal" tabindex="-1" aria-hidden="true" style="z-index: 1095;">
        <div class="modal-dialog modal-dialog-centered modal-xl">
            <div class="modal-content bg-dark text-white border-0 shadow-lg">
                <div class="modal-header border-0 py-2">
                    <h6 class="modal-title text-truncate" id="kanbanImageLightboxTitle">{% trans "Image Preview" %}</h6>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="{% trans 'Close' %}"></button>
                </div>
                <div class="modal-body text-center p-2">
                    <img id="kanbanImageLightboxImg" src="" class="img-fluid rounded" style="max-height: 85vh; object-fit: contain;" alt="{% trans 'Preview' %}">
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block extra_javascript %}
    <script src="{% static 'aa_kanban/libs/htmx.min.js' %}"></script>
    <script>
        document.body.addEventListener('htmx:confirm', function(e) {
            if (e.detail.question) {
                // Prevent native browser confirm
                e.preventDefault();

                const modalEl = document.getElementById('htmxConfirmModal');
                const modalMessage = document.getElementById('htmxConfirmModalMessage');
                const confirmBtn = document.getElementById('htmxConfirmModalBtn');

                modalMessage.innerText = e.detail.question;

                // Get or create Bootstrap 5 modal
                const modal = bootstrap.Modal.getOrCreateInstance(modalEl);

                // Replace the confirm button to clear any old event listeners
                const newConfirmBtn = confirmBtn.cloneNode(true);
                confirmBtn.parentNode.replaceChild(newConfirmBtn, confirmBtn);

                newConfirmBtn.addEventListener('click', function() {
                    // Resume HTMX request
                    e.detail.issueRequest(true);
                    modal.hide();
                });

                modal.show();
            }
        });

        // Automatically add CSRF token to all HTMX requests
        document.body.addEventListener('htmx:configRequest', function(event) {
            const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]');
            if (csrfToken) {
                event.detail.headers['X-CSRFToken'] = csrfToken.value;
            } else {
                // Fallback to reading the cookie
                const cookies = document.cookie.split(';');
                for (let i = 0; i < cookies.length; i++) {
                    const cookie = cookies[i].trim();
                    if (cookie.startsWith('csrftoken=')) {
                        event.detail.headers['X-CSRFToken'] = decodeURIComponent(cookie.substring(10));
                        break;
                    }
                }
            }
        });

        // Automatically close open Bootstrap modals on closeModal HTMX event
        document.body.addEventListener('closeModal', function() {
            const modals = document.querySelectorAll('.modal.show');
            modals.forEach(function(modalEl) {
                const modal = bootstrap.Modal.getInstance(modalEl);
                if (modal) {
                    modal.hide();
                }
            });
        });

        // Global delegate for clicking rendered markdown images to open Lightbox
        document.body.addEventListener('click', function(e) {
            const img = e.target.closest('.kanban-rendered-image, [data-image-zoom="true"]');
            if (img && img.tagName === 'IMG') {
                const modalEl = document.getElementById('kanbanImageLightboxModal');
                if (modalEl) {
                    const lightboxImg = document.getElementById('kanbanImageLightboxImg');
                    const lightboxTitle = document.getElementById('kanbanImageLightboxTitle');
                    if (lightboxImg) lightboxImg.src = img.src;
                    if (lightboxTitle) lightboxTitle.textContent = img.alt || img.title || "{% trans 'Image Preview' %}";
                    const modal = bootstrap.Modal.getOrCreateInstance(modalEl);
                    modal.show();
                }
            }
        });
    </script>
{% endblock %}