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

{% load i18n %}

{% block page_title %}
    {% translate "Fleet Activity Tracking" as page_title %}
    {{ page_title|title }}
{% endblock %}

{% block afat_header %}
    {% translate "FAT link details" as site_title %}
    {% include "framework/header/page-header.html" with title=site_title %}
{% endblock %}

{% block afat_body %}
    {% if perms.afat.manage_afat %}
        {% include "afat/partials/fatlinks/details/fatlink-name-form.html" %}
    {% endif %}

    {% include "afat/partials/fatlinks/details/fatlink-info.html" %}
    {% include "afat/partials/fatlinks/details/tabs-navigation.html" %}

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

    {% translate "Delete FAT" as translated_title %}
    {% include "afat/modals/general.html" with modal_name='deleteFat' modal_title=translated_title confirm_button_class='btn-danger' %}
{% endblock %}

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

{% block extra_javascript %}
    <script>
        const afatJsSettingsOverride = {
            url: '{% url "afat:fatlinks_ajax_get_fats_by_fatlink" 0 %}'.replace(
                    '0',
                    '{{ link.hash }}'
                ),
            modal: {
                deleteFatModal: {
                    element: '#deleteFatModal',
                },
                reopenFatLinkModal: {
                    element: '#reopenFatLinkModal',
                },
                cancelEsiFleetModal: {
                    element: '#cancelEsiFleetModal',
                }
            },
            reloadDatatable: {{ link_ongoing|yesno:"true,false" }}
        };
    </script>

    {% include "afat/bundles/afat-js.html" %}
    {% include "bundles/datatables-js-bs5.html" %}
    {% include "bundles/clipboard-js.html" %}
    {% include "afat/bundles/afat-fatlink-details-js.html" %}
{% endblock %}
