{{--
    Creator Not Found — Contextual 404
    Shown at /@:username when user doesn't exist.

    Variables:
    $requestedUsername  string|null
    $trendingCreators   Collection  (max 6)
    $recentCreators     Collection  (max 6)
--}}
@extends('errors._layout', [
    'error_code'    => 404,
    'error_title'   => 'Creator Not Found',
    'error_message' => isset($requestedUsername)
        ? 'The creator "@' . $requestedUsername . '" does not exist on Skinbase.'
        : 'This creator profile does not exist.',
])

@section('badge', 'Creator Not Found')

@section('primary-cta')
{{-- Inline creator search --}}
<form action="/search" method="GET" class="flex items-center gap-2 w-full max-w-sm mx-auto mb-2">
    <input
        type="text"
        name="q"
        placeholder="Search for a creator…"
        value="{{ isset($requestedUsername) ? '@'.$requestedUsername : '' }}"
        class="flex-1 rounded-xl bg-white/8 border border-white/12 focus:border-sky-500/50 focus:ring-0 text-sm text-white placeholder-white/30 px-4 py-2.5 outline-none transition-colors"
    />
    <button type="submit"
        class="rounded-xl bg-sky-500 hover:bg-sky-400 text-white px-4 py-2.5 text-sm font-semibold transition-colors shrink-0">
        <i class="fas fa-search" aria-hidden="true"></i>
    </button>
</form>
@endsection

@section('secondary-ctas')
<a href="/creators/top" class="rounded-xl border border-white/10 hover:border-white/25 text-white/70 hover:text-white px-4 py-2 text-sm transition-colors">
    <i class="fas fa-trophy mr-1.5" aria-hidden="true"></i> Top Creators
</a>
<a href="/register" class="rounded-xl border border-white/10 hover:border-white/25 text-white/70 hover:text-white px-4 py-2 text-sm transition-colors">
    <i class="fas fa-star mr-1.5" aria-hidden="true"></i> Join Skinbase
</a>
@endsection

@section('recovery')

{{-- Trending creators --}}
@if(isset($trendingCreators) && $trendingCreators->count())
<div class="mb-12">
    <h2 class="text-sm font-semibold text-white/40 uppercase tracking-widest mb-4">Top Creators</h2>
    <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-4">
        @foreach($trendingCreators->take(6) as $creator)
        <a href="{{ $creator['url'] }}"
           class="flex flex-col items-center gap-2 rounded-xl p-4 bg-white/3 hover:bg-white/7 border border-white/5 hover:border-sky-500/20 transition-all text-center group">
            <img src="{{ $creator['avatar_url'] }}"
                 alt="{{ $creator['name'] }}"
                 loading="lazy"
                 class="w-14 h-14 rounded-full object-cover ring-2 ring-white/10 group-hover:ring-sky-500/30 transition-all"
                 onerror="this.src='https://files.skinbase.org/default/avatar_default.webp'" />
            <div>
                <p class="text-sm font-semibold text-white truncate max-w-[100px]">{{ $creator['name'] }}</p>
                <p class="text-xs text-white/40">{{ $creator['artworks_count'] }} uploads</p>
            </div>
        </a>
        @endforeach
    </div>
</div>
@endif

{{-- Recently joined creators --}}
@if(isset($recentCreators) && $recentCreators->count())
<div>
    <h2 class="text-sm font-semibold text-white/40 uppercase tracking-widest mb-4">Recently Joined</h2>
    <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-4">
        @foreach($recentCreators->take(6) as $creator)
        <a href="{{ $creator['url'] }}"
           class="flex flex-col items-center gap-2 rounded-xl p-4 bg-white/3 hover:bg-white/7 border border-white/5 hover:border-sky-500/20 transition-all text-center group">
            <img src="{{ $creator['avatar_url'] }}"
                 alt="{{ $creator['name'] }}"
                 loading="lazy"
                 class="w-14 h-14 rounded-full object-cover ring-2 ring-white/10 group-hover:ring-sky-500/30 transition-all"
                 onerror="this.src='https://files.skinbase.org/default/avatar_default.webp'" />
            <div>
                <p class="text-sm font-semibold text-white truncate max-w-[100px]">{{ $creator['name'] }}</p>
                <p class="text-xs text-white/40">{{ $creator['artworks_count'] }} uploads</p>
            </div>
        </a>
        @endforeach
    </div>
</div>
@endif

@endsection