movie-night-nuevo/resources/views/livewire/search-panel.blade.php

<x-ui.slide-over model="showSearch">
    <form wire:submit="findMovies" class="flex flex-row">
        <div class="mb-5">
            <label for="query">Enter a movie title</label>
            <div class="flex flex-row">
                <input wire:model.live="query" type="text" name="query" class="bg-white p-2 text-black"/>
                <button class="bg-green-400 p-2" type="submit">Search</button>
            </div>
            @error('query') <span class="error text-red-500">{{ $message }}</span> @enderror
        </div>

    </form>
    <ul class="flex flex-col gap-2">
        @foreach ($results as $result)
            <li class="flex flex-row justify-between border border-gray-300 p-2">
                <div class="flex flex-col gap-1">
                    <div class="flex flex-col sm:flex-row gap-1 font-bold">
                        <span>{{ $result['title'] }}</span>
                        <span>({{$result['year']}})</span>
                    </div>
                    <button class="bg-green-400 p-2 rounded w-25 justify-between" type=button
                            wire:click="addMovie(@js($result['imdb_id']))">
                        Add to List
                    </button>
                </div>
                <img class="max-h-20" src="{{$result['poster']}}" alt="poster"/>
            </li>
        @endforeach
    </ul>
</x-ui.slide-over>