{% load static %}
{% load reportcraft %}

<link href="{% static "reportcraft/reportcraft.min.css" %}" rel="stylesheet">
<div id="report-entry" class="report-{{ report.theme }}"></div>
{% if payload %}
    {{ payload|json_script:"rc-report-data" }}
{% endif %}
<script type="module">
    import { showReport } from '{% static "reportcraft/reportcraft.min.js" %}';
    document.addEventListener('DOMContentLoaded', function() {
        const inlineDataEl = document.getElementById("rc-report-data");
        if (inlineDataEl) {
            try {
                const data = JSON.parse(inlineDataEl.textContent);
                const sections = data["sections"] || [];
                const reportTitle = data["title"] || "{{ report.title|escapejs }}";
                const reportDescription = data["description"] || "{{ report.description|escapejs }}";
                const titleEl = document.getElementById("report-title");
                const subtitleEl = document.getElementById("report-subtitle");
                if (titleEl) titleEl.innerText = reportTitle;
                if (subtitleEl) subtitleEl.innerText = reportDescription;
                showReport("#report-entry", sections, "{% static 'reportcraft' %}");
            } catch (error) {
                console.error('Error rendering inline report data:', error);
            }
        } else {
            fetch("{{ data_url }}{{ query }}")
                .then(response => response.json())
                .then(data => {
                    const sections = data["sections"] || [];
                    const reportTitle = data["title"] || "A Report";
                    const reportDescription = data["description"] || "";
                    const titleEl = document.getElementById("report-title");
                    const subtitleEl = document.getElementById("report-subtitle");
                    if (titleEl) titleEl.innerText = reportTitle;
                    if (subtitleEl) subtitleEl.innerText = reportDescription;
                    showReport("#report-entry", sections, "{% static 'reportcraft' %}");
                })
                .catch(error => console.error('Error fetching report data:', error));
        }
    });
</script>