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

{% load aa_i18n %}
{% load i18n %}

{% block aa_fleetfinder_body %}
    <div class="card card-default border-0">
        <div class="card-header card-default">
            <div class="card-title mb-0">
                {% translate "Fleets available to you" %}
            </div>
        </div>

        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-striped table-hover table-vertical-middle" id="table_available-fleets" style="width: 100%;">
                    <thead>
                        <tr>
                            <th>{% translate "Fleet commander" %}</th>
                            <th>{% translate "Fleet name" %}</th>
                            <th>{% translate "Created at" %}</th>
                            <th>{% translate "Join" %}</th>

                            {% if perms.fleetfinder.manage_fleets %}
                                <th>{% translate "Details" %}</th>
                                <th>{% translate "Edit" %}</th>
                            {% endif %}
                        </tr>
                    </thead>

                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
{% endblock %}

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

{% block extra_javascript %}
    {% include "bundles/datatables-js-bs5.html" %}
    {% include "bundles/moment-js.html" with locale=True %}

    {% get_datatables_language_static LANGUAGE_CODE as DT_LANG_PATH %}

    <script>
        $(document).ready(() => {
            const DATETIME_FORMAT = 'YYYY-MM-DD, HH:mm';
            const table_fleet_overview = $('#table_available-fleets');

            const fleetfinderFleetsTable = table_fleet_overview.DataTable({
                language: {
                    url: '{{ DT_LANG_PATH }}'
                },
                ajax: {
                    url: "{% url 'fleetfinder:ajax_dashboard' %}",
                    dataSrc: '',
                    cache: false
                },
                columns: [
                    {
                        data: 'fleet_commander',
                        render: {
                            _: 'html',
                            sort: 'sort'
                        }
                    },
                    {data: 'fleet_name'},
                    {
                        data: 'created_at',
                    },
                    {data: 'join'},
                    {% if perms.fleetfinder.manage_fleets %}
                        {data: 'details'},
                        {data: 'edit'},
                    {% endif %}
                ],
                columnDefs: [
                    {
                        targets: 2,
                        render: DataTable.render.date(DATETIME_FORMAT)
                    },
                    {
                        orderable: false,
                        targets: [3]
                    },
                    {% if perms.fleetfinder.manage_fleets %}
                        {
                            orderable: false,
                            targets: [4, 5]
                        },
                    {% endif %}
                ],
                order: [[0, 'asc']],
                paging: false
            });

            /**
             * Refresh the datatable information every 30 seconds
             */
            const intervalReloadDatatable = 30000; // ms
            let expectedReloadDatatable = Date.now() + intervalReloadDatatable;

            /**
             * reload datatable "fleetfinderFleetsTable"
             */
            const reloadDataTable = () => {
                let dt = Date.now() - expectedReloadDatatable; // The drift (positive for overshooting)

                if (dt > intervalReloadDatatable) {
                    // Something awful happened. Maybe the browser (tab) was inactive?
                    // Possibly special handling to avoid futile "catch up" run
                    console.log('Something went wrong, reloading page ...');

                    window.location.replace(
                        window.location.pathname + window.location.search + window.location.hash
                    );
                }

                fleetfinderFleetsTable.ajax.reload();

                expectedReloadDatatable += intervalReloadDatatable;

                // Take drift into account
                setTimeout(
                    reloadDataTable,
                    Math.max(0, intervalReloadDatatable - dt)
                );
            };

            setTimeout(
                reloadDataTable,
                intervalReloadDatatable
            );
        });
    </script>
{% endblock %}
