{% extends "standingsrequests/_base.html" %}
{% load static %}
{% load i18n %}

{% block content %}

    <h2>{{ operation_mode|capfirst }} {% translate "Standings" %}</h2>

    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="nav-item">
            <a class="nav-link active" href="#tab-characters" aria-controls="tab-characters" role="tab" data-bs-toggle="tab">
                {% translate "Characters" %}
            </a>
        </li>
        <li role="presentation" class="nav-item">
            <a class="nav-link" href="#tab-corporations" aria-controls="tab-corporations" role="tab" data-bs-toggle="tab">
                {% translate "Corporations" %}
            </a>
        </li>
        <li role="presentation" class="nav-item">
            <a class="nav-link" href="#tab-alliances" aria-controls="tab-alliances" role="tab" data-bs-toggle="tab">
                {% translate "Alliances" %}
            </a>
        </li>
    </ul>

    <div class="card card-default card-tabs border-0">
        <div class="panel-body tab-content">
                {% include "standingsrequests/partials/tab_character_standings.html" %}
                {% include "standingsrequests/partials/tab_corporation_standings.html" %}
                {% include "standingsrequests/partials/tab_alliance_standings.html" %}
        </div>
    </div>
    <p class="text-muted">
        {% blocktranslate with organization_name=organization.name last_update=lastUpdate|timesince %}
            Current in-game contacts with standings for {{ organization_name }} •
            This data was last updated {{ last_update }} ago and is cached
        {% endblocktranslate %}
    </p>
    <!-- transfer data to javascript -->
    {{ show_mains|json_script:"show-mains-data" }}
{% endblock content %}

{% block extra_javascript %}
    {% include 'bundles/datatables-js-bs5.html' %}
    {% include 'bundles/filterdropdown-js.html' %}
    {% include "standingsrequests/bundles/helper-js.html" %}
    <script type="application/javascript">

        /* renders standing columns for datatables */
        function renderStanding ( data, type, row ) {
            if ( type !== "display" ) {
                return data;
            }
            else {
                let symbol;
                let style;

                if (data < -5) {
                    symbol = "fas fa-minus-square fa-fw fa-lg";
                    style = "color:#930404;";
                } else if (data < 0) {
                    symbol = "fas fa-minus-square fa-fw fa-lg";
                    style = "color:#c34704;";
                } else if (data === 0) {
                    symbol = "fas fa-equals fa-fw fa-lg";
                    style = "background:#878787; color:white; font-size:75%";
                } else if (data <= 5) {
                    symbol = "fas fa-plus-square fa-fw fa-lg";
                    style = "color:#2a64c3;";
                } else {
                    symbol = "fas fa-plus-square fa-fw fa-lg";
                    style = "color:#042177;";
                }
                return `<i class="${symbol}" style="${style};" title="${data}"></i>`
            }
        }

        $(document).ready(function () {
            const showMains = JSON.parse(document.getElementById('show-mains-data').textContent);
            let columns = [
                {
                    data: 'character_name_html',
                    render: {
                        _: 'display',
                        sort: 'sort'
                    }
                },
                { data: 'corporation_name' },
                { data: 'alliance_name' },
                { data: 'faction_name' },
                {
                    data: 'standing',
                    render: renderStanding
                },
                { data: 'labels_str' },
            ];
            let columnDefs = null;
            let filterDropDownColumns = [
                {
                    idx: 1,
                    maxWidth: "15rem"
                },
                {
                    idx: 2,
                    maxWidth: "15rem"
                },
                {
                    idx: 3,
                    maxWidth: "15rem"
                },
                {
                    idx: 4,
                    maxWidth: "15rem"
                }
            ];
            if (showMains) {
                columns.push(
                    {
                        data: 'main_character_html',
                        render: {
                            _: 'display',
                            sort: 'sort'
                        }
                    },
                    { data: 'state' },
                    /* invisible columns */
                    { data: 'main_character_name' },
                );
                columnDefs = [
                    { "visible": false, "targets": [8] }
                ]
                filterDropDownColumns.push(
                    {
                        idx: 8,
                        title: "{% translate 'Main' %}",
                        maxWidth: "15rem"
                    },
                    {
                        idx: 7,
                        maxWidth: "15rem"
                    }
                )
            }
            $('#tbl-character-standings').DataTable({
                ajax: {
                    url: "{% url 'standingsrequests:character_standings_data' %}",
                    dataSrc: 'data',
                    cache: true
                },
                columns: columns,
                order: [[0, "asc"]],
                columnDefs: columnDefs,
                filterDropDown: {
                    columns: filterDropDownColumns,
                    autoSize: false,
                    bootstrap: true,
                    bootstrap_version: 5
                },
            });

            columns = [
                {
                    data: 'corporation_html',
                    render: {
                        _: 'display',
                        sort: 'sort'
                    }
                },
                { data: 'alliance_name' },
                { data: 'faction_name' },
                {
                    data: 'standing',
                    render: renderStanding
                },
                { data: 'labels_str' },
            ];
            columnDefs = null;
            filterDropDownColumns = [
                {
                    idx: 1,
                    maxWidth: "15rem"
                },
                {
                    idx: 2,
                    maxWidth: "15rem"
                },
                {
                    idx: 3,
                    maxWidth: "15rem"
                }
            ];
            if (showMains) {
                columns.push(
                    {
                        data: 'main_character_html',
                        render: {
                            _: 'display',
                            sort: 'sort'
                        }
                    },
                    { data: 'state' },
                    /* invisible columns */
                    { data: 'main_character_name' },
                );
                columnDefs = [
                    { "visible": false, "targets": [7] }
                ]
                filterDropDownColumns.push(
                    {
                        idx: 7,
                        title: "{% translate 'Main' %}",
                        maxWidth: "15rem"
                    },
                    {
                        idx: 6,
                        maxWidth: "15rem"
                    }
                )
            }
            $('#tbl-corporation-standings').DataTable({
                ajax: {
                    url: "{% url 'standingsrequests:corporation_standings_data' %}",
                    dataSrc: 'data',
                    cache: true
                },
                columns: columns,
                order: [[0, "asc"]],
                columnDefs: columnDefs,
                filterDropDown: {
                    columns: filterDropDownColumns,
                    autoSize: false,
                    bootstrap: true,
                    bootstrap_version: 5
                },
            });
            $('#tbl-alliance-standings').DataTable({
                ajax: {
                    url: "{% url 'standingsrequests:alliance_standings_data' %}",
                    dataSrc: 'data',
                    cache: true
                },
                columns: [
                    {
                        data: 'alliance_html',
                        render: {
                            _: 'display',
                            sort: 'sort'
                        }
                    },
                    {
                        data: 'standing',
                        render: renderStanding
                    },
                    { data: 'labels_str' },
                ],
                order: [[0, "asc"]],
                filterDropDown: {
                    columns: [
                        {
                            idx: 1,
                            maxWidth: "15rem"
                        }
                    ],
                    autoSize: false,
                    bootstrap: true,
                    bootstrap_version: 5
                },
            });
            rememberLastTab('standingsrequests', 'standings', '#tab-characters');
        });
    </script>

{% endblock extra_javascript %}

{% block extra_css %}
    {{ block.super }}
    {% include 'bundles/datatables-css-bs5.html' %}
{% endblock extra_css %}
