@extends('layouts.app')

@section('title', $list->name)

@section('content')
<div class="container py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="text-gradient mb-1">{{ $list->name }}</h1>
            @if($list->description)
                <p class="text-muted mb-0">{{ $list->description }}</p>
            @endif
        </div>
        <div class="btn-group">
            @if(!$list->is_default)
                <a href="{{ route('lists.edit', $list) }}" class="btn btn-outline-secondary">
                    <i class="fas fa-edit me-2"></i>Edit List
                </a>
            @endif
            <a href="{{ route('lists.index') }}" class="btn btn-outline-primary">
                <i class="fas fa-list me-2"></i>All Lists
            </a>
        </div>
    </div>

    @if($games->isEmpty())
        <div class="text-center py-5">
            <i class="fas fa-gamepad fa-3x text-muted mb-3"></i>
            <h3 class="text-muted">No games in this list yet</h3>
            <p class="text-muted">Start adding games to your list!</p>
        </div>
    @else
        <div class="row g-4">
            @foreach($games as $game)
                <div class="col-md-6 col-lg-4">
                    <div class="card bg-dark text-white h-100">
                        <img src="{{ $game->cover_url }}" class="card-img-top" alt="{{ $game->name }}" 
                             style="height: 200px; object-fit: cover;">
                        <div class="card-body">
                            <h5 class="card-title">{{ $game->name }}</h5>
                            <div class="d-flex gap-2 mb-2">
                                @foreach($game->platforms as $platform)
                                    <span class="badge bg-secondary">{{ $platform->name }}</span>
                                @endforeach
                            </div>
                            <div class="d-flex gap-2">
                                @foreach($game->genres as $genre)
                                    <span class="badge bg-primary">{{ $genre->name }}</span>
                                @endforeach
                            </div>
                        </div>
                        <div class="card-footer bg-dark border-top border-secondary">
                            <div class="d-flex justify-content-between align-items-center">
                                <a href="{{ route('games.show', $game) }}" class="btn btn-outline-primary btn-sm">
                                    <i class="fas fa-eye me-1"></i> View Game
                                </a>
                                <form action="{{ route('lists.removeGame', [$list, $game]) }}" method="POST" class="d-inline">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-outline-danger btn-sm">
                                        <i class="fas fa-times me-1"></i> Remove
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        <div class="d-flex justify-content-center mt-4">
            {{ $games->links() }}
        </div>
    @endif
</div>
@endsection