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

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

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

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

    <h2>{% translate "All FAT Links" %}</h2>
{% endblock %}

{% block afat_body %}
    <h4>
        <a class="btn btn-primary btn-sm" href="{% url 'afat:links' year_prev %}" title='{% translate "Previous Month" %}'><i class="fas fa-backward"></i></a>

        <span class="afat-label-statistics">{{ year }}</span>

        {% if year_next <= year_current %}
            <a class="btn btn-primary btn-sm" href="{% url 'afat:links' year_next %}" title='{% translate "Next Month" %}'><i class="fas fa-forward"></i></a>
            <a class="btn btn-primary btn-sm" href="{% url 'afat:links' year_current %}" title='{% translate "Current Month" %}'><i class="fas fa-fast-forward"></i></a>
        {% endif %}
    </h4>

    {% if msg %}
        <div class="alert alert-{{ msg.0 }} alert-dismissible" role="alert">
            <button type="button" class="close" data-dismiss="alert" aria-label="close">
                <span aria-hidden="true">&times</span>
            </button>

            <h4>
                {% if msg.0 == 'danger' %}
                    {% translate "Oh No!" %}
                {% elif msg.0 == 'success' %}
                    {% translate "Success!" %}
                {% endif %}
            </h4>

            <p>{{ msg.1 }}</p>
        </div>
    {% endif %}

    <div class="panel panel-default">
        <div class="panel-body">
            <table class="table table-striped table-hover" id="link-list" style="width: 100%;">
                <thead>
                    <tr>
                        <th>{% translate "Fleet Name" %}</th>
                        <th>{% translate "Fleet Type" %}</th>
                        <th>{% translate "Creator" %}</th>
                        <th>{% translate "EVE Time" %}</th>
                        <th>{% translate "# of FATs" %}</th>

                        {% if perms.afat.manage_afat or perms.afat.add_fatlink %}
                            <th><!-- {% translate "Actions" %} --></th>
                        {% endif %}
                    </tr>
                </thead>

                <tbody></tbody>

                <tfoot>
                    <tr>
                        <td colspan="{% if perms.afat.manage_afat %}6{% else %}5{% endif %}">
                            {% include "afat/partials/fatlink_list_legend.html" %}
                        </td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>

    {% include "afat/modals/delete-fat-link.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/moment-js.html' with locale=True %}

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

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

            let esi_column = 5;

            {% if perms.afat.manage_afat or perms.afat.add_fatlink %}
                esi_column = 6;
            {% endif %}

            let linkListTable = $('#link-list').DataTable({
                ajax: {
                    url: "{% url 'afat:links_data' year %}",
                    dataSrc: '',
                    cache: false
                },
                columns: [
                    {data: 'fleet_name'},
                    {data: 'fleet_type'},
                    {data: 'creator_name'},
                    {
                        data: 'fleet_time',
                        render: {
                            display: function (data, type, row) {
                                return moment(data.time).utc().format(DATETIME_FORMAT);
                            },
                            _: 'timestamp'
                        },
                    },
                    {data: 'fats_number'},

                    {% if perms.afat.manage_afat or perms.afat.add_fatlink %}
                        {data: 'actions'},
                    {% endif %}

                    // hidden column
                    {data: 'via_esi'},
                ],

                columnDefs: [
                    {% if perms.afat.manage_afat or perms.afat.add_fatlink %}
                        {
                            targets: [5],
                            orderable: false,
                            createdCell: function (td) {
                                $(td).addClass('text-right');
                            }
                        },
                    {% endif %}
                    {
                        visible: false,
                        targets: [esi_column]
                    }
                ],

                order: [
                    [3, 'desc']
                ],

                filterDropDown: {
                    columns: [
                        {
                            idx: 1,
                        },
                        {
                            idx: esi_column,
                            title: "{% translate 'via ESI' %}"
                        },
                    ],
                    autoSize: false,
                    bootstrap: true
                },
            });

            /**
             * refresh the datatable information every 60 seconds
             */
            let intervalReloadDatatable = 60000; // 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
                    );
                }

                linkListTable.ajax.reload();

                expectedReloadDatatable += intervalReloadDatatable;

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

            setTimeout(
                realoadDataTable,
                intervalReloadDatatable
            );
        });

        $('#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 %}
