{% extends "reportcraft/base.html" %}
{% load static %}

{% load reportcraft %}
{% block extra_css %}
    <link href="{% static "reportcraft/reportcraft.min.css" %}" rel="stylesheet">
{% endblock %}

{% block page-pre-title %}Report{% endblock %}
{% block page-title %}<span id="report-title">{{ report.title }}</span>{% endblock %}
{% block page-subtitle %}<span id="report-subtitle">{{ report.description }}</span>{% endblock %}
{% block page-content %}
    <div id="report-entry" class="report-{{ report.theme }}"></div>
{% endblock %}

{% block page-scripts %}
    {% 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>
{% endblock %}