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

{% load aa_i18n i18n %}

{% block page_title %}
    {% translate "Ship Replacement" %}
{% endblock page_title %}

{% block header_nav_brand %}
    {% translate "Ship Replacement" %}
{% endblock header_nav_brand %}

{% block header_nav_collapse_left %}
    {% include "aasrp/partials/navigation/top-navigation.html" %}
{% endblock header_nav_collapse_left %}

{% block header_nav_collapse_right %}
    {% include "aasrp/partials/navigation/actions-navigation.html" %}
{% endblock header_nav_collapse_right %}

{% block content %}
    <div class="aa-srp">
        <div class="aa-srp-header">
            {% block aasrp_header %}{% endblock %}
        </div>

        <div class="aa-srp-body">
            {% get_datatables_language_static LANGUAGE_CODE as DT_LANG_PATH %}

            <script>
                const aaSrpJsSettingsDefaults = {
                    datetimeFormat: 'LL<br>LT',
                    locale: '{{ LANGUAGE_CODE }}',
                    dataTables: {
                        paging: true,
                        processing: true, // Show processing indicator when loading data from the server
                        language: {url: '{{ DT_LANG_PATH }}'},
                        layout: { // see https://datatables.net/reference/option/layout
                            topStart: 'pageLength',
                            topEnd: 'search',
                            bottomStart: 'info',
                            bottomEnd: 'paging'
                        },
                        ordering: { // https://datatables.net/reference/option/ordering
                            handler: true, // Enable ordering by clicking on column headers
                            indicators: false, // Disable ordering indicators on column headers so ColumnControl can manage them
                        },
                        columnControl: [
                            {
                                target: 0,
                                content: [
                                    'order',
                                    // [
                                    //     'orderAsc',
                                    //     'orderDesc',
                                    //     'spacer',
                                    //     'orderAddAsc',
                                    //     'orderAddDesc',
                                    //     'spacer',
                                    //     'orderRemove'
                                    // ]
                                ]
                            },
                            {
                                target: 1,
                                content: [
                                    'search'
                                ]
                            }
                        ]
                    }
                };
            </script>

            {% block aasrp_body %}{% endblock %}

            <script>
                $(document).ready(() => {
                    'use strict';

                    _bootstrapTooltip({selector: '.aa-srp'});
                });
            </script>
        </div>

        <div class="aa-srp-footer mt-3 pt-3 border-top border-light">
            {% include "aasrp/partials/footer/app-translation-footer.html" %}
        </div>
    </div>
{% endblock content %}