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

{% block content %}

    <div class="dens-datatable-filters">
        <p class="mb-1 fw-bold">{% translate "Filter by" %}:</p>

        <div class="align-items-center d-flex flex-wrap gap-3 mb-3">
            <div>
                <select id="den-owner" class="form-select w-auto">
                    <option value="">{% translate "All owners" %}</option>

                    {% for den_owner in den_owners %}
                    	<option value="{{ den_owner.character_id }}">{{ den_owner.character_name }}</option>
                    {% endfor %}

                </select>
            </div>
            <div>
                <select id="den-owner-main" class="form-select w-auto">
                    <option value="">{% translate "All users" %}</option>

                    {% for den_owner_main in den_owner_mains %}
                        <option value="{{ den_owner_main.id }}">{{ den_owner_main.name }}</option>
                    {% endfor %}
                </select>
            </div>
            <div>
                <select id="solar-system" class="form-select w-auto">
                    <option value="">{% translate "All solar systems" %}</option>

                    {% for solar_system in solar_systems %}
                        <option value="{{ solar_system.id }}">{{ solar_system.name }}</option>
                    {% endfor %}
                </select>
            </div>
            <div>
                <select id="constellation" class="form-select w-auto">
                    <option value="">{% translate "All constellations" %}</option>

                    {% for constellation in constellations %}
                    	<option value="{{ constellation.id }}">{{ constellation.name }}</option>
                    {% endfor %}
                </select>
            </div>
            <div>
                <select id="region" class="form-select w-auto">
                    <option value="">{% translate "All regions" %}</option>

                    {% for region in regions %}
                    	<option value="{{ region.id }}">{{ region.name }}</option>
                    {% endfor %}

                </select>
            </div>
            <div>
                <select id="reinforced" class="form-select w-auto">
                    <option value="">{% translate "All reinforcement status" %}</option>
                    <option value="YES">{% translate "Reinforced" %}</option>
                    <option value="NO">{% translate "Not reinforced" %}</option>
                </select>
            </div>
        </div>
    </div>

    <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></th>
                <th></th>
            </thead>
        </table>
    </div>

{% endblock %}

{% block extra_javascript %}
    {% get_datatables_language_static LANGUAGE_CODE as DT_LANG_PATH %}
    {% include "bundles/datatables-2-js-bs5.html" %}

    <script type="text/javascript">
        const custom_dt_filter = {
            den_owner: $('#den-owner'),
            den_owner_main: $('#den-owner-main'),
            solar_system: $('#solar-system'),
            constellation: $('#constellation'),
            region: $('#region'),
            reinforced: $('#reinforced'),
        };
        $(document).ready(() => {

            const dt = new DataTable('#table-dens', {
                language: {
                    url: '{{ DT_LANG_PATH }}',
                    processing: `{% include "framework/datatables/process-indicator.html" %}`
                },
                processing: true, // Show processing indicator when loading data
                serverSide: true, // Enable server-side processing
                searching: true,
                ajax: {
                    url: '{% url "dens:dens_data" %}',
                    data: (data) => {
                        const mappedFilters = Object.fromEntries(
                            Object.entries(custom_dt_filter).map(([key, $el]) => [`filter_${key}`, $el.val()])
                        );
                        return {...data, ...mappedFilters};
                    },
                    error: (xhr, error) => console.error('Error fetching data:', xhr, error)
                },
                lengthMenu: DEFAULT_LENGTH_MENU,
                pageLength: DEFAULT_PAGE_LENGTH,
                order: [ [0, "asc" ] ],
                columnDefs: [
                    { "visible": false, "targets": [6, 7] },
                ],
                initComplete: () => {
                    // Redraw table when filter values change
                    Object.values(custom_dt_filter).forEach(($el) => {
                        $el.on('change', () => dt.draw());
                    });
                }
            });
        })
    </script>

    {{ block.super }}

{% endblock %}

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