<div class="flex flex-col items-center justify-center w-full">
    <div class="flex-1 lg:w-4/5 w-full">
        <div class="flex flex-row flex-wrap w-full items-center mt-4 gap-5">
            <!-- Add user -->
            <div class="flex-none order-1">
                <div class="inline-flex space-x-3">

                    <button type="button"
                        class="buttonModal rounded-md bg-accentsecondary py-2 px-2.5 font-medium text-color-primary hover:bg-accent">
                        Create User
                    </button>
                    <!--
                    <button
                        class="custom-bg-button hover:custom-bg-button-hover rounded-md p-3 text-color-secondary">
                        <i data-lucide="download" class="text-color-primary"></i>
                    </button>
                    -->
                </div>
            </div>
            <!-- End Add User -->

            <!-- Search User -->
            <!--
            <div
                class="lg:flex-none flex-1 lg:basis-80 sm:basis-auto basis-full lg:order-3 order-2">
                <div class="sm:flex sm:justify-end">
                    <form action="#" class="relative h-auto lg:w-full w-full sm:w-3/5">
                        <input
                            class="bg-tertiary relative z-10 w-full rounded-md pl-4 pr-10 py-3 text-color-primary shadow-lg placeholder:text-color-secondary focus:border focus:border-gray-300/25 focus:outline-none md:w-full lg:w-full"
                            value="" placeholder="Search Users" />
                        <div
                            class="absolute inset-0 flex flex-row flex-nowrap items-center justify-end px-4">
                            <button type="button" class="absolute z-10">
                                <i data-lucide="search" class="text-color-secondary"></i>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
            -->
            <!-- End Search user -->
        </div>

        <div class="mt-8">
            <!-- Table User  -->
            <table class="table-fixed w-full md:text-base text-sm text-black">
                <thead class="text-color-primary font-bold">
                    <tr>
                        <th class="p-3  text-left">
                            PROFILE PICTURE
                        </th>
                        <th class="p-3  text-left">
                            USERNAME
                        </th>
                        <!--
                        <th class="p-3   text-center">
                            UPLOADS
                        </th>
                        <th class="p-3  text-center">
                            DATA USED
                        </th>
                        <th class="p-3 text-center">
                            ACTIONS
                        </th>
                        -->
                    </tr>
                </thead>

                <tbody>
                    <% for(const user of dickUsers) {%>
                        <tr class="text-sm border-b-2 border-table">
                            <td class="p-4 bg-tertiary rounded-tl-2xl rounded-bl-2xl text-left ">
                                <img class="relative h-10 w-10 rounded-full object-cover object-center"
                                    src=<%=settingsDatabase.defaultProfilePicture ?
                                    settingsDatabase.defaultProfilePicture : "./images/profile.png" %> alt="Profile" />
                            </td>
                            <td class="p-4 bg-tertiary">
                                <span class="text-color-secondary font-semibold">
                                    <%= user.username %>
                                </span>
                                <div class="text-color-tertiary text-xs">
                                    <%= user.role %>
                                </div>
                            </td>
                            <!--
                            <td class="p-4 bg-tertiary text-color-secondary text-center">66</td>
                            <td class="p-4 bg-tertiary text-color-secondary text-center ">
                                <div class="sm:border-r border-slate-700  border-r-0">65GB</div>
                            </td>
                            -->
                            <!--
                            <td class="p-4 bg-tertiary rounded-br-2xl rounded-tr-2xl text-center">
                                <div class="flex justify-center">
                                    <button class="text-red-500 flex sm:flex-row flex-col justify-center items-center space-x-1 ">
                                        <i data-lucide="trash-2" class="text-color-red"></i>
                                        <div>Delete</div>
                                    </button>
                                </div>
                            </td>
                            -->
                        </tr>
                    <% } %>
                </tbody>
            </table>
            <!-- End Table User -->
        </div>
    </div>
</div>
