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

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

{% block editor-pre-title %}Edit Dataset{% endblock %}
{% block editor-title %}{{ object.name }}{% endblock %}

{% block editor-tools %}
    <a href="#0" data-modal-url="{% url "edit-data-source" source.pk %}">
        {% tool_icon label='Edit' icon='pencil' %}
    </a>
    <a href="#0" data-modal-url="{% url "clone-data-source" source.pk %}">
        {% tool_icon label='Clone' icon='copy' %}
    </a>    
    <a href="#0" data-modal-url="{% url "delete-data-source" source.pk %}">
        {% tool_icon label='Delete' icon='trash-x' %}
    </a>
    <a href="#0" data-modal-url="{% url "add-source-model" source=source.pk %}">
        {% tool_icon label='Add Model' icon='database-plus' %}
    </a>
    <a href="#0" data-modal-url="{% url "add-source-field" source=source.pk %}">
        {% tool_icon label='Add Field' icon='table-plus' %}
    </a>
{% endblock %}

{% block editor-content %}
    <div class="container-fluid h-100">
        <div class="d-flex flex-column justify-content-stretch py-3 h-100">
            <div class="alert alert-info small mb-4">
                Add models to the Dataset and add fields linked to the models. Use dimensions and calculation expressions to
                configure grouping and metric aggregations. Add dataset filter expressions to establish baseline data constraints.
            </div>
            <div class="card mb-3">
                <div class="card-header py-2 d-flex align-items-center">
                    <h5>Models</h5>
                    <div class="toolbox ms-auto pr-0">
                        <a href="#0" data-modal-url="{% url "add-source-model" source=source.pk %}"
                           title="Add Model">
                            {% tool_icon icon='database-plus' size='sm' %}
                        </a>
                    </div>
                </div>
                <table class="table table-sm">
                    <thead>
                    <tr>
                        <th>Model</th>
                        {% for group_field in source.group_by %}
                            <th>{{ group_field|human_title }}<span
                                    class="hidden-xs text-body-secondary">&nbsp;&middot;&nbsp;Dimension</span>
                            </th>
                        {% endfor %}
                        <th>&nbsp;</th>
                    </tr>
                    </thead>
                    <tbody class="text-sm">
                    {% for src_model in source.models.all %}
                        <tr>
                            <td class="font-monospace">{{ src_model.name }}</td>
                            {% for field_name, group_field in src_model.get_group_fields.items %}
                                {% if group_field %}
                                    <td class="font-monospace">
                                        <a href="#0"
                                           data-modal-url="{% url 'edit-source-field' source=source.pk pk=group_field.pk %}">{{ group_field.expression }}</a>
                                    </td>
                                {% else %}
                                    <td class="text-danger">
                                        <a href="#0"
                                           data-modal-url="{% url 'add-group-field' source=source.pk group=field_name %}">Undefined</a>
                                    </td>
                                {% endif %}
                            {% endfor %}
                            <td>
                                <div class="d-flex align-children-end">
                                    <div class="toolbox ms-auto">
                                        <a href="#0"
                                           data-modal-url="{% url 'edit-source-model' source=source.pk pk=src_model.pk %}"
                                           title="Edit">
                                            {% tool_icon icon='pencil' size='sm' %}
                                        </a>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    {% empty %}
                        <tr>
                            <td colspan="5" class="text-center">No models defined</td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
            <div class="card mb-3  flex-scrollable d-flex flex-column">
                <div class="card-header d-flex align-items-center">
                    <h5>Fields</h5>
                    <div class="toolbox ms-auto pr-0">
                        <a href="#0" data-modal-url="{% url "add-source-field" source=source.pk %}"
                           title="Add Field">
                            {% tool_icon icon='table-plus' size='sm' %}
                        </a>
                    </div>
                </div>
                <div class="flex-scrollable">
                <table class="table table-sm">
                    <thead>
                    <tr>
                        <th>Name</th>
                        <th>Label</th>
                        <th>Model</th>
                        <th class="d-none d-md-table-cell">Expression</th>
                        <th>&nbsp;</th>
                    </tr>
                    </thead>
                    <tbody class="text-sm">
                    {% for field in source.non_group_fields %}
                        <tr>
                            <td class="font-monospace pl-3">{{ field.name }}</td>
                            <td>{{ field.label }}</td>
                            <td class="font-monospace">{{ field.model }}</td>
                            <td class="d-none d-md-table-cell font-monospace">{{ field.expression }}</td>
                            <td>
                                <div class="d-flex align-children-end">
                                    <div class="toolbox ms-auto pr-0">
                                        <a href="#0"
                                           data-modal-url="{% url 'edit-source-field' source=source.pk pk=field.pk %}"
                                           title="Edit">
                                            {% tool_icon icon='pencil' size='sm' %}
                                        </a>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
                </div>
            </div>
            <div class="card flex-scrollable d-flex flex-column">
                <div class="card-header d-flex align-items-center">
                    <h5 class="my-0"><span class="text-body-secondary">Data</span></h5>
                    <div class="toolbox ms-auto pr-0">
                        <a download="{{ source.name_slug }}.csv"
                           href="{% url 'format-source-data' format="csv" pk=source.pk %}" title="Download CSV">
                            {% tool_icon icon='file-type-csv' size='sm' %}
                        </a>
                        <a download="{{ source.name_slug }}.json"
                           href="{% url 'format-source-data' format="json" pk=source.pk %}" title="Download JSON">
                            {% tool_icon icon='file-type-js' size='sm' %}
                        </a>
                    </div>
                </div>
                <div class="card-body small p-0 rc-data-preview flex-scrollable">
                    {% data_snippet source %}
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block editor-sidebar %}
    <div class="d-flex flex-column py-3 pe-3 h-100">
    <div class="card mb-3">
        <div class="card-header">
            <h5 class="my-0"><span class="text-body-secondary">Related Reports</span></h5>
        </div>
        <ul class="list-group list-group-flush">
            {% for report in source.reports %}
                <li class="list-group-item bg-transparent">
                    <a href="{% url 'report-editor' pk=report.pk %}">
                        {% svg_icon 'report' size='sm' %}&nbsp;<small>{{ report }}</small>
                    </a>
                </li>
            {% endfor %}
        </ul>
    </div>
    <div class="card flex-scrollable d-flex flex-column" >
        <div class="card-header">
            <input type="text" id="record-list-search" class="form-control form-control-sm mt-2" placeholder="Record Types ...">
        </div>
        <div class="flex-scrollable">
        <ul class="list-group-flush list-group text-condensed" id="record-list-items">
            {% for model in source.models.all %}
                <li class="fs-6 list-group-item bg-body-secondary record-class">
                {{ model }}
                </li>
                {% for name, type in model.get_model_specs %}
                <li class="list-group-item bg-transparent"
                    title="{{ type }}"
                >
                    <div class="text-nowrap" style="overflow: hidden;">
                        <span class="text-warning-emphasis">{% svg_icon type size='sm' %}</span>&nbsp;<small>{{ name }}</small>
                    </div>
                </li>
                {% endfor %}
            {% endfor %}
        </ul>
        </div>
    </div>
    </div>
{% endblock %}