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

{% block altcorp_body %}
    <h2>{% translate "Manage Requests" %}</h2>
    <div class="container-fluid mt-1">
        <!-- Tab Navigation -->
        <ul class="nav nav-tabs" id="myTab" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">
                    {% translate "Open Requests" %}
                    {% if total_count.pending > 0 %}
                        <span class="badge bg-secondary">{{ total_count.pending}}</span>
                    {% endif %}
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">
                    {% translate "Open Revocations" %}
                    {% if total_count.danger > 0 %}
                        <span class="badge bg-warning">{{ total_count.danger}}</span>
                    {% endif %}
                    {% if total_count.revoke > 0 %}
                        <span class="badge bg-danger">{{ total_count.revoke}}</span>
                    {% endif %}
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">
                    {% translate "Effective Requests" %}
                </button>
            </li>
        </ul>

        <!-- Tab Content -->
        <div class="tab-content" id="myTabContent">
            <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                <div
                    hx-get="{% url 'altcorp:manage_requests_list' %}"
                    hx-trigger="load">
                    {% include "altcorp/partials/spinner.html" %}
                </div>
            </div>
            <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                <div
                    hx-get="{% url 'altcorp:manage_revocations_list' %}"
                    hx-trigger="load">
                    {% include "altcorp/partials/spinner.html" %}
                </div>
            </div>
            <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
                <p class="text-muted">
                    {% blocktranslate %}
                        Current alt corps
                    {% endblocktranslate %}
                </p>
            </div>
        </div>
    </div>
{% endblock altcorp_body %}

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

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

    <script>
        document.addEventListener("DOMContentLoaded", function () {
            // Get the current URL hash
            const hash = window.location.hash; // e.g., "#profile"
            if (hash) {
                // Find the tab button matching the hash
                const tabTrigger = document.querySelector(`[data-bs-target="${hash}"]`);
                if (tabTrigger) {
                    // Use Bootstrap's Tab API to activate the tab
                    const tab = new bootstrap.Tab(tabTrigger);
                    tab.show();
                }
            }
        });
    </script>
{% endblock %}
