<div {{ attributes }} class="w-full max-w-sm min-w-[200px]">
    <div class="relative">
        <form id="search" action="{{ path('app_search') }}">
            <select
                    {{ stimulus_controller('search_bar')|stimulus_controller('symfony/ux-autocomplete/autocomplete', {
                        url: path('api_tmdb_ajax_search'),
                        create: false,
                        tomSelectOptions: {
                            highlight: false,
                        }
                    }) }}
                    id="term"
                    name="term"
                    class="w-full bg-orange-500 rounded-md bg-clip-padding backdrop-filter
                         backdrop-blur-md bg-opacity-40 placeholder:text-slate-200 text-gray-50
                         text-sm border border-orange-500 rounded-md pl-3 pr-28 py-0 transition
                         duration-300 ease focus:outline-none focus:border-orange-400 hover:border-orange-300
                         shadow-sm focus:shadow ts-search z-40"
                    placeholder="TV Show, Movie..."
            >
            </select>
            <button
                    id="search-button"
                    class="absolute top-1 right-1 flex items-center rounded
                    bg-green-600 py-1 px-2.5 border border-transparent text-center
                    text-sm text-white transition-all
                    focus:bg-green-700 active:bg-green-700 hover:bg-green-700

                    text-white bg-green-600 text-sm
                    border border-green-500
                    backdrop-filter backdrop-blur-md bg-opacity-80 z-40
"
                    type="submit"
            >
                Search
            </button>
        </form>
    </div>
</div>