@extends('layouts.nova')

@section('content')
    <div class="container mx-auto py-8">
        <h1 class="text-2xl font-semibold mb-1">My Awards</h1>
        <p class="text-sm text-soft mb-6">Artworks of yours that have received awards from the community.</p>

        @if($artworks->isEmpty())
            <div class="flex flex-col items-center justify-center py-20 text-center">
                <i class="fa-solid fa-trophy text-4xl text-sb-muted mb-4"></i>
                <p class="text-soft">None of your artworks have received awards yet.</p>
                <a href="/browse" class="mt-4 text-sm text-accent hover:underline">Browse artworks for inspiration</a>
            </div>
        @else
            <section data-nova-gallery data-gallery-type="dashboard-awards">
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6" data-gallery-grid>
                    @foreach($artworks as $art)
                        <div class="relative gallery-item">
                            <x-artwork-card :art="$art" />
                            @php $stat = $art->awardStat @endphp
                            @if($stat && ($stat->gold_count + $stat->silver_count + $stat->bronze_count) > 0)
                            <div class="absolute left-2 top-2 z-40 flex gap-1 text-xs font-bold">
                                @if($stat->gold_count)   <span class="rounded px-1.5 py-0.5 bg-yellow-500/80 text-black">🥇 {{ $stat->gold_count }}</span> @endif
                                @if($stat->silver_count) <span class="rounded px-1.5 py-0.5 bg-neutral-400/80 text-black">🥈 {{ $stat->silver_count }}</span> @endif
                                @if($stat->bronze_count) <span class="rounded px-1.5 py-0.5 bg-amber-700/80 text-white">🥉 {{ $stat->bronze_count }}</span> @endif
                            </div>
                            @endif
                        </div>
                    @endforeach
                </div>

                <div class="mt-6" data-gallery-pagination>{{ $artworks->links() }}</div>
                <div class="hidden" data-gallery-skeleton-template aria-hidden="true">
                    <x-skeleton.artwork-card />
                </div>
                <div class="hidden mt-8" data-gallery-skeleton></div>
            </section>
        @endif
    </div>
@endsection