{% extends "base.html" %}
{% load i18n %}
{% load custom_filters %}
{% load render_table from django_tables2 %}
{% block title %}
    {% trans "Groups" %}
{% endblock title %}
{% block content %}
    <main class="py-5">
        <div class="container">
            {% if groups or request.GET.q %}
                <div class="card border-0 rounded-4 animate__animated animate__fadeInUp">
                    <div class="card-header border-bottom d-flex flex-column flex-md-row justify-content-between align-items-md-center p-4">
                        <h5 class="card-title mb-2 mb-md-0 me-md-4 fw-bold">
                            <i class="fa-solid fa-user-group fs-3 me-1 text-primary "></i>{% trans "Groups" %}
                        </h5>
                        <div class="d-flex gap-2">
                            <a href="{% url 'group_create' request.dealer.slug %}"
                               class="btn btn-phoenix-primary">
                                <i class="fa-solid fa-user-group fs-9 me-1"></i>
                                <span class="fas fa-plus me-2"></span>{% trans "Add Group" %}
                            </a>
                            <a href="{% url 'user_list' request.dealer.slug %}"
                               class="btn btn-phoenix-secondary">
                                <span class="fas fas fa-arrow-left me-2"></span>{% trans "Back to Staffs" %}
                            </a>
                        </div>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive scrollbar mx-n1 px-1 mt-3">
                            <table class="table align-items-center table-hover mb-0">
                                <thead>
                                    <tr class="bg-light">
                                        <th scope="col" class="text-secondary text-uppercase fw-bold ps-4">{% trans 'name'|capfirst %}</th>
                                        <th scope="col" class="text-secondary text-uppercase fw-bold">{% trans 'total Users'|capfirst %}</th>
                                        <th scope="col" class="text-secondary text-uppercase fw-bold">{% trans 'total permission'|capfirst %}</th>
                                        <th scope="col"
                                            class="text-secondary text-uppercase fw-bold text-end pe-4">
                                            {% trans 'actions'|capfirst %}
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for group in groups %}
                                        <tr>
                                            <td class="align-middle white-space-nowrap ps-4">{{ group.name }}</td>
                                            <td class="align-middle white-space-nowrap">
                                                <i class="fa-solid fa-users me-1"></i> {{ group.users.count }}
                                            </td>
                                            <td class="align-middle white-space-nowrap">
                                                <i class="fa-solid fa-unlock me-1"></i> {{ group.permissions.count }}
                                            </td>
                                            <td class="align-middle white-space-nowrap text-end pe-4">
                                                <a class="btn btn-phoenix-secondary btn-sm"
                                                   href="{% url 'group_detail' request.dealer.slug group.id %}">
                                                    <i class="fa-solid fa-eye me-1"></i>
                                                    {% trans 'view'|capfirst %}
                                                </a>
                                            </td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                    {% if page_obj.paginator.num_pages > 1 %}
                        <div class="card-footer bg-light border-top">
                            <div class="d-flex justify-content-end">{% include 'partials/pagination.html' %}</div>
                        </div>
                    {% endif %}
                </div>
            {% else %}
                {% url "group_create" request.dealer.slug as create_group_url %}
                {% include "empty-illustration-page.html" with value="group" url=create_group_url %}
            {% endif %}
        </div>
    </main>
{% endblock %}