{% extends "afat/base.html" %}

{% load i18n %}

{% block page_title %}
    {% translate "Fleet Activity Tracking statistics" as page_title %}
    {{ character.character_name }} {{ page_title|title }}
{% endblock %}

{% block afat_header %}
    {% translate "Statistics" as site_title %}
    {% include "framework/header/page-header.html" with title=site_title sub_title=character.name %}
{% endblock %}

{% block afat_body %}
    {% if month == 1 %}
        {% url "afat:statistics_character" character.character_id year_prev 12 as url_previous_month %}
    {% else %}
        {% url "afat:statistics_character" character.character_id year month_prev as url_previous_month %}
    {% endif %}

    {% if month == 12 %}
        {% url "afat:statistics_character" character.character_id year_next 1 as url_next_month %}
        {% url "afat:statistics_character" character.character_id year_current month_current as url_current_month %}
    {% else %}
        {% url "afat:statistics_character" character.character_id year month_next as url_next_month %}
        {% url "afat:statistics_character" character.character_id year_current month_current as url_current_month %}
    {% endif %}

    {% include "afat/partials/common/navigation/month-navigation.html" with url_previous_month=url_previous_month url_next_month=url_next_month url_current_month=url_current_month %}
    {% include "afat/partials/statistics/character/tabs-navigation.html" %}

    <div class="tab-content">
        {% include "afat/partials/statistics/character/tabs/graphs.html" %}
        {% include "afat/partials/statistics/character/tabs/raw_data.html" %}
    </div>
{% endblock %}

{% block extra_css %}
    {% include "bundles/datatables-css-bs5.html" %}
    {% include "afat/bundles/afat-css.html" %}
{% endblock %}

{% block extra_javascript %}
    {% include "bundles/chart-js.html" %}
    {% include "afat/bundles/afat-js.html" %}
    {% include "afat/bundles/afat-statistics-js.html" %}
    {% include "bundles/datatables-js-bs5.html" %}
    {% include "bundles/moment-js.html" %}

    <script>
        $(document).ready(() => {
            $('#raw-data').DataTable({
                language: afatSettings.dataTable.language,
                "order": [
                    [4, "desc"]
                ]
            });

            // Chart rendering
            if (chartInfo.length > 0) {
                chartInfo.forEach((chart) => {
                    drawChart(chart.element, chart.type, chart.data, chart.options);
                });
            }
        });
    </script>
{% endblock %}
