{% load static %}
<p id="userId" class="hidden">{{request.user.id}}</p>
<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="widgetLeftSide" class="h-full overflow-y-auto border-r border-gray-200 bg-gray-50">
        </div>

        <!-- RIGHT SIDE -->
        <div class="col-span-2 overflow-hidden" id="widgetRightSide">
        </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>


<!---------------------- JS SCRIPTS -------------------->
<script type="text/javascript" src='{% static "js/osichat-admin/inner-conversation.js" %}'></script>
<script type="text/javascript" src='{% static "js/osichat-admin/chat-toggle.js" %}'></script>