{% load static %}


<div id="startChatContainer">
    <form
        class="w-[400px] h-[600px] bg-white rounded-md shadow-md z-50 fixed right-5 bottom-24 flex flex-col justify-between"
        id="startChat">

        <div class="">
            <div class="w-full rounded-t-md bg-osiblue flex gap-3 items-center px-5 py-3">
                <img src="{% static 'images/banner-logo.png' %}" class="w-[40px]">
                <p class="text-white">Welcome to Ositcom</p>
            </div>

            <div class="p-5 flex flex-col gap-10">
                <p class="text-gray-500">
                    We are here 24/7/365 to help with sales or support queries. To start your conversation enter your
                    name
                    and mobile number below.
                </p>

                <div class="w-full flex flex-col gap-3">
                    <div class="relative">
                        <div class="absolute left-0 px-3 h-full flex justify-center items-center top-0 text-secondosiblue">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
                              </svg>
                        </div>

                        <input name="guest_name" type="text" placeholder="Name"
                        class="w-full border border-gray-300 pl-11 pr-3 py-3 outline-none rounded-md">
                    </div>


                    <div class="relative">
                        <div class="absolute left-0 px-3 h-full flex justify-center items-center top-0 text-secondosiblue">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                stroke="currentColor" class="w-6">
                                <path stroke-linecap="round" stroke-linejoin="round"
                                    d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 0 0 2.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 0 1-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 0 0-1.091-.852H4.5A2.25 2.25 0 0 0 2.25 4.5v2.25Z" />
                            </svg>
                        </div>
                        <input name="guest_mobile_number" type="tel" placeholder="Mobile Number"
                            class="w-full border border-gray-300 pl-11 pr-3 py-3 outline-none rounded-md">
                    </div>

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

        <div class="p-5">
            <div class="w-full bg-gray-50 rounded-md p-3 flex flex-col gap-1 shadow-md border border-gray-100">
                <p class="text-osiblue font-poppinsBold">We are online</p>

                <p class="text-gray-500 text-sm">Typically replies in a few minutes</p>

                <button type="submit"
                    class="flex px-3 py-2 rounded-md w-fit justify-start items-center gap-1 text-white bg-secondosiblue border border-secondosiblue cursor-pointer hover:bg-transparent hover:text-secondosiblue mt-2 duration-300">
                        Start Conversation
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                        stroke="currentColor" class="w-5">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
                    </svg>
                </button>
            </div>
        </div>
    </form>
</div>