{% extends "aa_permission_management/base.html" %}

{% load i18n %}

{% block aa_permission_management_body %}
    {% comment %} Translations to variables {% endcomment %}
    {% translate "Group name" as l10n_group_name %}
    {% translate "State name" as l10n_state_name %}
    {% translate "Member count" as l10n_member_count %}
    {% translate "Groups and states" as l10n_groups_and_states %}
    {% translate "Permissions" as l10n_permissions %}
    {% translate "Groups" as l10n_groups %}
    {% translate "States" as l10n_states %}

    <div class="row">
        <div class="col-md-6">
            <div class="card mb-3">
                <div class="card-header">
                    {{ l10n_groups_and_states }}
                </div>

                <div class="card-body">
                    <ul class="nav nav-tabs" id="groupsStatesTab" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button
                                class="nav-link active"
                                id="states-tab"
                                data-bs-toggle="tab"
                                data-bs-target="#states"
                                type="button"
                                role="tab"
                                aria-controls="states"
                                aria-selected="true"
                            >
                                {{ l10n_states }}
                            </button>
                        </li>

                        <li class="nav-item" role="presentation">
                            <button
                                class="nav-link"
                                id="groups-tab"
                                data-bs-toggle="tab"
                                data-bs-target="#groups"
                                type="button"
                                role="tab"
                                aria-controls="groups"
                                aria-selected="false"
                            >
                                {{ l10n_groups }}
                            </button>
                        </li>
                    </ul>

                    <div class="tab-content mt-3" id="groupsStatesTabContent">
                        <div class="tab-pane fade show active" id="states" role="tabpanel" aria-labelledby="states-tab">
                            <!-- States content -->
                            <table id="table-states" class="w-100 table table-striped table-hover">
                                <thead>
                                    <tr>
                                        <th>{{ l10n_state_name|title }}</th>
                                        <th>{{ l10n_member_count|title }}</th>
                                        <th></th>
                                    </tr>
                                </thead>

                                <tbody></tbody>
                            </table>
                        </div>

                        <div class="tab-pane fade" id="groups" role="tabpanel" aria-labelledby="groups-tab">
                            <!-- Groups content -->
                            <table id="table-groups" class="w-100 table table-striped table-hover align-middle">
                                <thead>
                                    <tr>
                                        <th>{{ l10n_group_name|title }}</th>
                                        <th>{{ l10n_member_count|title }}</th>
                                        <th class="text-end"></th>
                                    </tr>
                                </thead>

                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="card mb-3">
                <div class="card-header">
                    {{ l10n_permissions }}
                    <span id="selected-element" class="float-end d-none"></span>
                </div>

                <div class="card-body">
                    <div id="loading-spinner" class="d-none text-center">
                        <svg>
                            <use href="#aa-loading-spinner"></use>
                        </svg>

                        <p>
                            {% translate "Loading …" %}
                        </p>
                    </div>

                    <div id="permissions"></div>
                </div>
            </div>
        </div>
    </div>
{% endblock aa_permission_management_body %}

{% block extra_css %}
    {% include "bundles/datatables-2-css-bs5.html" %}
    {% include "bundles/datatables-2-columncontrol-css-bs5.html" %}
    {% include "aa_permission_management/bundles/multi-select-css.html" %}
    {% include "aa_permission_management/bundles/aa-permission-management-css.html" %}
{% endblock extra_css %}

{% block extra_javascript %}
    {% include "bundles/datatables-2-js-bs5.html" %}
    {% include "bundles/datatables-2-columncontrol-js-bs5.html" %}
    {% include "aa_permission_management/bundles/multi-select-js.html" %}
    {% include "aa_permission_management/bundles/jquery.quicksearch-js.html" %}

    {% comment %} Translations used in JavaScript {% endcomment %}
    {% translate "Search" as l10n_search %}
    {% translate "Group" as l10n_group %}
    {% translate "State" as l10n_state %}

    <script>
        const permissionManagamentSettingsOverrides = {
            l10n: {
                search: '{{ l10n_search|escapejs }}',
                group: '{{ l10n_group|escapejs }}',
                state: '{{ l10n_state|escapejs }}'
            }
        };
    </script>

    {% include "aa_permission_management/bundles/aa-permission-management-js.html" %}
{% endblock extra_javascript %}