{% extends "wagtailadmin/generic/base.html" %}

{% load i18n wagtailadmin_tags static %}

{% block extra_css %}
    {{ block.super }}
    <link rel="stylesheet" href="{% static "request_filters/admin/request_filters.css" %}"/>
{% endblock %}

{% block extra_js %}
    {{ block.super }}
    <script src="{% static "request_filters/admin/chart.js" %}"></script>
    <script src="{% static "request_filters/admin/chart_view.js" %}"></script>
    <script src="{% static "wagtailadmin/js/date-time-chooser.js" %}"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            initDateTimeChooser("id_to_date", {"dayOfWeekStart": 1, "format": "Y-m-d H:i", "formatTime": "H:i", "parentID": "body"});
            initDateTimeChooser("id_from_date", {"dayOfWeekStart": 1, "format": "Y-m-d H:i", "formatTime": "H:i", "parentID": "body"});
        });
    </script>
{% endblock %}


{% block main_content %}
    <div class="chart">
        <canvas id="filter-chart" data-chart-type="{{ chart_type }}"></canvas>
    </div>
    <form method="get" autocomplete="off" class="request-filters-form">

        <input type="hidden" name="query_by" value="{{ query_by }}">

        {% if filter.form.errors or filter.form.non_field_errors %}
            <div class="error-message">
                {% if filter.form.non_field_errors %}
                    {{ filter.form.non_field_errors }}
                {% endif %}
                {% for field in filter.form %}
                    {% if field.errors %}
                        {{ field.errors }}
                    {% endif %}
                {% endfor %}
            </div>
        {% endif %}

        <div class="request-filters-row">
            
            <div class="request-filters-col">
                {% include "./chart_view_form_field.html" with field=filter.form.filter %}
            </div>

            <div class="request-filters-col">
                {% include "./chart_view_form_field.html" with field=filter.form.method %}
            </div>

            <div class="request-filters-col">
                {% include "./chart_view_form_field.html" with field=filter.form.chart_type %}
            </div>

        </div>
        <div class="request-filters-row">
            
            <div class="request-filters-col">
                {% include "./chart_view_form_field.html" with field=filter.form.from_date %}
            </div>

            <div class="request-filters-col">
                {% include "./chart_view_form_field.html" with field=filter.form.to_date %}
            </div>

        </div>

        <div class="request-filter-field-wrapper">
            <div class="field-label">
                {{ filter.form.filters.label_tag }}
            </div>
            <div class="field-input request-filters-scrollable" style="--height: 500px;">
                {% for f in filter.form.filters %}
                    {% include "./chart_view_form_field.html" with field=f %}
                {% endfor %}
            </div>
        </div>

        <input type="submit" class="button" value="{% translate "Filter" %}">
    </form>
    {{ chart|json_script:"chart_data" }}
{% endblock %}