89 lines
3.3 KiB
PHP
89 lines
3.3 KiB
PHP
@extends('layouts.app')
|
||
@php use Illuminate\Support\Str; @endphp
|
||
|
||
@section('title', $list->title . ' — LoreKeepers')
|
||
|
||
@section('content')
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
|
||
|
||
{{-- Header --}}
|
||
<div class="flex items-start justify-between mb-2">
|
||
<div>
|
||
<div class="flex items-center gap-2 mb-1">
|
||
<a href="{{ route('users.show', ['user' => $list->user->slug]) }}" class="text-sm text-slate-500 hover:text-slate-300 transition-colors">
|
||
{{ $list->user->slug ?? $list->user->name }}
|
||
</a>
|
||
@if(!$list->is_public)
|
||
<span class="text-xs text-slate-500 bg-[#16161d] px-2 py-0.5 rounded border border-white/10">Private</span>
|
||
@endif
|
||
</div>
|
||
<h1 class="text-2xl font-bold text-white">{{ $list->title }}</h1>
|
||
</div>
|
||
@auth
|
||
@if(auth()->id() === $list->user_id)
|
||
<form method="POST" action="{{ route('lists.destroy', $list) }}" onsubmit="return confirm('Delete this list and remove all its games?')">
|
||
@csrf @method('DELETE')
|
||
<button type="submit" class="text-sm text-red-400 hover:text-red-300 transition-colors">Delete List</button>
|
||
</form>
|
||
@endif
|
||
@endauth
|
||
</div>
|
||
|
||
@if($list->description)
|
||
<p class="text-slate-400 mb-8 max-w-2xl">{{ $list->description }}</p>
|
||
@else
|
||
<div class="mb-8"></div>
|
||
@endif
|
||
|
||
<p class="text-sm text-slate-500 mb-6">{{ $list->listGames->count() }} {{ Str::plural('game', $list->listGames->count()) }}</p>
|
||
|
||
@if($list->listGames->isEmpty())
|
||
<div class="text-center py-16">
|
||
<p class="text-slate-500">No games in this list yet.</p>
|
||
@auth
|
||
@if(auth()->id() === $list->user_id)
|
||
<p class="text-sm text-slate-600 mt-2">
|
||
Browse <a href="{{ route('games.index') }}" class="text-purple-400 hover:text-purple-300 transition-colors">games</a>
|
||
and use "Add to List" to add them here.
|
||
</p>
|
||
@endif
|
||
@endauth
|
||
</div>
|
||
@else
|
||
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
|
||
@foreach($list->listGames as $entry)
|
||
<div class="group relative">
|
||
<x-game-card :game="$entry->game" />
|
||
@auth
|
||
@if(auth()->id() === $list->user_id)
|
||
<button onclick="removeGameFromList('{{ $list->slug }}', '{{ $entry->game->slug }}', this)"
|
||
class="absolute top-2 right-2 w-6 h-6 bg-red-600 hover:bg-red-700 text-white rounded-full text-xs font-bold opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center leading-none">
|
||
×
|
||
</button>
|
||
@endif
|
||
@endauth
|
||
</div>
|
||
@endforeach
|
||
</div>
|
||
@endif
|
||
|
||
</div>
|
||
|
||
@push('scripts')
|
||
<script>
|
||
function removeGameFromList(listSlug, gameSlug, btn) {
|
||
if (!confirm('Remove from list?')) return;
|
||
fetch(`/lists/${listSlug}/games/${gameSlug}`, {
|
||
method: 'DELETE',
|
||
headers: {
|
||
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
|
||
'Accept': 'application/json',
|
||
},
|
||
}).then(r => {
|
||
if (r.ok) btn.closest('.group').remove();
|
||
});
|
||
}
|
||
</script>
|
||
@endpush
|
||
@endsection
|