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

{% block content %}
    <div id="loader_all">
        loader
    </div>

    <div class="table-responsive">
        <table class="table table-striped table-metenox w-100" id="table_all">
            <thead>
                <th class="w-auto">{% translate "Metenox name" %}</th>
                <th class="w-auto">{% translate "Moon" %}</th>
                <th class="w-auto">{% translate "Owner corporation" %}</th>
                <th class="w-auto">{% translate "System" %}</th>
                <th class="w-auto">{% translate "Constellation" %} <br> {% translate "Region" %}</th>
                <th class="w-auto">{% translate "Remaining fuel blocks" %}</th>
                <th class="w-auto">{% translate "Remaining magmatic" %}</th>
                <th class="w-auto">{% translate "Est. Value" %}<br>{% translate 'Est. Profit' %}</th>
                <th class="w-auto"></th>
            </thead>
        </table>
    </div>

    {% include "metenox/partials/footer.html" %}

    {% include "metenox/modals/base.html" with modal_id="modalMetenoxDetails" modal_content_id="modalMetenoxDetailsContent" %}

{% endblock %}

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

    <script type="text/javascript">
        "use strict";
        $(function(){

            let dropDownColumns = [
                {
                    idx: 12,
                    title: "Region",
                    maxWidth: "10em",
                },
                {
                    idx: 11,
                    title: "Constellation",
                    maxWidth: "10em",
                },
                {
                    idx: 9,
                    title: "System",
                    maxWidth: "10em",
                },
                {
                    idx: 10,
                    title: "Rarity",
                    maxWidth: "10em",
                },
                {
                    idx: 2,
                    title: "Corporation",
                    maxWidth: "10em",
                },
                {
                    idx: 13,
                    title: "Tags",
                    maxWidth: "10em",
                }
            ]

            const def = {
                ajax: {
                    url: '',
                    dataSrc: 'data',
                    cache: true,
                },
                columns: [
                    { data: 'metenox_name' },
                    { data: 'moon_name' },
                    { data: 'corporation_name' },
                    { data: 'solar_system_link' },
                    { data: 'location_html' },
                    {
                        data: 'fuel_blocks_count',
                        render: $.fn.dataTable.render.formatFuelBlocks()
                    },
                    {
                        data: 'magmatic_gas_count',
                        render: $.fn.dataTable.render.formatMagmatic()
                    },
                    { data: 'value' },
                    { data: 'details' },
                    /* Hidden columns */
                    { data: 'solar_system_name' },
                    { data: 'rarity_class_str' },
                    { data: 'constellation_name' },
                    { data: 'region_name' },
                    { data: 'tags' },
                ],
                searching: true,
                processing: true,
                serverSide: true,
                lengthMenu: DEFAULT_LENGTH_MENU,
                pageLength: DEFAULT_PAGE_LENGTH,
                order: [ [0, "asc"] ],
                columnDefs: [
                    { "visible": false, "targets": [ 9, 10, 11, 12, 13 ] },
                    { "orderable": false, "targets": [ 1, 2, 3, 4, 8 ] },
                ],
                filterDropDown: {
                    columns: dropDownColumns,
                    bootstrap: true,
                    bootstrap_version: 5
                }
            };

            /* Metenox table */
            let def_all = jQuery.extend(true, {}, def)
            def_all.ajax.url = '{% url "metenox:metenoxes_data" %}'
            def_all.filterDropDown.ajax = '{% url "metenox:metenoxes_fdd_data" %}'
            let table_all = $('#table_all').DataTable(def_all);
            table_all.on( 'init', function() {
                table_all.columns.adjust().draw();
                $("#loader_all").hide();
                $("#wrapper_all").show();
            });

            handle_modal_events("modalMetenoxDetails", "modalMetenoxDetailsContent");
        })
    </script>

    {{ block.super }}

{% endblock %}
