{% extends "./master.njk" %}

{% block content %}
<div id="app" class="w-full">
    {% include "./components/navbar.njk" %}
    <div class="container relative mx-auto py-12 flex flex-col justify-center items-center gap-8">
        <div class="flex flex-row gap-8 w-full text-gray-700">
            <!-- Setting Menu -->
            <div class="flex flex-col w-2/6">
                <div class="flex flex-col px-8 py-6 bg-white dark:bg-gray-800 shadow-md rounded-lg gap-6">
                    <div class="flex w-full">
                        <h2 class="text-xl font-bold dark:text-gray-200">Settings</h2>
                    </div>
                    <div class="flex flex-col gap-3">
                        {% if page == 'users' %}
                        <a href="/admin/users" class="py-3 px-5 text-sm text-left rounded-lg text-blue-700 dark:text-blue-300 hover:text-blue-500 bg-gray-100 dark:bg-gray-900">
                        {% else %}
                        <a href="/admin/users" class="py-3 px-5 text-sm text-left rounded-lg text-gray-700 dark:text-gray-300 hover:text-gray-100 hover:bg-blue-500">
                        {% endif %}
                            Users
                        </a>
                        {% if page == 'groups' %}
                        <a href="/admin/groups" class="py-3 px-5 text-sm text-left rounded-lg text-blue-700 dark:text-blue-300 hover:text-blue-500 bg-gray-100 dark:bg-gray-900">
                        {% else %}
                        <a href="/admin/groups" class="py-3 px-5 text-sm text-left rounded-lg text-gray-700 dark:text-gray-300 hover:text-gray-100 hover:bg-blue-500">
                        {% endif %}
                            Groups
                        </a>
                    </div>
                </div>
            </div>
            <div class="flex flex-col flex-auto gap-8">
                {% if page == 'users' %}
                <!-- Table: Users -->
                <div class="relative overflow-x-auto shadow-md rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white">
                    <table class="w-full text-sm text-left">
                        <caption class="py-5 px-8 text-xl font-semibold text-left">
                            Users
                            <p class="mt-1 text-sm font-normal text-gray-500 dark:text-gray-400">
                                Manage the users in the user directory 
                            </p>
                        </caption>
                        <thead class="text-xs uppercase bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-400">
                            <tr>
                                <th scope="col" class="px-6 py-3">
                                    Name
                                </th>
                                <th scope="col" class="px-6 py-3">
                                    Mail
                                </th>
                                <th scope="col" class="px-6 py-3 text-center">
                                    Enabled
                                </th>
                                <th scope="col" class="px-6 py-3">
                                    
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for user in users %}
                            <tr class="border-b dark:border-gray-700 hover:bg-gray-100 hover:dark:bg-gray-700">
                                <th class="px-6 py-4 select-all font-medium whitespace-nowrap">
                                    {{user.name}}
                                </th>
                                <td class="px-6 py-4 select-all">
                                    {{user.mail}}
                                </td>
                                {% if user.disabled == 1 %}
                                <td class="px-6 py-4 text-2xl text-center text-red-400">
                                    <i class="ti ti-square-rounded-x-filled"></i>
                                </td>
                                {% else %}
                                <td class="px-6 py-4 text-2xl text-center text-green-500">
                                    <i class="ti ti-square-rounded-check-filled"></i>
                                </td>
                                {% endif %}
                                <td class="px-6 py-4 text-right">
                                    <a href="/admin/user/{{user.id}}" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% endif %}
                {% if page == 'groups' %}
                <!-- Table: Groups -->
                <div class="relative overflow-x-auto shadow-md rounded-lg">
                    <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
                        <caption class="py-5 px-8 text-xl font-semibold text-left rtl:text-right text-gray-900 bg-white dark:text-white dark:bg-gray-800">
                            Groups
                            <p class="mt-1 text-sm font-normal text-gray-500 dark:text-gray-400">
                                Manage the groups in the user directory 
                            </p>
                        </caption>
                        <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
                            <tr>
                                <th scope="col" class="px-6 py-3">
                                    Name
                                </th>
                                <th scope="col" class="px-6 py-3">
                                    
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for group in groups %}
                            <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
                                <th class="px-6 py-4 select-all font-medium text-gray-900 whitespace-nowrap dark:text-white">
                                    {{group.name}}
                                </th>
                                <td class="px-6 py-4 text-right">
                                    <a href="/admin/group/{{group.id}}" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% endif %}
                <!-- / -->
            </div>
        </div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/flowbite@2.5.1/dist/flowbite.min.js"></script>
{% endblock %}