{% extends '@TigrisBase/admin/layout.html.twig' %}
{% block title %}{{ 'menu.stats'|trans|parse_icons }}{% endblock %}
{% block main %}
<div id="statistics">
    <nav>
    <div class="nav nav-tabs" id="nav-tab" role="tablist">
        {% for stat in stats %}
        <button class="nav-item nav-link{% if loop.first %} active{% endif %}" id="nav-{{ stat.name|slugify }}-tab" data-bs-toggle="tab" data-bs-target="#nav-{{ stat.name|slugify }}" role="tab" aria-controls="nav-{{ stat.name|slugify }}" aria-selected="true">{{ stat.name|trans|parse_icons }}</button>
        {% endfor %}
    </div>
    </nav>
    <div class="tab-content" id="nav-tabContent">
        {% for stat in stats %}
        <div class="tab-pane fade {% if loop.first %}show active{% endif %}" id="nav-{{ stat.name|slugify }}" role="tabpanel" aria-labelledby="nav-{{ stat.name|slugify }}-tab" name="{{ stat.name|slugify }}">
            <tigris-chart route="{{ stat.route }}" :load-at-start="{% if loop.first %}true{% else %}false{% endif %}" :init-filters="{'dateEnd':'{{ 'now'|date }}', dateStart:'{{ 'first day of 12 months ago'|date }}'}" type="bar" name="{{ stat.name|slugify }}" class="chart" v-slot="{filters}" init-theme="{{ app.request.cookies.get('theme', 'light') }}">
                {% embed '@TigrisBase/decorators/_card.html.twig' %}

                    {% block body %}
                        
                        <form method="GET" class="d-flex justify-content-start">
                            <div class="form-group ms-2">
                                <label class="form-label"><small>{{ 'date.start'|trans }}</small></label>
                                <div class="input-group">
                                    <span class="input-group-text">{{ '.icon-calendar'|parse_icons }}</span>
                                    <v-date-picker v-model="filters.dateStart" mode="date">
                                        <template v-slot="{ inputValue, inputEvents }" class="form-control">
                                            <input
                                            class="form-control data-picker-control"
                                            :value="inputValue"
                                            v-on="inputEvents"
                                            />
                                        </template>
                                    </v-date-picker>
                                </div>
                            </div>
                            <div class="form-group ms-2">
                                <label class="form-label"><small>{{ 'date.end'|trans }}</small></label>
                                <div class="input-group">
                                    <span class="input-group-text">{{ '.icon-calendar'|parse_icons }}</span>
                                    <v-date-picker v-model="filters.dateEnd" mode="date">
                                        <template v-slot="{ inputValue, inputEvents }">
                                            <input
                                            class="form-control data-picker-control"
                                            :value="inputValue"
                                            v-on="inputEvents"
                                            />
                                        </template>
                                    </v-date-picker>
                                    
                                </div>
                            </div>
                        </form>
                        <canvas ref="canvas"></canvas>
                    {% endblock %}

                {% endembed %}
            </tigris-chart>
        </div>
        {% endfor %}
    </div>
</div>

{% endblock %}