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

{% block content %}

    <div class="table-responsive">
        <table class="table table-striped table-dens w-100" id="table-dens">
            <thead>
                <th class="w-auto">{% translate "Owner character" %}</th>
                <th class="w-auto">{% translate "Owner" %}</th>
                <th class="w-auto">{% translate "Planet" %}</th>
                <th class="w-auto">{% translate "System" %}</th>
                <th class="w-auto">{% translate "Constellation" %} <br> {% translate "Region" %}</th>
                <th class="w-auto">{% translate "Reinforced" %}</th>
                <th class="w-auto">{% translate "System" %}</th>
                <th class="w-auto">{% translate "System" %}</th>
            </thead>
        </table>
    </div>

{% endblock %}

{% block extra_javascript %}
    {% include 'bundles/datatables-js-bs5.html' %}
    {% include 'bundles/filterdropdown-js.html' %}
    {% include 'bundles/moment-js.html' with locale=True %}

    <script type="text/javascript">
        "use strict";
        $(function(){
            let dropDownColumns = [
                {
                    idx: 0,
                    title: "Den Owner",
                    maxWidth: "10em",
                },
                {
                    idx: 1,
                    title: "Den Owner Main",
                    maxWidth: "10em",
                },
                {
                    idx: 6,
                    title: "Region",
                    maxWidth: "10em",
                },
                {
                    idx: 7,
                    title: "Constellation",
                    maxWidth: "10em",
                },
                {
                    idx: 8,
                    title: "Solar System",
                    maxWidth: "10em",
                },
                {
                    idx: 9,
                    title: "Reinforced",
                    maxWidth: "10em",
                },
            ]

            const def = {
                ajax: {
                    url: '{% url "dens:dens_data" %}',
                    dataSrc: 'data',
                    cache: true,
                },
                columns: [
                    { data: 'owner_character_name' },
                    { data: 'owner_main_character_name' },
                    { data: 'planet_name' },
                    { data: 'solar_system_link' },
                    { data: 'location_html' },
                    {
                        data: 'reinforcement_time',
                        render: function(data, type, row) {
                            if (data) {
                                return moment(data).utc().format("YYYY-MM-DD HH:mm")
                            }
                            return ""
                        },
                    },
                    /* Hidden columns */
                    { data: 'region_name' },
                    { data: 'constellation_name' },
                    { data: 'solar_system_name' },
                    { data: 'is_reinforced' },
                ],
                searching: true,
                processing: true,
                serverSide: true,
                lengthMenu: DEFAULT_LENGTH_MENU,
                pageLength: DEFAULT_PAGE_LENGTH,
                order: [ [0, "asc" ] ],
                columnDefs: [
                    { "visible": false, "targets": [6, 7, 8, 9] },
                ],
                filterDropDown: {
                    columns: dropDownColumns,
                    bootstrap: true,
                    bootstrap_version: 5,
                }
            };

            let table = $('#table-dens').DataTable(def);
            table.on('init', function() {
                table.columns.adjust().draw();
            })
        })
    </script>

    {{ block.super }}

{% endblock %}

{% block extra_css %}
{% endblock %}
