{% extends "allianceauth/base-bs5.html" %}

{% load i18n %}

{% block page_title %}
    {% translate "Fleet activity tracking" as page_title %}
    {{ page_title|title }}
{% endblock %}

{% block header_nav_brand %}
    {% translate "Fleet activity tracking" as page_title %}
    {{ page_title|title }}
{% endblock %}

{% block header_nav_collapse_left %}
    {% include "afat/partials/common/navigation/top-menu.html" %}
{% endblock %}

{% block content %}
    <div class="allianceauth-afat">
        <div class="allianceauth-afat-header">
            {% block afat_header %}{% endblock %}
        </div>

        <div class="allianceauth-afat-body">
            {% translate "." context "Decimal separator" as decimalSeparator %}
            {% translate "," context "Thousands separator" as thousandsSeparator %}
            {% translate "No data available in this table" as emptyTable %}
            {% translate "Showing _END_ entries" as info context "Keep _END_ as it is. It will be replaced by a number." %}
            {% translate "(filtered from _MAX_ total entries)" as infoFiltered context "Keep _MAX_ as it is. It will be replaced by a number." %}
            {% translate "No records available" as infoEmpty %}
            {% translate "Loading …" as loadingRecords %}
            {% translate "Processing …" as processing %}
            {% translate "Nothing found, sorry …" as zeroRecords%}
            {% translate "Search …" as searchPaceholder %}
            {% translate "First" as paginateFirst %}
            {% translate "Last" as paginateLast %}
            {% translate "Next" as paginateNext %}
            {% translate "Previous" as paginatePrevious %}
            {% translate ": activate to sort column ascending" as ariaSortAscending %}
            {% translate ": activate to sort column descending" as ariaSortDescending %}

            <script>
                const afatJsSettingsDefaults = {
                    datetimeFormat: 'YYYY-MMM-DD, HH:mm',
                    language: '{{ LANGUAGE_CODE }}',
                    dataTables: {
                        paging: true,
                        translation: {
                            decimal: '{{ decimalSeparator|escapejs }}',
                            thousands: '{{ thousandsSeparator|escapejs }}',
                            emptyTable: '{{ emptyTable|escapejs }}',
                            info: '{{ info|escapejs }}',
                            infoFiltered: '{{ infoFiltered|escapejs }}',
                            infoEmpty: '{{ infoEmpty|escapejs }}',
                            infoPostFix: '',
                            lengthMenu: '_MENU_',
                            loadingRecords: '{{ loadingRecords|escapejs }}',
                            processing: '{{ processing|escapejs }}',
                            zeroRecords: '{{ zeroRecords|escapejs }}',
                            search: '_INPUT_',
                            searchPlaceholder: '{{ searchPaceholder|escapejs }}',
                            paginate: {
                                first: '{{ paginateFirst|escapejs }}',
                                last: '{{ paginateLast|escapejs }}',
                                next: '{{ paginateNext|escapejs }}',
                                previous: '{{ paginatePrevious|escapejs }}'
                            },
                            aria: {
                                sortAscending: '{{ ariaSortAscending|escapejs }}',
                                sortDescending: '{{ ariaSortDescending|escapejs }}'
                            }
                        }
                    },
                };
            </script>

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

        <div class="allianceauth-afat-footer mt-3 pt-3 border-top border-light">
            {% include "afat/partials/footer/app-translation-footer.html" %}
        </div>

        <div class="allianceauth-afat-datalists">
            {% block afat_datalists %}{% endblock %}
        </div>
    </div>
{% endblock %}

{% block extra_script %}
    (() => {
        const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
        const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));
    })();
{% endblock extra_script %}