<?php
if ( ! defined( 'ABSPATH' ) ) exit;
?>
<section id="proprety-search" class="mx-auto px-5">
<div class="<?php echo esc_attr( $container ); ?>">
        <div class="rounded-lg bg-white mt-5 md:mt-12 shadow">

            <div class="flex p-3 md:p-8 md:px-6 flex-col md:flex-row md:gap-2">

                <div class="grow">
                    <div class="w-full h-full flex items-center gap-1 mb-5 md:mb-0" data-test="search-autocomplete">
                        <button class="text-gray-300 !bg-transparent !border-0 flex items-center max-w-12 max-h-12 !p-0" type="button">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" class="h-6 w-6"><title>Search</title><circle cx="14.116" cy="10.337" r="7.587" stroke="currentColor" stroke-width="1.5"></circle><path stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M8.453 15.38L3 20.88"></path></svg>
                        </button>
                        <div class="flex flex-wrap gap-1 overflow-auto grow">
                            <input type="text" class="text-base placeholder-gray-300 !bg-white !border-0 !outline-0 !focus:outline-none h-10 grow" placeholder="Start typing a location"/>
                        </div>
                    </div>
                    <div class="flex flex-col gap-2 pb-3 md:flex-row md:pb-0 hidden" data-test="search-byregion">

                        <div class="relative w-full md:w-1/3">
                            <select class="block h-12 appearance-none w-full bg-white border border-gray-300 text-gray-700 py-2 px-4 pr-8 rounded leading-tight focus:outline-none focus:border-blue-700 cursor-pointer">
                                <option>Option 1</option>
                                <option>Option 2</option>
                                <option>Option 3</option>
                            </select>
                            <!-- Down arrow icon -->
                            <div class="absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none">
                                <svg class="w-4 h-4 text-gray-700" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                                <path d="M5.23 7.21a.75.75 0 011.06 0L10 10.88l3.71-3.67a.75.75 0 111.06 1.06l-4.24 4.24a.75.75 0 01-1.06 0L5.23 8.27a.75.75 0 010-1.06z"/>
                                </svg>
                            </div>
                        </div>

                        <div class="relative w-full md:w-1/3">
                            <select class="block h-12 appearance-none w-full bg-white border border-gray-300 text-gray-700 py-2 px-4 pr-8 rounded leading-tight focus:outline-none focus:border-blue-700 cursor-pointer">
                                <option>Option 1</option>
                                <option>Option 2</option>
                                <option>Option 3</option>
                            </select>
                            <!-- Down arrow icon -->
                            <div class="absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none">
                                <svg class="w-4 h-4 text-gray-700" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                                <path d="M5.23 7.21a.75.75 0 011.06 0L10 10.88l3.71-3.67a.75.75 0 111.06 1.06l-4.24 4.24a.75.75 0 01-1.06 0L5.23 8.27a.75.75 0 010-1.06z"/>
                                </svg>
                            </div>
                        </div>

                        <div class="relative w-full md:w-1/3">
                            <select class="block h-12 appearance-none w-full bg-white border border-gray-300 text-gray-700 py-2 px-4 pr-8 rounded leading-tight focus:outline-none focus:border-blue-700 cursor-pointer">
                                <option>Option 1</option>
                                <option>Option 2</option>
                                <option>Option 3</option>
                            </select>
                            <!-- Down arrow icon -->
                            <div class="absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none">
                                <svg class="w-4 h-4 text-gray-700" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                                <path d="M5.23 7.21a.75.75 0 011.06 0L10 10.88l3.71-3.67a.75.75 0 111.06 1.06l-4.24 4.24a.75.75 0 01-1.06 0L5.23 8.27a.75.75 0 010-1.06z"/>
                                </svg>
                            </div>
                        </div>

                    </div>
                </div>

                <div class="bg-gray-200 w-px shrink-0 grow-0" data-test="search-autocomplete-divider"></div>

                <div class="grow-0">
                <div class="flex gap-2 h-12">
                    <button type="button" class="ipp-secondary-button hidden md:block border-solid focus:outline-none font-semibold text-sm text-center cursor-pointer transition-all duration-300">Price</button>
                    <button type="button" class="ipp-secondary-button hidden md:block border-solid focus:outline-none font-semibold text-sm text-center cursor-pointer transition-all duration-300">Beds</button>
                    <button type="button" class="ipp-secondary-button grow justify-center border-solid focus:outline-none font-semibold text-sm inline-flex items-center gap-2 text-center cursor-pointer transition-all duration-300">
                        <div>
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" class="skip-stroke-inherit group-hover:fill-current"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5" d="M23 3.75h-9.9m-7.7 0H1m4.4 0a2.75 2.75 0 115.5 0 2.75 2.75 0 01-5.5 0zM23 20.25H12m-7.7 0H1m3.3 0a2.75 2.75 0 115.5 0 2.75 2.75 0 01-5.5 0zM23 12h-3.3m-8.8 0H1m14.85 2.75a2.75 2.75 0 100-5.5 2.75 2.75 0 000 5.5z"></path></svg>
                        </div>
                        Filters
                    </button>
                    </div>
                </div>

            </div>
            <div class="border-gray-200 border-0 border-t border-solid p-3 px-3 md:p-5 md:px-6">
                <div class="flex">
                    <label class="relative inline-flex items-center cursor-pointer" data-test="search__mode-switch">
                        <span class="pr-2  cursor-pointer select-none text-sm">
                            Search by region &gt; district &gt; suburb
                        </span>
                        <div class="relative inline-flex items-center">
                            <input type="checkbox" id="search__mode-switch" class="sr-only peer">
                            <div class="w-10 h-5 bg-gray-300 rounded-full peer-focus:outline-none peer-focus:ring-0 peer-focus:ring-0 peer-checked:primary transition-colors duration-300"></div>
                            <span class="absolute left-0 w-5 h-5 bg-white rounded-full transform transition-transform duration-300 peer-checked:translate-x-5"></span>
                        </div>
                    </label>
                </div>
            </div>

















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