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

{% block details %}
    <ul class="nav nav-tabs" role="tablist">
        <li class="nav-item" role="presentation">
            <a class="nav-link active" href="#tab-requests" aria-controls="tab-requests" role="tab" data-bs-toggle="tab">
                {% translate "Open Requests" %}
                {% if requests_count > 0 %}
                    &nbsp;<span class="badge text-bg-success">
                        {{ requests_count }}
                    </span>
                {% endif %}
            </a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link" href="#tab-revocations" aria-controls="tab-revocations" role="tab" data-bs-toggle="tab">
                {% translate "Open Revocations" %}
                {% if revocations_count > 0 %}
                    &nbsp;<span class="badge text-bg-success">
                        {{ revocations_count }}
                    </span>
                {% endif %}
            </a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link" href="#tab-effective-requests" aria-controls="tab-effective-requests" role="tab" data-bs-toggle="tab">
                {% translate "Effective Requests" %}
            </a>
        </li>
    </ul>

    <div class="card card-default card-tabs border-0">
        <div class="card-body tab-content">

            <div role="tabpanel" class="tab-pane show active" id="tab-requests">
                <div
                    hx-get="{% url 'manage_requests_list' %}"
                    hx-trigger="load">
                    {% include "standingsrequests/partials/spinner.html" %}
                </div>
                <p class="text-muted">
                    {% blocktranslate with organization_name=organization.name %}
                        Standing requests with pending action for {{ organization_name }}
                    {% endblocktranslate %}
                </p>
            </div>

            <div role="tabpanel" class="tab-pane" id="tab-revocations">
                <div
                    hx-get="{% url 'manage_revocations_list' %}"
                    hx-trigger="load">
                    {% include "standingsrequests/partials/spinner.html" %}
                </div>
                <p class="text-muted">
                    {% blocktranslate with organization_name=organization.name %}
                        Standing revocations with pending action for {{ organization_name }}
                    {% endblocktranslate %}
                </p>
            </div>

            <div role="tabpanel" class="tab-pane" id="tab-effective-requests">
                {% include "standingsrequests/partials/tbl_effective_requests.html" %}
                <p class="text-muted">
                    {% blocktranslate with organization_name=organization.name %}
                        Currently effective standing requests for {{ organization_name }} • This data is cached
                    {% endblocktranslate %}
                </p>
            </div>


        </div>
    </div>
{% endblock %}

{% block extra_css %}
    {{ block.super }}
    {% include 'bundles/datatables-css-bs5.html' %}
    <link rel="stylesheet" href="{% static 'standingsrequests/css/manage.css' %}" type="text/css" media="screen">
{% endblock extra_css %}

{% block extra_javascript %}
    {% include "standingsrequests/bundles/htmx.html" %}
    {% include 'bundles/datatables-js-bs5.html' %}
    {% include 'bundles/filterdropdown-js.html' %}
    {% include "standingsrequests/bundles/helper-js.html" %}
    <script type="application/javascript">
        $(document).ready(function () {
            $('#tbl-effective-requests').DataTable({
                ajax: {
                    url: "{% url 'standingsrequests:effective_requests_data' %}",
                    dataSrc: 'data',
                    cache: true
                },
                columns: [
                    {
                        data: 'request_date_str',
                        render: {
                            _: 'display',
                            sort: 'sort'
                        }
                    },
                    {
                        data: 'contact_name_html',
                        render: {
                            _: 'display',
                            sort: 'sort'
                        }
                    },
                    { data: 'organization_html' },
                    { data: 'main_character_html' },
                    { data: 'scopes_state_html' },
                    { data: 'effective_html' },
                    { data: 'labels_str' },
                    /* invisible columns */
                    { data: 'corporation_name' },
                    { data: 'alliance_name' },
                    { data: 'main_character_name' },
                    { data: 'state' },
                    { data: 'action_by' },
                ],
                order: [[0, "asc"]],
                columnDefs: [
                    { "visible": false, "targets": [ 7, 8, 9, 10, 11 ] }
                ],
                filterDropDown: {
                    columns: [
                        {
                            idx: 7,
                            title: "{% translate 'Corporation' %}",
                            maxWidth: "15rem"
                        },
                        {
                            idx: 8,
                            title: "{% translate 'Alliance' %}",
                            maxWidth: "15rem"
                        },
                        {
                            idx: 9,
                            title: "{% translate 'Main' %}",
                            maxWidth: "15rem"
                        },
                        {
                            idx: 10,
                            title: "{% translate 'State' %}",
                            maxWidth: "15rem"
                        },
                        {
                            idx: 11,
                            title: "{% translate 'Accepted By' %}",
                            maxWidth: "15rem"
                        }
                    ],
                    autoSize: false,
                    bootstrap: true,
                    bootstrap_version: 5
                },
            });
            rememberLastTab('standingsrequests', 'manage-requests', '#tab-requests');
        });
    </script>
{% endblock %}