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

{% block page_title %}
    {{ title }} ⋗ {% translate "Ledger" %}
{% endblock %}

{% block page_topic %}
    <h1 class="page-header text-center">
        {{ title }}
    </h1>
{% endblock page_topic %}

{% block header_nav_collapse_left %}

{% include 'ledger/partials/menu/char/navigation.html' %}

{% endblock header_nav_collapse_left %}

{% block header_nav_collapse_right %}

{% include 'ledger/partials/menu/char/administration.html' %}

{% endblock header_nav_collapse_right %}
{% block ledger_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_overview' %}">
            <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>

    <div class="tab-content">
        {% include 'ledger/partials/table/planetary.html' %}
        <button id="turn-all-notification" type="button" class="btn btn-primary btn-sm btn-square me-2 d-none"
            data-bs-toggle="modal"
            data-tooltip-toggle="planetary"
            data-character-id="0"
            data-planet-id="0"
            data-title="{% translate 'Toggle Alarm' %}"
            data-text="{% translate 'Are you sure to Turn On/Off all Notifications?' %}"
            data-bs-target="#ledger-planetary-confirm"
            data-action="{% url 'ledger:switch_alarm' %}" aria-label="Toggle Alarm"
            >
            <span class="fas fa-bullhorn"></span> {% translate 'Turn All On/Off' %}
        </button>
    </div>
</div>

{% endblock %}

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

{% include 'ledger/partials/modal/modal.html' with name="ViewFactory" %}
{% include 'ledger/partials/modal/modal.html' with name="ViewExtractor" %}

{% include 'ledger/partials/modal/switchalarm_confirm.html' %}
{% ledger_static 'js/modal/modal-system.js' %}

<script type="application/javascript">
    setupModal('#modalViewFactoryContainer', 'ajax_factory', '#modalViewFactoryContent', '#modalViewFactoryLoader');
    setupModal('#modalViewExtractorContainer', 'ajax_extractor', '#modalViewExtractorContent', '#modalViewExtractorLoader');
</script>

{% include 'ledger/bundles/planetary-js.html' %}
{% include 'bundles/datatables-js-bs5.html' %}
{% endblock %}
{% block extra_css %}
{% endblock %}

{% block extra_script %}
{% endblock %}
