movie-night-nuevo/resources/views/livewire/movie-list.blade.php

<div class=" text-white pt-10 flex flex-col gap-5">
    <div class="flex flex-row justify-between items-center mx-2 sm:mx-0">
        <h1 class="text-2xl sm:text-3xl font-bold">{{$list->name}}</h1>

        @can('delete', $list)
            <button type="button" wire:click="toggleSettings"
                    class="hover:bg-blue-600 cursor-pointer text-white px-4 py-2 rounded">
                <i class="fas fa-cog text-2xl"></i>
            </button>
        @endcan
    </div>

    <div>
        <livewire:search-panel :list-id="$list->id"/>
        <livewire:movie-details-panel/>
    </div>

    <x-ui.card class="overflow-hidden min-h-screen">

        <div class="relative w-full overflow-hidden">
            <div class="flex transition-transform duration-300 ease-in-out"
                 style="transform: translateX({{ $showSettings ? '-100%' : '0' }})">

                <!-- Movie List View -->
                <div class="w-full flex-shrink-0 flex flex-col gap-5">
                    <div class="flex flex-col-reverse sm:flex-row gap-5 sm:gap-0 justify-between w-full">
                        <div>
                            <input class="flex bg-white p-2 rounded w-full sm:w-100" type="text"
                                   placeholder="Filter movies"
                                   wire:model.live="filterText"
                                   wire:keyup="filterMovies"/>
                        </div>

                        @can("update", $list)
                        <hr class="my-2 sm:my-0"/>
                        <button wire:click="$dispatch('openSearch')"
                                class="bg-green-500 text-white p-2 rounded">
                            Add Movie
                        </button>
                        @endcan
                    </div>
                    @if(!$filteredMovies->isEmpty())
                        <ul class="grid grid-cols-2 sm:grid-cols-4 gap-5">
                            @foreach ($filteredMovies as $movie)
                                <li>
                                    <x-movie :movie="$movie"/>
                                </li>
                            @endforeach
                        </ul>
                    @else
                        <div class="flex flex-col items-center justify-center  my-10">
                            <span class="text-center p-5 font-bold text-2xl">"You complete me."</span>
                            <span class="text-center">Tom Cruise, <i>Jerry Maguire</i></span>
                        </div>
                    @endif
                </div>
                <!-- Settings View -->
                <div class="w-full flex-shrink-0 flex flex-col gap-5">
                    <div class="flex justify-between items-center">
                        <button wire:click="toggleSettings" class="text-white hover:text-gray-300">
                            ← Back to List
                        </button>
                        <h2 class="text-xl font-semibold">Settings</h2>
                    </div>

                    <div class="flex flex-col gap-2 w-full p-5 bg-gray-700">
                        <label for="list-name" class="font-bold">List Name</label>
                        <div class="flex flex-row">
                            <input type="text" wire:model.live="settingsForm.name" id="list-name"
                                   class="w-full p-2 rounded rounded-r-none bg-white"/>
                            <button class="bg-green-500 p-2 rounded-r" type="submit" wire:click="saveSettings">Save
                            </button>
                        </div>
                    </div>
                    <div
                        class="flex items-center justify-between bg-gray-700 hover:opacity-85 p-5 rounded">
                        <label for="is_public" class="text-white font-bold cursor-pointer">Make list public</label>
                        <input type="checkbox"
                               id="is_public"
                               wire:model.live="settingsForm.isPublic"
                               class="w-5 h-5 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500">
                    </div>


                    <div class="p-5 flex flex-col gap-5 bg-gray-700 rounded">
                        <span class="font-bold">Collaborators</span>
                        <details class="hover:cursor-pointer bg-gray-600 p-5 rounded">
                            <ul class="flex flex-col gap-2 py-2">
                                <li><span class="font-bold">Viewer</span>: Can view the list, but cannot make any changes.</li>
                                <li><span class="font-bold">Editor</span>: Can add/remove movies from the list.</li>
                                <li><span class="font-bold">Admin</span>: Can make any changes to the list including deleting it. Can also invite other users to collaborate on this list.</li>
                            </ul>

                        </details>
                        <ul>
                            <li class="flex justify-between ">
                                <span>Bob</span>
                                <select>
                                    <option value="view">Viewer</option>
                                    <option value="edit">Editor</option>
                                    <option value="admin">Admin</option>
                                </select>
                            </li>
                        </ul>
                    </div>

                    <div class="p-5 flex flex-col gap-3 bg-gray-700 rounded">
                        <span class="font-bold">Invite collaborators</span>
                        <span class="hover:cursor-pointer">Enter a comma separated list of emails.</span>
                        <textarea class="bg-white rounded text-black p-2" placeholder="user1@example.com, user2@example.com, user3@example.com"></textarea>
                        <button type="button" class="p-2 rounded bg-green-500">Send Invites</button>
                    </div>


                    @can('delete', $list)
                    <div
                        class="flex items-center justify-between bg-gray-700 p-5 rounded">
                        <label for="delete_list" class="text-white cursor-pointer">Delete List</label>
                        <button name="delete_list"
                                type="button"
                                class="bg-red-500 p-2 rounded font-bold"
                                wire:click="deleteList"
                                wire:confirm="Are you sure you want to delete this list?"
                        >
                            Delete List
                        </button>
                    </div>
                @endcan
                </div>
            </div>
        </div>
    </x-ui.card>

</div>