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

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