{% extends 'django_spire/glue/scroll/scroll.html' %}

{% load django_glue %}

{% block scroll_queryset_order_by_field %}name{% endblock %}
{% block scroll_queryset_unique_name %}group_list{% endblock %}
{% block scroll_queryset_filter_field %}name{% endblock %}

{% block scroll_header %}
    <div class="row pb-3 align-items-center">
        <div class="col-6">
            <input class="form-control" placeholder="Search Groups ..." type="search"
                   x-model.debounce="searchQuery">
        </div>
        <div class="col text-end">
            Sort by
        </div>
        <div class="col">
            <select class="form-select form-select-md" x-model="orderBy">
                {#                <option value="username">User Name</option>#}
                {#                <option value="first_name">First Name</option>#}
                {#                <option value="last_name">Last Name</option>#}
            </select>
        </div>
        <div class="col-auto">
            <!-- {% if perms.django_spire_auth_group.change_authgroup %} -->
                {% url 'django_spire:auth:group:form:form' pk=0 as add_group_url %}
                <a class="btn btn-sm btn-primary text-white" href="{{ add_group_url }}">
                    <i class="bi bi-plus-lg"></i>
                    Add
                </a>
                <!-- {% endif %} -->
        </div>
    </div>
    <div class="card--bordered"></div>
{% endblock %}

{% block scroll_template_item %}
    <div class="row border-bottom py-2">
        <div class="col-3">
            <div class="attribute-label">Name</div>
            {% if perms.django_spire_auth_group.view_authgroup %}
                <a :href="{% js_url 'django_spire:auth:group:page:detail' pk='item.id' %}">
                    <span x-text="item.name"></span>
                </a>
            {% else %}
                <span x-text="item.name"></span>
            {% endif %}
        </div>
        <div class="col-8">
            <div class="row g-2 flex-wrap">
                <template x-for="perm in item.permission_data ?? []">
                    <div class="col-2 m-2">
                        <div class="attribute-label" x-text="perm.verbose_app_name ?? perm.app_name"></div>
                        {% include 'django_spire/auth/group/element/group_perm_level_badge.html' with x_permission_level="perm.level_verbose" %}
                    </div>
                </template>
            </div>
        </div>
        <div class="col-1 text-end align-self-center">
            {% include 'django_spire/auth/group/dropdown/ellipsis_dropdown.html' %}
        </div>
    </div>
{% endblock %}