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


{% block details %}
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">{% translate 'Characters' %}</h3>
        </div>

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

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

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

    <!--load JS for filterDropDown plugin -->
    <script type="text/javascript" src="{% static 'js/filterDropDown/filterDropDown.min.js' %}">
    </script>

    <script>
        $(document).ready(function() {
            $('#tab_characters').DataTable({
                ajax: {
                    url: '{% url 'memberaudit:character_finder_data' %}',
                    dataSrc: '',
                    cache: false
                },

                columns: [
                    {
                        data: 'character',
                        render: {
                            _: 'display',
                            sort: 'sort'
                        }
                    },
                    { data: 'character_organization' },
                    { data: 'location' },
                    { data: 'main_character' },
                    { data: 'main_organization' },
                    { data: 'state_name' },
                    { data: 'actions' },
                    /* hidden columns */
                    { data: 'alliance_name' },
                    { data: 'corporation_name' },
                    { data: 'region_name' },
                    { data: 'solar_system_name' },
                    { data: 'main_alliance_name' },
                    { data: 'main_corporation_name' },
                    { data: 'main_str' },
                ],

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

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

                filterDropDown: {
                    columns: [
                        {
                            idx: 7,
                            title: "{% translate 'Char Alliance' %}"
                        },
                        {
                            idx: 8,
                            title: "{% translate 'Char Corporation' %}"
                        },
                        {
                            idx: 9,
                            title: "{% translate 'Char Region' %}"
                        },
                        {
                            idx: 10,
                            title: "{% translate 'Char Solar System' %}"
                        },
                        {
                            idx: 11,
                            title: "{% translate 'Main Alliance' %}"
                        },
                        {
                            idx: 12,
                            title: "{% translate 'Main Corporation' %}"
                        },
                        {
                            idx: 13,
                            title: "{% translate 'Is Main?' %}"
                        },
                        {
                            idx: 5,
                            title: "{% translate 'Main State' %}"
                        }

                    ],
                    bootstrap: true
                }
            });
        });
    </script>
{% endblock %}

{% block extra_css %}
    {% include 'bundles/datatables-css.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 %}
