{% load static %}
<!-- RECONNECTING LOADER -->
<div id="roomLoader" class="w-full h-full absolute flex justify-center items-center bg-black bg-opacity-60 z-20 inset-0 rounded-r-md hidden">
    <div class="flex flex-col justify-center items-center gap-2">
        <p class="text-white">Reconneting</p>
        <div class="w-fit flex gap-1 justify-start items-center">
            <div class="h-2 w-2 bg-white rounded-full animate-typing shadow-md"></div>
            <div class="h-2 w-2 bg-white rounded-full animate-typing shadow-md" style="animation-delay: 0.2s;"></div>
            <div class="h-2 w-2 bg-white rounded-full animate-typing shadow-md" style="animation-delay: 0.4s;">
            </div>
        </div>
    </div>
</div>


<div class="w-full h-full flex flex-col justify-between">
    <!-- HEADER -->
    <div class="w-full flex items-center gap-1 py-3 px-3 border-b border-gray-100 text-[17px] text-secondosiblue">
        <div class="w-[30px] h-[30px] rounded-full shadow-md text-white flex justify-center items-center bg-osiblue uppercase text-xs">
            <img class="w-full h-full object-cover rounded-full" src="{{chat_room.chatroomguest.visitor.flag_image_url}}">
        </div>

        <p>{{chat_room.chatroomguest.visitor.name}}</p>
    </div>

    <div class="overflow-y-auto flex flex-col justify-end">
        <!-- MESSAGES -->
        <div class="overflow-y-auto p-3 flex flex-col gap-4" id="messages_container">
            {% for message in chat_room_messages %}
                {% if message.member %}
                    {% if not message.chatmessageattachment %}
                        <div class="w-full flex justify-end">
                            <div
                                class="max-w-[80%] px-4 py-3 rounded-l-3xl rounded-tr-3xl text-white shadow-md text-sm leading-6 bg-opacity-70 bg-osiblue">
                                <p style="white-space: pre-line; overflow-wrap: anywhere;">{{message.content}}</p>
                            </div>
                        </div>
                    {% else %}
                        {% if message.chatmessageattachment.is_image %}
                            <div class="w-full flex justify-end">
                                <div class="max-w-[80%] p-4 rounded-l-3xl rounded-tr-3xl text-white shadow-md text-sm leading-6 bg-opacity-70 bg-osiblue">
                                    <img src="{{domain}}/{{message.chatmessageattachment.attachment}}" class="rounded-md">
                                </div>
                            </div>  
                        {% else %}
                            <div class="w-full flex justify-end">
                                <div class="max-w-[80%] p-4 rounded-l-3xl rounded-tr-3xl text-white shadow-md text-sm leading-6 bg-opacity-70 bg-osiblue">
                                    <div class="w-full flex items-center gap-1">
                                        <div>
                                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-5 text-white notFilledSvg">
                                                <path d="M8 7L16 7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                                <path d="M8 11L12 11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                                <path d="M13 21.5V21C13 18.1716 13 16.7574 13.8787 15.8787C14.7574 15 16.1716 15 19 15H19.5M20 13.3431V10C20 6.22876 20 4.34315 18.8284 3.17157C17.6569 2 15.7712 2 12 2C8.22877 2 6.34315 2 5.17157 3.17157C4 4.34314 4 6.22876 4 10L4 14.5442C4 17.7892 4 19.4117 4.88607 20.5107C5.06508 20.7327 5.26731 20.9349 5.48933 21.1139C6.58831 22 8.21082 22 11.4558 22C12.1614 22 12.5141 22 12.8372 21.886C12.9044 21.8623 12.9702 21.835 13.0345 21.8043C13.3436 21.6564 13.593 21.407 14.0919 20.9081L18.8284 16.1716C19.4065 15.5935 19.6955 15.3045 19.8478 14.9369C20 14.5694 20 14.1606 20 13.3431Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                            </svg>
                                        </div>
                                        <div class="flex flex-col">
                                            <span class="text-xs">{{message.chatmessageattachment.file_name}}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        {% endif %}
                    {% endif %}
                {% else %}
                    <div class="w-full flex items-end justify-start gap-2">
                        <div>
                            <div
                                class="w-[25px] h-[25px] rounded-full shadow-md text-white flex justify-center items-center bg-osiblue uppercase text-xs">
                                <img class="w-full h-full object-cover rounded-full" src="{{chat_room.chatroomguest.visitor.flag_image_url}}">
                            </div>
                        </div>
                        {% if not message.chatmessageattachment %}
                            <div
                                class="max-w-[80%] bg-gray-50 px-4 py-3 rounded-r-3xl rounded-tl-3xl text-secondosiblue text-sm leading-6 bg-opacity-50 shadow-md border border-gray-100">
                                <p style="white-space: pre-line; overflow-wrap: anywhere;">{{message.content}}</p>
                            </div>
                        {% else %}
                            {% if message.chatmessageattachment.is_image %}
                                <div
                                class="max-w-[80%] bg-gray-50 p-4 rounded-r-3xl rounded-tl-3xl text-secondosiblue text-sm leading-6 bg-opacity-50 shadow-md border border-gray-100">
                                        <img src="{{domain}}/{{message.chatmessageattachment.attachment}}" class="rounded-md">
                                </div>
                            {% else %}
                                <div
                                    class="max-w-[80%]  bg-gray-50 p-4 rounded-r-3xl rounded-tl-3xl text-secondosiblue text-sm leading-6 bg-opacity-50 shadow-md border border-gray-100">
                                    <div class="w-full flex items-center gap-1">
                                        <div>
                                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-5 text-secondosiblue notFilledSvg">
                                                <path d="M8 7L16 7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                                <path d="M8 11L12 11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                                <path d="M13 21.5V21C13 18.1716 13 16.7574 13.8787 15.8787C14.7574 15 16.1716 15 19 15H19.5M20 13.3431V10C20 6.22876 20 4.34315 18.8284 3.17157C17.6569 2 15.7712 2 12 2C8.22877 2 6.34315 2 5.17157 3.17157C4 4.34314 4 6.22876 4 10L4 14.5442C4 17.7892 4 19.4117 4.88607 20.5107C5.06508 20.7327 5.26731 20.9349 5.48933 21.1139C6.58831 22 8.21082 22 11.4558 22C12.1614 22 12.5141 22 12.8372 21.886C12.9044 21.8623 12.9702 21.835 13.0345 21.8043C13.3436 21.6564 13.593 21.407 14.0919 20.9081L18.8284 16.1716C19.4065 15.5935 19.6955 15.3045 19.8478 14.9369C20 14.5694 20 14.1606 20 13.3431Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                            </svg>
                                        </div>
                                        <div class="flex flex-col">
                                            <span class="text-xs">{{message.chatmessageattachment.file_name}}</span>
                                        </div>
                                    </div>
                                </div>
                            {% endif %}
                        {% endif %}
                    </div>
                {% endif %}
            {% endfor %}

           
        </div>

        <!-- INPUT FORM -->
        <form class="px-5 pb-5 bg-transparent relative" id="sendMessage">
            {% csrf_token %}
            <div class="w-full bg-white h-fit rounded-md border border-gray-200 flex items-center justify-between">
                <textarea name="message" id="dynamicTextarea" placeholder="Write your message..."
                    class="w-full outline-none p-3 resize-none h-[50px] max-h-[200px] duration-500"></textarea>
                <div class="h-full right-0 top-0 px-3 flex items-center gap-2 text-osiblue">
                    <div class="relative">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                            stroke="currentColor" class="w-5 notFilledSvg cursor-pointer" id="svgFileUpload">
                            <path stroke-linecap="round" stroke-linejoin="round"
                                d="m18.375 12.739-7.693 7.693a4.5 4.5 0 0 1-6.364-6.364l10.94-10.94A3 3 0 1 1 19.5 7.372L8.552 18.32m.009-.01-.01.01m5.699-9.941-7.81 7.81a1.5 1.5 0 0 0 2.112 2.13" />
                        </svg>
                        <input type="file" id="fileupload" name="" placeholder="Select file" multiple class="hidden">
                        <select id="filePathInput" name="filePath" multiple hidden></select>
                    </div>
                    <button type="submit" id="submitMessageButton" class="hidden">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                            stroke="currentColor" class="w-5 notFilledSvg">
                            <path stroke-linecap="round" stroke-linejoin="round"
                                d="M6 12 3.269 3.125A59.769 59.769 0 0 1 21.485 12 59.768 59.768 0 0 1 3.27 20.875L5.999 12Zm0 0h7.5" />
                        </svg>
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>