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

{% set breadcrumb = buildBreadcrumb([{'route': 'app_statistics_index', 'trans': 'menu.statistics'}]) %}

{% block title %}
    {{ renderTitle(breadcrumb)  }}
{% endblock %}

{% block breadcrumb %}
    {{ renderBreadcrumb(breadcrumb)  }}
{% endblock %}

{% block meta %}
    {% if context == 'user'  %}
        {{ include('App/_partials/_meta.html.twig', {
            'title': renderTitle(breadcrumb),
            'description': 'menu.collections_user'|trans({'%username%':  app.request.get('username')})
        }) }}
    {% else %}
        {{ parent() }}
    {% endif %}
{% endblock %}

{% block content %}
    <div class="title-block">
        <h1>{{ 'menu.statistics'|trans }}</h1>
        <ul class="nav nav-pills">
            <li>{{ 'counter.collection'|trans({'%count%': counters.collections}) }}</li>
            <li>{{ 'counter.item'|trans({'%count%': counters.items}) }}</li>
            <li>{{ 'counter.tag'|trans({'%count%': counters.tags}) }}</li>
            <li>{{ 'counter.sign'|trans({'%count%': counters.signs}) }}</li>
        </ul>
    </div>

    <div></div>

    <div class="btn-holder">
        {% if context == 'default' %}
            <i data-target="modal-share" class="button btn-share modal-trigger fa fa-share fa-fw" title="{{ 'tooltip.share'|trans }}"></i>
        {% endif %}
    </div>

    <div class="statistics-holder"
         data-theme-main-hue="{{ app.user.isInDarkMode ? '#00ce99' : '#009688' }}"
         data-theme-dark-hue="{{ app.user.isInDarkMode ? '#007C5C' : '#006355' }}"
         data-theme-light-hue="{{ app.user.isInDarkMode ? '#4DDDB8' : '#1ab0a2' }}"
         data-theme-lightest-hue="{{ app.user.isInDarkMode ? '#b3f0e0' : '#80cbc4' }}"
         data-is-dark-mode="{{ app.user.isInDarkMode }}"
    >
        <div class="content-block calendars">
            <div class="block-element">
                <h2 class="statistics-title">{{ 'title.activity'|trans }}</h2>
                <div class="tabs-block">
                    <ul class="nav nav-pills">
                        {% for year, value in calendarData %}
                            <li class="tab {{ loop.first ? 'current' }}" for="calendar_{{ year }}">
                                <span>{{ year }}</span>
                            </li>
                        {% endfor %}
                    </ul>
                </div>
                <div id="calendars" data-json='{{ calendarData|json_encode() }}'></div>
                {% for year, value in calendarData %}
                    <div class="panel calendar {{ false == loop.first ? 'hidden' }}" id="calendar_{{ year }}" style="width: 1500px; height:200px;"></div>
                {% endfor %}
            </div>
        </div>

        <div class="clearfix"></div>
        <div class="content-block bar-charts">
            <div class="block-element bar-chart-row">
                <div class="left-chart bar-chart">
                    <h2 class="statistics-title">{{ 'title.charts.month_days'|trans }}</h2>
                    <div id="month-days-chart" class="chart" style="width: 650px; height:400px;" data-json='{{ monthDaysChartData|json_encode() }}'></div>
                </div>
                <div class="right-chart bar-chart">
                    <h2 class="statistics-title">{{ 'title.charts.hours'|trans }}</h2>
                    <div id="hours-chart" class="chart" style="width: 650px; height:400px;" data-json='{{ hoursChartData|json_encode() }}'></div>
                </div>
            </div>
            <div class="block-element bar-chart-row last">
                <div class="left-chart bar-chart">
                    <h2 class="statistics-title">{{ 'title.charts.months'|trans }}</h2>
                    <div id="months-chart" class="chart" style="width: 650px; height:400px;" data-json='{{ monthsChartData|json_encode() }}'></div>
                </div>
                <div class="right-chart bar-chart">
                    <h2 class="statistics-title">{{ 'title.charts.week_days'|trans }}</h2>
                    <div id="week-days-chart" class="chart" style="width: 650px; height:400px;" data-json='{{ weekDaysChartData|json_encode() }}'></div>
                </div>
            </div>
            <div class="block-element bar-chart-row last">
                <h2 class="statistics-title">{{ 'title.charts.items_evolution'|trans }}</h2>
                <div id="items-evolution-chart" class="chart" style="width: 1530px; height:400px;" data-json='{{ itemsEvolutionData|json_encode() }}'></div>
            </div>
        </div>

        <div class="content-block bar-charts">
            <div class="block-element bar-chart-row">
                <h2 class="statistics-title">{{ 'title.charts.radial_tree'|trans }}</h2>
                <div id="radial-tree" style="width: 1200px; height: 1200px;" data-json='{{ treeJson }}'></div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('build/js/statistics.js') }}" nonce="{{ csp_nonce() }}"></script>
{% endblock %}

{% block modals %}
    {% if context == 'default' %}
        {{ include('App/_partials/_modal/_share.html.twig', {'route': url('app_user_statistics_index', {username: app.user.username})}) }}
    {% endif %}
{% endblock %}