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

{% load i18n %}
{% load humanize %}
{% load evelinks %}
{% load static %}

{% block fleetfinder_block %}
    {% if error %}
        <div class="alert alert-danger" role="alert">{{ error }}</div>
    {% endif %}

    <div class="panel panel-default">
        <div class="panel-heading">
            <div class="panel-title">
                {% translate "Available Fleets" %}
            </div>
        </div>

        <div class="panel-body">
            <table class="table table-striped table-hover table-vertical-middle" id="table_available-fleets">
                <thead>
                    <th>{% translate "Fleet Commander" %}</th>
                    <th>{% translate "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 %}
                </thead>

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

{% block extra_css %}
    {% include 'bundles/datatables-css.html' %}

    <link rel="stylesheet" href="{% static 'fleetfinder/css/fleetfinder.css' %}" type="text/css">
{% endblock %}

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

    <script type="application/javascript" src="{% static 'fleetfinder/libs/datatables/plugins/datetime/datetime.min.js' %}"></script>

    <script type="application/javascript">
        $(document).ready(function() {
            const DATETIME_FORMAT = 'YYYY-MM-DD, HH:mm';

            let fleetfinderFleetsTable = $('#table_available-fleets').DataTable({
                ajax: {
                    url: "{% url 'fleetfinder:ajax_dashboard' %}",
                    dataSrc: '',
                    cache: false
                },
                columns: [
                    {
                        data: 'fleet_commander',
                        render: {
                            _: 'html',
                            sort: 'sort',
                        }
                    },
                    {data: 'fleet_name'},
                    {
                        data: 'created_at',
                        render: $.fn.dataTable.render.moment(
                            moment.ISO_8601,
                            DATETIME_FORMAT
                        )
                    },
                    {data: 'join'},
                    {% if perms.fleetfinder.manage_fleets %}
                        {data: 'details'},
                        {data: 'edit'},
                    {% endif %}
                ],
                columnDefs: [
                    {
                        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
             */
            let intervalReloadDatatable = 30000; // ms
            let expectedReloadDatatable = Date.now() + intervalReloadDatatable;

            /**
             * reload datatable "fleetfinderFleetsTable"
             */
            let realoadDataTable = function() {
                let dt = Date.now() - expectedReloadDatatable; // the drift (positive for overshooting)

                if (dt > intervalReloadDatatable) {
                    // something really bad 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(
                    realoadDataTable,
                    Math.max(0, intervalReloadDatatable - dt)
                );
            };


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