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


{% block details %}
    <div class="card">
        <div class="card-header">
            {% translate 'Characters' %}
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-striped table-width-fix" id="tab_characters">
                    <thead>
                        <tr>
                            <th>{% translate 'Character' %}<br>{% translate 'Name' %}</th>
                            <th>{% translate 'Character' %}<br>{% translate 'Organization' %}</th>
                            <th>{% translate 'Main' %}<br>{% translate 'Name' %}</th>
                            <th>{% translate 'Main' %}<br>{% translate 'Organization' %}</th>
                            <th>{% translate 'Main' %}<br>{% translate 'State' %}</th>
                            <th></th>
                        </tr>
                    </thead>

                    <tbody></tbody>
                </table>
            </div>
            <p class="text-muted">
                <i class="fas fa-crown"></i> {% translate 'Main character' %}&nbsp;•&nbsp;
                <i class="far fa-eye"></i> {% translate 'Currently shared with others' %}
            </p>
        </div>
    </div>
{% endblock details %}

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

    <!--load JS for filterDropDown plugin -->
    {% include "bundles/filterdropdown-js.html" %}

    <script>
        $(document).ready(function() {
            $('#tab_characters').DataTable({
                ajax: {
                    url: '{% url "memberaudit:character_finder_data" %}',
                    dataSrc: 'data',
                    cache: false
                },
                columns: [
                    { data: 'character' },
                    { data: 'character_organization' },
                    { data: 'main_character' },
                    { data: 'main_organization' },
                    { data: 'state_name' },
                    { data: 'actions' },
                    /* hidden columns */
                    { data: 'alliance_name' },
                    { data: 'corporation_name' },
                    { data: 'main_alliance_name' },
                    { data: 'main_corporation_name' },
                    { data: 'main_str' },
                    { data: 'unregistered_str' },
                ],

                columnDefs: [
                    { "orderable": false, "targets": [ 5 ] },
                    { "visible": false, "targets": [ 6, 7, 8, 9, 10, 11 ] },
                ],

                order: [ [ 0, "asc" ] ],

                searching: true,
                processing: true,
                serverSide: true,
                // stateSave: true,

                filterDropDown: {
                    columns: [
                        {
                            idx: 6,
                            title: "{% translate 'Char Alliance' %}",
                            maxWidth: "10em"
                        },
                        {
                            idx: 7,
                            title: "{% translate 'Char Corporation' %}",
                            maxWidth: "12em"
                        },
                        {
                            idx: 8,
                            title: "{% translate 'Main Alliance' %}",
                            maxWidth: "10em"
                        },
                        {
                            idx: 9,
                            title: "{% translate 'Main Corporation' %}",
                            maxWidth: "12em"
                        },
                        {
                            idx: 10,
                            title: "{% translate 'Main?' %}",
                            maxWidth: "7em"
                        },
                        {
                            idx: 4,
                            title: "{% translate 'Main State' %}",
                            maxWidth: "9em"
                        },
                        {
                            idx: 11,
                            title: "{% translate 'Unregistered?' %}",
                            maxWidth: "10em"
                        },

                    ],
                    bootstrap: true,
                    bootstrap_version: 5,
                    ajax: '{% url "memberaudit:character_finder_list_fdd_data" %}'
                }
            });
        });
    </script>
{% endblock %}

{% block extra_css %}
    {% include 'bundles/datatables-css-bs5.html' %}
    <link rel="stylesheet" href="{% static 'memberaudit/css/global.css' %}" type="text/css">
    <link rel="stylesheet" href="{% static 'memberaudit/css/memberaudit.css' %}" type="text/css">
    <link rel="stylesheet" href="{% static 'memberaudit/css/character_finder.css' %}" type="text/css">
{% endblock %}

{% block extra_script %}

{% endblock %}