{% extends 'base.html.twig' %}

{% block content %}

    {% set enabledFilters = getCustomFiltersConfig('custom_filters.yaml', 'enabled_filters')['gauge_dashboard'] %}

    <div class="container-fluid">

        {% embed "panels/page-title-panel.html.twig" %}
            {% block pageTitle %}
                Gauge Dashboard
            {% endblock %}
        {% endembed %}

        <div class="row">

            {% include 'standard-filters.html.twig' %}

            <div class="col-12 col-sm-12 col-md-10 col-lg-10 col-xl-10">
                <div class="card pt-2 pb-2">
                    <div class="card-body pt-0">
                        <div class="section">

                            <div class="row py-3 border-bottom">
                                <h3>{{ survey|default('CEH Survey') }}</h3>
                            </div>

                            <div class="row py-4">
                            {% for graphContainer in graphContainers %}
                                <div class="col-xl-4 col-lg-4 col-sm-12 mb-3">
                                    <div class="card shadow-none border-0 border-radius-sm">
                                        <div class="card-body p-3">

                                            <div id="{{ graphContainer }}">

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            {% endfor %}
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block scripts_post_body %}
    <script type="text/javascript">

        {% for graph in graphs %}
        {{ graph|raw }}
        {% endfor %}

        $(function () {
            let filters = window.customFilters,
                options = window.options;

            options['enabled_filters'] = {{ getCustomFiltersConfig('custom_filters.yaml', 'enabled_filters')['gauge_dashboard']|json_encode|raw}};
            filters.init(options);

            filters.cascadeFilter('survey', 'category');

            $('#generate-filter-btn').on('click', function(){
                let dynamicForm = $('<form action="{{ path('admin_dashboard_gauge') }}" method="POST"></form>');
                dynamicForm.append($('<input type="hidden" name="where_clause" title="" value="'+filters.where_clauses+'">'));
                $('body').append(dynamicForm);
                dynamicForm.submit();
            });
        });
    </script>
{% endblock %}