{% extends 'ledger/base.html' %}
{% load i18n %}
{% load humanize %}
{% load static %}
{% load ledger %}

{% block page_title %}Planetary Details{% endblock %}
{% block page_topic %}<h1 class="page-header text-center">{% translate "Planetary Details" %}</h1>{% endblock page_topic %}

{% block vow_block %}
<div class="card-body bg-primary rounded-top d-flex">
    <h3>{% translate "Planetary Details" %} </h3>
    <div class="ms-auto">
        <a class="nav-link py-0" href="{% url 'ledger:planetary_admin' %}">
            <span class="btn btn-secondary">{% translate 'Planetary Overview' %}</span>
        </a>
    </div>
</div>
<div class="card-body bg-secondary tab-content rounded-bottom">
    <div class="d-flex justify-content-between align-items-center">
        <span>
            <i class="fa-solid fa-bullhorn"></i> {% trans "Notification" %} <span class="text-success">{% trans "ON" %}</span>/<span class="text-danger">{% trans "OFF" %}</span>
        </span>
        <span id="next-update" class="text-end"></span>
    </div>

    <br><br>

    <div class="tab-content">
        {% include 'ledger/planetary/partials/table.html' %}
    </div>
</div>

{% endblock %}

{% block extra_javascript %}
{% include 'ledger/bundles/table-css.html' %}
{% ledger_static 'css/planetary.css' %}

{% include 'ledger/modals/modal_dialog.html' with name="ViewFactory" %}
{% include 'ledger/modals/modal_dialog.html' with name="ViewExtractor" %}

<script type="application/javascript">
    function setupModal(modalId, ajaxDataAttr, contentId, loaderId) {
        $(modalId).on('show.bs.modal', function (event) {
            const button = $(event.relatedTarget);
            const ajaxUrl = button.data(ajaxDataAttr);
            const modal = $(this);

            // reactive loader
            modal.find(contentId).hide();
            modal.find(loaderId).show();

            modal.find(contentId).load(
                ajaxUrl,
                function(response, status, xhr) {
                    modal.find(loaderId).hide();
                    modal.find(contentId).show();

                    if (xhr.status === 403) {
                        modal.find(contentId).html(response);
                    }
                    // Extract and set the modal title
                    const title = modal.find(contentId).find("#modal-title").html();
                    modal.find(".modal-title").html(title);
                    modal.find(contentId).find("#modal-title").hide();
                }
            );
        });
    }

    setupModal('#modalViewFactoryContainer', 'ajax_factory', '#modalViewFactoryContent', '#modalViewFactoryLoader');
    setupModal('#modalViewExtractorContainer', 'ajax_extractor', '#modalViewExtractorContent', '#modalViewExtractorLoader');
</script>

<script type="application/javascript">
    // Extract the 'main' parameter from the current URL
    const urlParams = new URLSearchParams(window.location.search);
    const mainParam = urlParams.get('main');

    // Construct the planetaryUrl with the 'main' parameter
    let planetaryUrl = '/ledger/api/character/{{ character_pk }}/planetary/0/details/';
    if (mainParam) {
        planetaryUrl += '?main=' + mainParam;
    }

	let planetarySettings = {
        planetaryUrl: planetaryUrl,
		switchAlarmUrl: '{% url "ledger:switch_alarm" character_id=1337 planet_id=1337 %}',
		csrfToken: '{% csrf_token %}',
		switchAlarmText: '{% translate "Are you sure to Switch Notification" %}',
        switchAlarm: '{% translate "Switch Notification" %}',
        switchAlarmAll: '{% translate "Switch All Notifications" %}',
        alarmActivated: '{% translate "Notification Activated" %}',
        alarmDeactivated: '{% translate "Notification Deactivated" %}',
        characterPk: '{{ character_pk }}',
        updateInterval: '{{ update_interval }}',
	};
</script>
{% include 'ledger/planetary/partials/planetary-js.html' %}
{% include 'bundles/datatables-js-bs5.html' %}
{% endblock %}
{% block extra_css %}
{% endblock %}

{% block extra_script %}
{% endblock %}
