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

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

{% block body %}
    <div id="rc-editor" class="report-editor"  data-csrf-token="{{ csrf_token}}">
        <div id="rc-header" class="d-flex align-items-center border-bottom">
            <strong class="fs-4 fw-bold text-body-secondary pe-2 rough-underline">RC</strong>
            <div class="border-start text-secondary d-flex flex-column px-2">
                <div class="page-pretitle my-0">{% block editor-pretitle %}{% endblock %}</div>
                <div class="fs-4 fw-light editor-title my-0">{% block editor-title %}{% endblock %}</div>
            </div>
            <div class="ms-auto page-tools col-auto d-flex align-items-center gap-2 ps-3">
            {% block editor-tools %}{% endblock %}
            <a class="text-body" href="#rc-off-canvas" data-oc-url="{% url "editor-report-list" %}" data-bs-toggle="offcanvas">
                {% tool_icon label='Reports' icon='list-details' %}
            </a>
            <a class="text-body" href="#rc-off-canvas" data-oc-url="{% url "data-source-list" %}" data-bs-toggle="offcanvas">
                {% tool_icon label='Sources' icon='database' %}
            </a>
            </div>
        </div>
        <div id="rc-editor-content">{% block editor-content %}{% endblock %}</div>
        <div id="rc-editor-sidebar">{% block editor-sidebar %}{% endblock %}</div>
    </div>
    <div class="offcanvas offcanvas-start {% if show_sidebar %}show{% endif %}" tabindex="-1" id="rc-off-canvas" aria-labelledby="oc-list-title">
    {% block report-off-canvas %}{% endblock %}
    </div>
{% endblock %}

{% block page-scripts %}
    {{ block.super }}
    <script>
    $(document).ready(function () {
         $("body, html").addClass("report-editor");
    });
    </script>
    {% if report %}
    <script src="{% static "reportcraft/sortable.min.js" %}"></script>
    <script>
        $(document).ready(function() {
            // allow sorting entries
            sortable({drag: '.entry', dropTo: '.entry-container'}, function () {
                const csrfToken = "{{ csrf_token }}";
                const order = Array.from(document.querySelectorAll('.entry-container .entry'))
                    .map(entry => parseInt(entry.dataset.entryId));
                $.ajax({
                    url: "{% url 'reorder-report-entries' report.pk %}",
                    type: "POST",
                    contentType: "application/json",
                    data: JSON.stringify(order),
                    dataType: "json",
                    headers: {
                        'X-CSRFToken': csrfToken
                    },
                    success: function (response) {
                    },
                    error: function (xhr, status, error) {
                        console.error('Error saving order:', error);
                    }
                });
            });
        });
    </script>
    {% endif %}
{% endblock %}