{% load static %}

<div class="w-full h-full md:h-[450px] lg:h-[550px] bg-white rounded-b-none md:rounded-b-md">
    <form class="h-full flex flex-col justify-between" id="startChat">
        <div class="">
            <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-3">
            <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 class="w-full rounded-b-md px-3 pt-3 flex justify-center items-center gap-1 bg-white">
                <img src="http://192.168.1.106:8000/static/images/ositcom_logos/ositcom(o).png" class="w-[20px]">
    
                <p class="text-xs text-secondosiblue">Osichat 2.0 by <a href="https://ositcom.com/" target="_blank"
                        class="hover:text-gray-400 duration-500">Ositcom</a></p>
            </div>
        </div>
    </form>
</div>