{% extends 'cPanel/base.html' %}
{% load cms_tags %}

{% block content %}
<main class="p-6 sm:p-10 space-y-6">
    <div class="flex flex-col space-y-6 md:space-y-0 md:flex-row justify-between">
        <div class="mr-6">
            <h1 class="text-4xl font-semibold mb-2">Users</h1>
            <!-- <h2 class="text-gray-600 ml-0.5">Mobile UX/UI Design course</h2> -->
        </div>
        {% if user.is_superuser or user.is_staff %}
        <div class="flex flex-wrap items-start justify-end -mb-3">

            <a href="{% url 'add_user' %}"
                class="inline-flex px-5 py-3 text-white bg-blue-600 hover:bg-purple-700 focus:bg-blue-700 rounded-md ml-6 mb-3">
                <svg aria-hidden="true" fill="none" viewBox="0 0 24 24" stroke="currentColor"
                    class="flex-shrink-0 h-6 w-6 text-white -ml-1 mr-2">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                </svg>
                Create new users
            </a>
        </div>
        {% endif %}
    </div>

    {% if messages %}
    <div class="flex w-full justify-center">
        <ul class="messages text-4xl">
            {% for message in messages %}
            <li{% if message.tags %} class="{{ message.tags }}" {% endif %}>{{ message }}</li>
                {% endfor %}
        </ul>


    </div>
    {% endif %}
    <section class="flex justify-center w-full">
        <table class="w-full border-2 text-left">
            <thead>
                <tr class="border-b-2">
                    <th class="border-r-2 pl-2">Name</th>
                    <th class="border-r-2 pl-2">Username</th>
                    <th class="border-r-2 pl-2">Phone</th>
                    <th class="border-r-2 pl-2">Email</th>
                    <th class="border-r-2 pl-2">Operation
                        <!-- <div class="text-xs">( Active & Deactive)</div> -->
                    </th>
                    <!-- <th class="border-r-2 pl-2">Update</th> -->

                </tr>
            </thead>
            <tbody>
                {% for user in users %}
                <tr class="border-2 hover:bg-blue-100">
                    <td class="border-r-2 pl-2">{{user.first_name}}</td>
                    <td class="border-r-2 pl-2">{{user.username}}</td>
                    <td class="border-r-2 pl-2">{{user.last_name}}</td>
                    <td class="border-r-2 pl-2"><a href="/email/?address={{user.email}}" target="_blank">
                            {{user.email |truncatechars:30}}
                        </a>
                    </td>
                    <td class="border-r-2 px-2 flex gap-4 text-2xl">

                        <section class="status">

                            <button onclick="openModal('modelConfirm{{user.id}}')" class="">
                                {% if user.is_active %}

                                <!-- &checkmark; -->
                                <i class='bx bxs-toggle-right text-green-600'></i>
                                {% else %}
                                <i class='bx bxs-toggle-left text-red-600'></i>
                                <!-- &Cross; -->


                                {% endif %}
                            </button>

                            <div id="modelConfirm{{user.id}}"
                                class="fixed hidden z-50 inset-0 bg-gray-900 bg-opacity-60 overflow-y-auto h-full w-full px-4 ">
                                <div class="relative top-40 mx-auto shadow-xl rounded-md bg-white max-w-md">

                                    <div class="flex justify-end p-2">
                                        <button onclick="closeModal('modelConfirm{{user.id}}')" type="button"
                                            class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center">
                                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"
                                                xmlns="http://www.w3.org/2000/svg">
                                                <path fill-rule="evenodd"
                                                    d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                                                    clip-rule="evenodd"></path>
                                            </svg>
                                        </button>
                                    </div>

                                    <div class="p-6 pt-0 text-center">
                                        <svg class="w-20 h-20 text-red-600 mx-auto" fill="none" stroke="currentColor"
                                            viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                        </svg>
                                        <h3 class="text-xl font-normal text-gray-500 mt-5 mb-6">
                                            {% if user.is_active %}

                                            Are you sure you want to
                                            deactivate this user?
                                            {% else %}
                                            Are you sure you want to
                                            activate this user?
                                            {% endif %}

                                        </h3>

                                        <form method="post">
                                            {% csrf_token %}
                                            <input type="number" name="id" value="{{user.id}}" hidden>

                                            <button type="submit"
                                                class="text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-base inline-flex items-center px-3 py-2.5 text-center mr-2">
                                                Yes, I'm sure
                                            </button>

                                            <a href="#" onclick="closeModal('modelConfirm{{user.id}}')"
                                                class="text-gray-900 bg-white hover:bg-gray-100 focus:ring-4 focus:ring-cyan-200 border border-gray-200 font-medium inline-flex items-center rounded-lg text-base px-6 py-2.5 text-center"
                                                data-modal-toggle="delete-user-modal">
                                                Cancel
                                            </a>

                                        </form>


                                    </div>

                                </div>
                            </div>
                        </section>

                        <section class="Password">
                            <button onclick="openModal('modelPassUpdate{{user.id}}')">
                                <i class='bx bxs-edit text-indigo-700'></i>
                            </button>

                            <div id="modelPassUpdate{{user.id}}"
                                class="fixed hidden z-50 inset-0 bg-gray-900 bg-opacity-60 overflow-y-auto h-full w-full px-4 ">
                                <div class="relative top-40 mx-auto shadow-xl rounded-md bg-white max-w-md">

                                    <div class="flex justify-end p-2">
                                        <button onclick="closeModal('modelPassUpdate{{user.id}}')" type="button"
                                            class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center">
                                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"
                                                xmlns="http://www.w3.org/2000/svg">
                                                <path fill-rule="evenodd"
                                                    d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                                                    clip-rule="evenodd"></path>
                                            </svg>
                                        </button>
                                    </div>

                                    <div class="p-6 pt-0 text-center">


                                        <form method="post">
                                            {% csrf_token %}
                                            <h1 class="text-xl mb-2">Update Password for <b>

                                                    {{user}}
                                                </b>
                                            </h1>
                                            <input type="number" name="id" value="{{user.id}}" hidden>
                                            <input type="text" name="username" value="{{user.username}}">
                                            <input type="password" name="password" id="" class="rounded mb-2"
                                                placeholder="Password">
                                            <input type="password" name="password2" id="" class="rounded mb-2"
                                                placeholder="Re-Type Password">

                                            <div class="flex justify-center gap-2">

                                                <button type="submit"
                                                    class="text-white bg-indigo-900 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-base inline-flex items-center px-3 py-2.5 text-center mr-2">
                                                    Update
                                                </button>

                                                <a href="#" onclick="closeModal('modelPassUpdate{{user.id}}')"
                                                    class="text-white bg-red-600 hover:bg-gray-100 focus:ring-4 focus:ring-cyan-200 border border-gray-200 font-medium inline-flex items-center rounded-lg text-base px-6 py-2.5 text-center"
                                                    data-modal-toggle="delete-user-modal">
                                                    Cancel
                                                </a>
                                            </div>

                                        </form>


                                    </div>

                                </div>
                            </div>
                        </section>


                        <div class="delete">


                            <button onclick="openModal('modelDelete{{user.id}}')" class="">
                                <i class='bx bxs-user-x text-red-600'></i>

                            </button>

                            <div id="modelDelete{{user.id}}"
                                class="fixed hidden z-50 inset-0 bg-gray-900 bg-opacity-60 overflow-y-auto h-full w-full px-4 ">
                                <div class="relative top-40 mx-auto shadow-xl rounded-md bg-white max-w-md">

                                    <div class="flex justify-end p-2">
                                        <button onclick="closeModal('modelDelete{{user.id}}')" type="button"
                                            class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center">
                                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"
                                                xmlns="http://www.w3.org/2000/svg">
                                                <path fill-rule="evenodd"
                                                    d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                                                    clip-rule="evenodd"></path>
                                            </svg>
                                        </button>
                                    </div>

                                    <div class="p-6 pt-0 text-center">
                                        <svg class="w-20 h-20 text-red-600 mx-auto" fill="none" stroke="currentColor"
                                            viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                        </svg>
                                        <h3 class="text-xl font-normal text-gray-500 mt-5 mb-6">

                                            Are you sure you want to
                                            delete this user

                                            <b>
                                                {{user}}
                                            </b>
                                            ?

                                        </h3>

                                        <form method="post">
                                            {% csrf_token %}
                                            <input type="number" name="id" value="{{user.id}}" hidden>
                                            <input type="checkbox" name="delete" checked class="hidden">

                                            <button type="submit"
                                                class="text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-base inline-flex items-center px-3 py-2.5 text-center mr-2">
                                                Yes, I'm sure
                                            </button>

                                            <a href="#" onclick="closeModal('modelDelete{{user.id}}')"
                                                class="text-gray-900 bg-white hover:bg-gray-100 focus:ring-4 focus:ring-cyan-200 border border-gray-200 font-medium inline-flex items-center rounded-lg text-base px-6 py-2.5 text-center"
                                                data-modal-toggle="delete-user-modal">
                                                Cancel
                                            </a>

                                        </form>


                                    </div>

                                </div>
                            </div>

                        </div>


                    </td>
                </tr>
                {% empty %}
                <tr>
                    <td colspan=4 class="text-red-600 text-5xl text-center">No Record Found</td>
                </tr>
                {% endfor %}
            </tbody>

        </table>
    </section>

</main>
{% endblock content %}