<div {{ attributes }} class="w-full max-w-sm min-w-[200px]">
    <div class="relative">
        <form>
            <input
                    data-model="term"
                    class="w-full bg-transparent
                          placeholder:text-slate-200 text-gray-50
                         text-sm border-b border-orange-500 pl-3 pr-28 py-2 transition
                         duration-300 ease focus:outline-none focus:border-orange-400 hover:border-orange-300
                         shadow-sm focus:shadow"
                    placeholder="{{ placeholder ?? 'TV Show, Movie...' }}"
            />

            <twig:ux:icon name="codex:loader" height="20" width="20" data-loading-icon-target="icon" data-loading="removeClass(hidden)" class="absolute top-2 right-16 text-orange-500 hidden text-end" />

            <button
                    class="absolute top-1 right-1 flex items-center
                    bg-green-600 py-1 px-2  text-center
                    text-md text-white transition-all
                    focus:bg-green-700 active:bg-green-700 hover:bg-green-700

                    text-white bg-green-600 text-xs
                    rounded-ms bg-opacity-80
"
                    onclick="return false;"
            >
                Search
            </button>
        </form>
    </div>
</div>