<div>
    <form wire:submit.prevent="search" class="relative">
        <input
            type="text"
            wire:model="query"
            class="w-full max-w-xs sm:max-w-[480px] mx-auto rounded-md text-zinc-400 border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-800 px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
            placeholder="Search..."
            autocomplete="off"
        />
        <button type="submit" class="absolute right-3 top-2.5 text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-200" wire:loading.attr="disabled">
            <span wire:loading.remove wire:target="search">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
            </span>
            <span wire:loading wire:target="search">
                <svg class="w-5 h-5 animate-spin" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"></path>
                </svg>
            </span>
        </button>
    </form>
</div>
<?php /**PATH /Users/buchin/Repos/dracin-git/resources/views/livewire/search-bar.blade.php ENDPATH**/ ?>