{% extends 'microsys/list_base.html' %}
{% load django_tables2 %}
{% load static %}
{% load crispy_forms_tags %}

{% block title %}{{ MS_TRANS.log_title }}{% endblock %}

{% block content %}

    <div class="row">
        <div class="col-12">
            <h2 class="page-title"><i class="bi bi-clock-history me-2"></i> {{ MS_TRANS.log_title }}</h2>
        </div>
    </div>

    <div class="py-2 no-print">
        {% crispy filter.form %}
    </div>

    <div class="card border-0 shadow-sm rounded-4">
        <div class="card-body p-0 table-responsive">
            <!-- Render the table -->
            {% render_table table %}
        </div>
    </div>

    <!-- Log Detail Modal -->
    <div class="modal fade" id="activityLogDetailModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content glass-card border-0 shadow-lg">
                <!-- Content loaded via AJAX -->
                <div class="modal-body text-center p-5" id="activityLogDetailModalBody">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block scripts %}
    <script nonce="{{ request.csp_nonce }}">
    document.addEventListener('DOMContentLoaded', function() {
        // Handle View Log Details Event from Context Menu
        document.addEventListener('micro:view-log-details', function(e) {
            // Context menu dispatch structure: e.detail = { originalTarget, action, data }
            // Support both direct data access and nested data for robustness
            const detail = e.detail;
            const data = detail.data || detail.actionData?.data || detail.action?.data;
            const url = data?.url;
            
            if (!url) return;
    
            const modalEl = document.getElementById('activityLogDetailModal');
            const modalBody = document.getElementById('activityLogDetailModalBody');
    
            if (modalEl && modalBody) {
                 // Show loading state
                 modalBody.innerHTML = `
                    <div class="modal-body text-center p-5">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                    </div>`;
                
                const modal = bootstrap.Modal.getOrCreateInstance(modalEl);
                modal.show();
    
                // Fetch content
                fetch(url, {
                    headers: { 'X-Requested-With': 'XMLHttpRequest' }
                })
                .then(response => response.text())
                .then(html => {
                    modalBody.innerHTML = html;
                })
                .catch(err => {
                    console.error('Error loading log details:', err);
                    modalBody.innerHTML = `
                        <div class="modal-body text-center p-5 text-danger">
                            <i class="bi bi-exclamation-circle display-1 mb-3"></i>
                            <p>Error loading details.</p>
                        </div>
                        <div class="modal-footer">
                             <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        </div>`;
                });
            }
        });
    });
    </script>
    <script src="{% static 'microsys/activitylog/js/main.js' %}" nonce="{{ request.csp_nonce }}"></script>
{% endblock %}