{% load static %}
<div id="chatWidget" class="hidden fixed bg-black bg-opacity-50 inset-0 z-50 h-[100vh]">
    <div
        class="w-[950px] min-h-[500px] h-[80%] bg-white rounded-md border border-gray-200 shadow-xl z-20 right-9 bottom-24 grid grid-cols-3 fixed">

        <!-- LEFT SIDE - CHATS -->
        <div id="osichat-conversations">
            {% include 'chat_templates/conversations.html' %}
        </div>


        <!-- RIGHT SIDE - CONVERSATION -->
        <div class="col-span-2 h-full" id="inner-conversation">

            <!-- INCLUDE VISITORS TABLE -->
            <div class="overflow-x-auto border border-gray-100 tableContainer">
                <table class="min-w-full divide-y">
                    <!-- TABLE HEADER -->
                    <thead class="bg-gray-50">
                        <tr>
                            <th scope="col"
                                class="px-6 py-3 text-sm text-gray-500 uppercase border-r border-gray-100 whitespace-nowrap">
                                User ID
                            </th>
                            <th scope="col"
                                class="px-6 py-3 text-sm text-gray-500 uppercase border-r border-gray-100 whitespace-nowrap">
                                Location
                            </th>
                            <th scope="col"
                                class="px-6 py-3 text-sm text-gray-500 uppercase border-r border-gray-100 whitespace-nowrap">
                                Country
                            </th>
                            <th scope="col"
                                class="px-6 py-3 text-sm text-gray-500 uppercase border-r border-gray-100 whitespace-nowrap">
                                Referrer
                            </th>
                            <th scope="col"
                                class="px-6 py-3 text-sm text-gray-500 uppercase whitespace-nowrap">
                                Duration
                            </th>
                        </tr>
                    </thead>

                    <!-- TABLE BODY -->
                    <tbody class="bg-white divide-y divide-gray-200">
                        <tr>
                            <td class="px-6 py-4 text-center text-sm border-r border-gray-100">
                                <p class="text-secondosiblue">12</p>
                            </td>

                            <td class="px-6 py-4 text-center text-sm border-r border-gray-100">
                                <p class="text-secondosiblue">Jounieh</p>
                            </td>


                            <td class="px-6 py-4 text-center text-sm border-r border-gray-100">
                                <p class="text-secondosiblue">Lebanon</p>
                            </td>

                            <td class="px-6 py-4 text-center text-sm border-r border-gray-100">
                                <p class="text-secondosiblue">3232</p>
                            </td>

                            <td class="px-6 py-4 text-center text-sm">
                                <p class="text-secondosiblue">2
                                </p>
                            </td>
                        </tr>

                        <tr>
                            <td class="px-6 py-4 text-center text-sm border-r border-gray-100">
                                <p class="text-secondosiblue">12</p>
                            </td>

                            <td class="px-6 py-4 text-center text-sm border-r border-gray-100">
                                <p class="text-secondosiblue">Jounieh</p>
                            </td>


                            <td class="px-6 py-4 text-center text-sm border-r border-gray-100">
                                <p class="text-secondosiblue">Lebanon</p>
                            </td>

                            <td class="px-6 py-4 text-center text-sm border-r border-gray-100">
                                <p class="text-secondosiblue">3232</p>
                            </td>

                            <td class="px-6 py-4 text-center text-sm">
                                <p class="text-secondosiblue">2
                                </p>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <!-- END -->
        </div>

    </div>

    <div class="w-[60px] h-[60px] rounded-full shadow-md flex justify-center items-center bg-osiblue fixed bottom-5 right-9 z-30 text-white text-sm border-4 border-white hidden hover:shadow-2xl duration-500 cursor-pointer"
        id="closeChatContainer">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-6 text-white notFilledSvg" fill="none">
            <path d="M19.0005 4.99988L5.00049 18.9999M5.00049 4.99988L19.0005 18.9999" stroke="currentColor"
                stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
        </svg>
    </div>
</div>


<div class="w-fit px-5 py-2 rounded-full shadow-md flex justify-center items-center bg-osiblue fixed bottom-5 right-9 z-30 gap-2 text-white text-sm border-4 border-white hover:shadow-2xl duration-500 cursor-pointer"
    id="openChatContainer">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-6 text-white notFilledSvg" fill="none">
        <path d="M8 13.5H16M8 8.5H12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
            stroke-linejoin="round" />
        <path
            d="M6.09881 19C4.7987 18.8721 3.82475 18.4816 3.17157 17.8284C2 16.6569 2 14.7712 2 11V10.5C2 6.72876 2 4.84315 3.17157 3.67157C4.34315 2.5 6.22876 2.5 10 2.5H14C17.7712 2.5 19.6569 2.5 20.8284 3.67157C22 4.84315 22 6.72876 22 10.5V11C22 14.7712 22 16.6569 20.8284 17.8284C19.6569 19 17.7712 19 14 19C13.4395 19.0125 12.9931 19.0551 12.5546 19.155C11.3562 19.4309 10.2465 20.0441 9.14987 20.5789C7.58729 21.3408 6.806 21.7218 6.31569 21.3651C5.37769 20.6665 6.29454 18.5019 6.5 17.5"
            stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
    </svg>

    <p>Osichat</p>
</div>

<script type="text/javascript" src='{% static "js/osichat-admin/conversation.js" %}'></script>