@extends('layouts.app')

@section('title', ($user->slug ?? $user->name) . "'s Library — GameLog")

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">

    <div class="flex items-center justify-between mb-8">
        <div>
            <h1 class="text-2xl font-bold text-white">
                <a href="{{ route('users.show', $user->slug) }}" class="hover:text-purple-400 transition-colors">
                    {{ $user->slug ?? $user->name }}
                </a>'s Library
            </h1>
        </div>
    </div>

    {{-- Status Tabs --}}
    <div class="flex flex-wrap gap-2 mb-8 border-b border-white/5 pb-4">
        @php
            $tabs = ['' => 'All', 'playing' => 'Playing', 'played' => 'Played', 'want_to_play' => 'Want to Play', 'on_hold' => 'On Hold', 'dropped' => 'Dropped'];
        @endphp
        @foreach($tabs as $tabStatus => $tabLabel)
            <a href="{{ route('users.library', ['user' => $user->slug, 'status' => $tabStatus ?: null]) }}"
               class="px-4 py-2 rounded-lg text-sm font-medium transition-colors
                      {{ $status === $tabStatus || (!$status && !$tabStatus)
                         ? 'bg-purple-600 text-white'
                         : 'text-slate-400 hover:text-slate-200 hover:bg-white/5' }}">
                {{ $tabLabel }}
            </a>
        @endforeach
    </div>

    @if($entries->isEmpty())
        <div class="text-center py-24 text-slate-500">
            <p class="text-lg">No games here yet.</p>
        </div>
    @else
        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
            @foreach($entries as $entry)
                <x-game-card :game="$entry->game" />
            @endforeach
        </div>
        <div class="mt-8">{{ $entries->links() }}</div>
    @endif

</div>
@endsection