{% 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>
    <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">Status
                        <div class="text-xs">( Active & Deactive)</div>
                    </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 pl-2">


                        <button onclick="openModal('modelConfirm')">
                            {% if user.is_active %}
                            <span class="text-white bg-green-900 rounded-full text-xl px-4">

                                &checkmark;
                            </span>
                            {% else %}
                            <span class="text-white bg-red-900 rounded-full text-xl px-4">
                                &Cross;
                            </span>


                            {% endif %}
                        </button>

                        <div id="modelConfirm"
                            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')" 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')"
                                            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>

                        <script type="text/javascript">
                            window.openModal = function (modalId) {
                                document.getElementById(modalId).style.display = 'block'
                                document.getElementsByTagName('body')[0].classList.add('overflow-y-hidden')
                            }

                            window.closeModal = function (modalId) {
                                document.getElementById(modalId).style.display = 'none'
                                document.getElementsByTagName('body')[0].classList.remove('overflow-y-hidden')
                            }

                            // Close all modals when press ESC
                            document.onkeydown = function (event) {
                                event = event || window.event;
                                if (event.keyCode === 27) {
                                    document.getElementsByTagName('body')[0].classList.remove('overflow-y-hidden')
                                    let modals = document.getElementsByClassName('modal');
                                    Array.prototype.slice.call(modals).forEach(i => {
                                        i.style.display = 'none'
                                    })
                                }
                            };
                        </script>


                    </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 %}