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

{% block page_title %}{% trans "Kanban" %}{% endblock %}

{% 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>
{% 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;
                    }
                }
            }
        });
    </script>
{% endblock %}