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

<div class="mt-5 w-full mx-auto flex flex-col gap-5">
    <h1 class="font-bold text-3xl mx-2 sm:mx-0">Lists</h1>
    <x-ui.card>
        <div class="w-full flex flex-col gap-2">
            @if ($errors->any())
                <div class="alert alert-danger">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li class="text-red-500">{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <form class="flex flex-col max-w-lg gap-2" wire:submit.prevent="addList">
                <label class="font-bold" for="list_name">Add List</label>
                <div class="flex">
                    <input name="list_name" placeholder="List Name"
                           class="flex-1 w-full text-black bg-white p-2 rounded rounded-r-none"
                           type="text"
                           wire:model.live="form.name">
                    <button type="submit" class="bg-green-400 text-white px-4 py-2 rounded rounded-l-none">Add</button>
                </div>
            </form>
        </div>

        <div class="w-full flex flex-col gap-5">
            <h2 class="text-2xl font-bold">Your Lists</h2>
            @if(!$lists->isEmpty())
                <ul class="w-full flex flex-col gap-3">
                    @foreach($lists as $list)
                        <li class="flex justify-between items-center p-4 bg-gray-700/50 rounded-lg hover:bg-gray-600/50 transition-colors">
                            <a class="text-xl hover:text-amber-200 transition-colors" href="/lists/{{$list->id}}" wire:navigate>{{$list->name}}</a>
                            @if((bool)$list->is_public === true)
                                <i class="fa fa-earth text-green-400" title="Public" aria-label="Public"></i>
                            @else
                                <i class="fa fa-lock text-gray-400" title="Private" aria-label="Private"></i>
                            @endif
                        </li>
                    @endforeach
                </ul>
            @else
                <span class="text-gray-400">No lists found.</span>
            @endif
        </div>

        <div class="w-full flex flex-col gap-5">
            <h2 class="text-2xl font-bold">Shared With You</h2>
            @if(!$sharedLists->isEmpty())
                <ul class="w-full flex flex-col gap-3">
                    @foreach($sharedLists as $list)
                        <li class="flex justify-between items-center p-4 bg-gray-700/50 rounded-lg hover:bg-gray-600/50 transition-colors">
                            <a class="text-xl hover:text-amber-200 transition-colors" href="/lists/{{$list->id}}" wire:navigate>{{$list->name}}</a>
                            @if((bool)$list->is_public === true)
                                <i class="fa fa-earth text-green-400" title="Public" aria-label="Public"></i>
                            @else
                                <i class="fa fa-lock text-gray-400" title="Private" aria-label="Private"></i>
                            @endif
                        </li>
                    @endforeach
                </ul>
            @else
                <span class="text-gray-400">No lists found.</span>
            @endif
        </div>
    </x-ui.card>
</div>