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


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

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

{% block editor-tools %}
    {% 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 "clone-report" report.pk %}">
        {% tool_icon label='Clone' icon='copy' %}
    </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>
    <a href="#0" data-modal-url="{% url "import-entry" report.pk %}">
        {% tool_icon label='Import' icon='photo-down' %}
    </a>
    {% endif %}
{% endblock %}

{% block editor-content %}
    {% if report %}
        <div class="fluid-container m-3">
        <div class="alert alert-info small 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 class="row entry-container">
        {% for entry in entries %}
        <div class="entry mb-3 {{ entry.style|default:'col-12' }}"
             id="entry-{{ entry.pk }}"
             data-entry-id="{{ entry.pk }}">
            <div class="card">
                <div class="card-header ps-1 py-2 d-flex align-items-center">
                    <div class="drag-handle text-body-secondary p-1">{% svg_icon 'grip' stroke=1 %}</div>&nbsp;&nbsp;
                    <div>{% svg_icon entry.kind stroke=1 %}</div>&nbsp;
                    <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>
                        <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 'clone-report-entry' report=report.pk pk=entry.pk %}" title="Clone Entry">
                            {% tool_icon icon='copy' 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 %}
                    </div>
                </div>
                <div class="card-body">
                    {{ entry | entry_html }}
                </div>
            </div>
        </div>
        {% endfor %}
        </div>
        </div>
    {% else %}
        <div class="h-100 w-100 pb-5 d-flex align-items-center justify-content-center opacity-50">
            <img alt="ReportCraft" class="w-50 mb-5" src="{% static "reportcraft/logo.svg" %}">
        </div>
    {% endif %}
{% endblock %}
{% block report-off-canvas %}
{% if show_sidebar %}{% include "reportcraft/off-canvas-list.html" with items=reports %}{% endif %}
{% endblock %}