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


{% block extra_css %}
    {{ block.super }}
    <style>
        {% pigments_css "friendly" %}
    </style>
{% endblock %}

{% block page-pretitle %}Edit Report{% endblock %}
{% block page-title %}
    {% if report %}{{ report.title }}{% else %}Report Editor{% endif %}
{% endblock %}
{% block page-subtitle %}
    {% if report %}{{ object.description }}{% else %}Please select or add a new a report from the list{% endif %}
{% endblock %}

{% block page-tools %}
    <a href="#rc-off-canvas" data-oc-url="{% url "editor-report-list" %}" data-bs-toggle="offcanvas">
        {% tool_icon label='Reports' icon='list-details' %}
    </a>
    <a href="#rc-off-canvas" data-oc-url="{% url "data-source-list" %}" data-bs-toggle="offcanvas">
        {% tool_icon label='Sources' icon='database' %}
    </a>
    {% if report %}
    <a href="{% url "report-view" slug=report.slug %}">
        {% tool_icon label='Preview' icon='live-view' %}
    </a>
    <a href="#0" data-modal-url="{% url "edit-report" report.pk %}">
        {% tool_icon label='Edit' icon='pencil' %}
    </a>
    <a href="#0" data-modal-url="{% url "delete-report" report.pk %}">
        {% tool_icon label='Delete' icon='trash-x' %}
    </a>
    <a href="#0" data-modal-url="{% url "add-report-entry" report=report.pk %}">
        {% tool_icon label='Add Entry' icon='photo-plus' %}
    </a>
    {% endif %}
{% endblock %}

{% block page-content %}
    {% if report %}
    <div class="row report-editor ">
            <div class="col-12">
            <div class="alert alert-info mb-4">
                Add entries to the report and then configure them to select the fields to display. The entry position,
                specifies the ordering of entries within the report. The entry style can be used to control the layout.
            </div>
        </div>
        <div class="col-md-12">
            <div class="row">
            {% for entry in entries %}
            <div class="entry pb-3 {{ entry.style|default:'col-12' }}">
                <div class="card">
                    <div class="card-header py-2 d-flex align-items-center">
                        <span class="text-muted">{% svg_icon entry.kind stroke=1 size='lg' %}</span>&emsp;
                        <div class="text-truncate">{{ entry.title }}</div>
                        <div class="toolbox ms-auto pr-0">
                            <a href="#!" data-modal-url="{% url 'configure-report-entry' report=report.pk pk=entry.pk %}" title="Configure">
                                {% tool_icon icon='adjustments-horizontal' size='sm' %}
                            </a>
                            {% if entry.source %}
                            <a href="{% url 'source-editor' pk=entry.source.pk %}" title="Edit Source">
                                {% tool_icon icon='database' size='sm' %}
                            </a>
                            {% endif %}
                            <a href="#!" data-modal-url="{% url 'edit-report-entry' report=report.pk pk=entry.pk %}" title="Edit Entry">
                                {% tool_icon icon='pencil' size='sm' %}
                            </a>
                            <a href="#!" data-modal-url="{% url 'delete-report-entry' report=report.pk pk=entry.pk %}" title="Delete">
                                {% tool_icon icon='trash-x' size='sm' %}
                            </a>
                        </div>
                    </div>
                    <div class="card-body">
                        {{ entry | entry_html }}
                    </div>
                </div>
            </div>
            {% endfor %}
            </div>
        </div>
    </div>
    {% endif %}
{% endblock %}
{% block report-off-canvas %}
{% if show_sidebar %}{% include "reportcraft/off-canvas-list.html" with items=reports %}{% endif %}
{% endblock %}