{% load i18n %}
{% load static %}
{% load widget_tweaks %}
<div id="left-sidebar-column"
     class="flex flex-col flex-auto mt-4 md:mt-0 md:mr-4 3xl:mr-0 md:w-full 4xl:mr-4">
    <div class="rounded border border-solid border-blue-500 shadow-2xl bg-white mb-2"
         id="chart-legend-container">
        <div class="rounded p-4 bg-water-500">
            <h3 class="heading font-bold text-black">
                <i icon-name="settings" class="pb-1"></i> {% translate "Adjust shown data" %}
            </h3>
        </div>
        <div id="chart-legend">
            {% if request.region.statistics_enabled and perms.cms.view_statistics %}
                {% include "statistics/_statistics_legend.html" with box_id="statistics_legend" languages=languages access_legends=access_legends %}
            {% endif %}
        </div>
    </div>
</div>
<div id="right-sidebar-column"
     class="flex flex-col flex-wrap 3xl:col-end-3 4xl:col-end-auto md:w-full">
    <div class="rounded border border-solid border-blue-500 shadow-2xl bg-white mb-2">
        <div class="rounded p-4 bg-water-500">
            <h3 class="heading font-bold text-black">
                <i icon-name="calendar" class="pb-1"></i> {% translate "Adjust time period" %}
            </h3>
        </div>
        <form id="statistics-form" class="flex flex-col p-4 pt-2">
            {% csrf_token %}
            <label for="{{ form.start_date.id_for_label }}">
                {{ form.start_date.label }}
            </label>
            {% render_field form.start_date|add_error_class:"border-red-500" %}
            <div id="start_date_error"
                 class="chart-client-error text-red-500 pb-2 hidden">
                <i icon-name="alert-triangle"></i>
            </div>
            <label for="{{ form.end_date.id_for_label }}">
                {{ form.end_date.label }}
            </label>
            {% render_field form.end_date|add_error_class:"border-red-500" %}
            <div id="end_date_error"
                 class="chart-client-error text-red-500 pb-2 hidden">
                <i icon-name="alert-triangle"></i>
            </div>
            <label for="{{ form.period.id_for_label }}">
                {{ form.period.label }}
            </label>
            {% render_field form.period|add_error_class:"border-red-500" %}
            <div id="period_error" class="chart-client-error text-red-500 pb-2 hidden">
                <i icon-name="alert-triangle"></i>
            </div>
            <button id="submit-date" class="btn mt-4">
                {% translate "Customize view" %}
            </button>
        </form>
    </div>
    <div class="rounded border border-solid border-blue-500 shadow-2xl bg-white mb-2">
        <div class="rounded p-4 bg-water-500">
            <h3 class="heading font-bold text-black">
                <i icon-name="download" class="pb-1"></i> {% translate "Export" %}
            </h3>
        </div>
        <div class="flex flex-col gap-4 p-4 pt-2">
            <div id="no-page-selected-error" class="text-red-500 px-4 hidden">
                <i icon-name="alert-triangle"></i> {% translate "Please select at least one page." %}
            </div>
            <div id="no-language-selected-error" class="text-red-500 px-4 hidden">
                <i icon-name="alert-triangle"></i> {% translate "Please select at least one language." %}
            </div>
            <div id="no-page-and-language-selected-error"
                 class="text-red-500 px-4 hidden">
                <i icon-name="alert-triangle"></i> {% translate "Please select at least one page and one language." %}
            </div>
            <label for="export-statistics">
                {% translate "Choose statistics to export" %}
            </label>
            <select id="export-statistics"
                    data-filename-prefix="{% translate "Statistics" %} {{ request.region.name }}"
                    data-language-column-title="{% translate "Language" %}">
                <option value="" selected>
                    --- {% translate "please select" %} ---
                </option>
                <option value="total-accesses-image">
                    {% translate "Image/PNG - Total Accesses" %}
                </option>
                <option value="total-accesses-csv">
                    {% translate "Table Document/CSV - Total Accesses" %}
                </option>
                <option value="page-accesses-csv">
                    {% translate "Table Document/CSV - Page Accesses" %}
                </option>
            </select>
            <button id="export-button" class="btn" disabled>
                {% translate "Export" %}
            </button>
            <a id="export-download-link" class="hidden"></a>
        </div>
    </div>
</div>