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

{% load static %}
{% load i18n %}

{% block page_title %}{% translate 'Fleet Activity' %}{% endblock %}

{% block afat_header %}
    <br>
    {% include "afat/partials/menu.html" %}
    {% include "afat/partials/fleet_edit/message.html" %}

    <h2>{% translate "FAT Link Details" %}</h2>
{% endblock %}

{% block afat_body %}
    {% if perms.afat.manage_afat %}
        {% include "afat/partials/fleet_edit/fatlink_name_form.html" %}
    {% endif %}

    <p>&nbsp;</p>

    {% include "afat/partials/fleet_edit/tabs_navigation.html" %}

    <div class="tab-content">
        {% include "afat/partials/fleet_edit/tabs/fats.html" %}
        {% include "afat/partials/fleet_edit/tabs/manualfat.html" %}
{#        {% include "afat/partials/fleet_edit/tabs/flatlist.html" %}#}
    </div>

    {% include "afat/modals/delete-fat.html" %}
{% endblock %}

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

    <link rel="stylesheet" type="text/css" href="{% static 'afat/css/aa-bootstrap-fix.min.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'afat/css/allianceauth-afat.min.css' %}">
{% endblock %}

{% block extra_javascript %}
    {% include 'bundles/datatables-js.html' %}
    {% include 'bundles/clipboard-js.html' %}

    <script type="application/javascript">
        $(document).ready(function(){
            let fatListTable = $('#fleet-edit-fat-list').DataTable({
                ajax: {
                    url: '{% url "afat:link_edit_fat_data" 0 %}'.replace(
                        '0',
                        '{{ link.hash }}'
                    ),
                    dataSrc: '',
                    cache: false
                },
                columns: [
                    {data: 'character_name'},
                    {data: 'system'},
                    {data: 'ship_type'},
                    {% if perms.afat.manage_afat %}
                        {data: 'actions'},
                    {% endif %}
                ],
                columnDefs: [
                    {% if perms.afat.manage_afat %}
                        {
                            targets: [3],
                            orderable: false,
                            createdCell: function (td) {
                                $(td).addClass('text-right');
                            }
                        }
                    {% endif %}
                ],
                order: [
                    [0, 'asc']
                ],
            });

            /**
             * refresh the datatable information every 15 seconds
             */
            let intervalReloadDatatable = 15000; // ms
            let expectedReloadDatatable = Date.now() + intervalReloadDatatable;

            /**
             * reload datatable "linkListTable"
             */
            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
                    );
                }

                fatListTable.ajax.reload();

                expectedReloadDatatable += intervalReloadDatatable;

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

            setTimeout(
                realoadDataTable,
                intervalReloadDatatable
            );

            let clipboard = new ClipboardJS('.copy-btn');

            clipboard.on('success', function() {
                $('.copy-btn').tooltip('show');
            });

            $('#deleteModal').on('show.bs.modal', function(event) {
                let button = $(event.relatedTarget) // Button that triggered the modal
                let url = button.data('url') // Extract info from data-* attributes
                let name = button.data('name');
                let modal = $(this)

                modal.find('#fat-link').attr('href', url)
                modal.find('.modal-body').text('{% translate "Are you sure you want to delete" %} ' + name + '?');
            });
        });
    </script>
{% endblock %}
