{% extends "superadmin/base_superadmin.html" %}

{% block title %}Groups Management{% endblock %}

{% block content %}
<div class="mx-auto max-w-screen-2xl p-4 md:p-6 2xl:p-10">
    <!-- Breadcrumb -->
    <div class="mb-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <h2 class="text-title-md2 font-semibold text-black dark:text-white">
            Groups Management
        </h2>
        <nav>
            <ol class="flex items-center gap-2">
                <li>
                    <a href="{{ url_for('superadmin_dashboard') }}" class="font-medium">Dashboard</a>
                </li>
                <li class="font-medium text-primary">/ Groups</li>
            </ol>
        </nav>
    </div>

    <!-- Add Group Button -->
    <div class="mb-6">
        <a href="{{ url_for('superadmin_add_group') }}" class="inline-flex items-center justify-center rounded-md bg-primary py-4 px-10 text-center font-medium text-white hover:bg-opacity-90 lg:px-8 xl:px-10">
            <svg class="fill-current mr-3" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M10 1.5C10.4142 1.5 10.75 1.83579 10.75 2.25V9.25H17.75C18.1642 9.25 18.5 9.58579 18.5 10C18.5 10.4142 18.1642 10.75 17.75 10.75H10.75V17.75C10.75 18.1642 10.4142 18.5 10 18.5C9.58579 18.5 9.25 18.1642 9.25 17.75V10.75H2.25C1.83579 10.75 1.5 10.4142 1.5 10C1.5 9.58579 1.83579 9.25 2.25 9.25H9.25V2.25C9.25 1.83579 9.58579 1.5 10 1.5Z" fill=""/>
            </svg>
            Add New Group
        </a>
    </div>

    <!-- Groups Table -->
    <div class="rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark">
        <div class="py-6 px-4 md:px-6 xl:px-7.5">
            <h4 class="text-xl font-semibold text-black dark:text-white">
                All Groups ({{ groups|length }})
            </h4>
        </div>

        <div class="grid grid-cols-6 border-t border-stroke py-4.5 px-4 dark:border-strokedark sm:grid-cols-8 md:px-6 2xl:px-7.5">
            <div class="col-span-2 flex items-center">
                <p class="font-medium">Group Name</p>
            </div>
            <div class="col-span-2 hidden items-center sm:flex">
                <p class="font-medium">Group Code</p>
            </div>
            <div class="col-span-1 flex items-center">
                <p class="font-medium">Members</p>
            </div>
            <div class="col-span-1 flex items-center">
                <p class="font-medium">Currency</p>
            </div>
            <div class="col-span-1 flex items-center">
                <p class="font-medium">Status</p>
            </div>
            <div class="col-span-1 flex items-center">
                <p class="font-medium">Actions</p>
            </div>
        </div>

        {% for group in groups %}
        <div class="grid grid-cols-6 border-t border-stroke py-4.5 px-4 dark:border-strokedark sm:grid-cols-8 md:px-6 2xl:px-7.5">
            <div class="col-span-2 flex items-center">
                <div class="flex flex-col gap-1 sm:flex-row sm:items-center">
                    <p class="text-sm text-black dark:text-white font-medium">
                        {{ group.name }}
                    </p>
                    {% if group.description %}
                    <p class="text-xs text-gray-500">
                        {{ group.description[:50] }}...
                    </p>
                    {% endif %}
                </div>
            </div>
            <div class="col-span-2 hidden items-center sm:flex">
                <span class="inline-flex rounded-full bg-blue-100 px-3 py-1 text-xs font-medium text-blue-800">
                    {{ group.group_code }}
                </span>
            </div>
            <div class="col-span-1 flex items-center">
                <p class="text-sm text-black dark:text-white">
                    {{ group.members|length }}
                </p>
            </div>
            <div class="col-span-1 flex items-center">
                <p class="text-sm text-black dark:text-white">
                    {{ group.currency_ref.symbol if group.currency_ref else 'N/A' }}
                </p>
            </div>
            <div class="col-span-1 flex items-center">
                {% if group.is_active %}
                <span class="inline-flex rounded-full bg-success bg-opacity-10 py-1 px-3 text-sm font-medium text-success">
                    Active
                </span>
                {% else %}
                <span class="inline-flex rounded-full bg-danger bg-opacity-10 py-1 px-3 text-sm font-medium text-danger">
                    Inactive
                </span>
                {% endif %}
            </div>
            <div class="col-span-1 flex items-center space-x-2">
                <a href="{{ url_for('group_admin_dashboard', group_code=group.group_code) }}" 
                   class="hover:text-primary text-blue-600">
                    <svg class="fill-current" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M8.99981 14.8219C3.43106 14.8219 0.674805 9.50624 0.562305 9.28124C0.47793 9.11249 0.47793 8.88749 0.562305 8.71874C0.674805 8.49374 3.43106 3.17812 8.99981 3.17812C14.5686 3.17812 17.3248 8.49374 17.4373 8.71874C17.5217 8.88749 17.5217 9.11249 17.4373 9.28124C17.3248 9.50624 14.5686 14.8219 8.99981 14.8219ZM1.85605 8.99999C2.4748 10.0406 4.89356 13.2031 8.99981 13.2031C13.1061 13.2031 15.5248 10.0406 16.1436 8.99999C15.5248 7.95936 13.1061 4.79687 8.99981 4.79687C4.89356 4.79687 2.4748 7.95936 1.85605 8.99999Z" fill=""/>
                        <path d="M9 11.3906C7.67812 11.3906 6.60938 10.3219 6.60938 9C6.60938 7.67813 7.67812 6.60938 9 6.60938C10.3219 6.60938 11.3906 7.67813 11.3906 9C11.3906 10.3219 10.3219 11.3906 9 11.3906ZM9 8.10938C8.50313 8.10938 8.10938 8.50313 8.10938 9C8.10938 9.49688 8.50313 9.89063 9 9.89063C9.49688 9.89063 9.89063 9.49688 9.89063 9C9.89063 8.50313 9.49688 8.10938 9 8.10938Z" fill=""/>
                    </svg>
                </a>
            </div>
        </div>
        {% endfor %}

        {% if not groups %}
        <div class="py-12 text-center">
            <p class="text-gray-500">No groups found. Create your first group to get started.</p>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}