{{--
    Tag Not Found — Contextual 404
    Shown at /tag/:slug when slug not in DB.

    Variables:
    $requestedSlug  string
    $similarTags    Collection  (max 10)
    $trendingTags   Collection  (max 10)
--}}
@extends('errors._layout', [
    'error_code'    => 404,
    'error_title'   => 'Tag Not Found',
    'error_message' => 'The tag "' . ($requestedSlug ?? '') . '" doesn\'t exist yet.',
])

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

@section('primary-cta')
<a href="/tags"
   class="inline-flex items-center gap-2 rounded-xl bg-sky-500 hover:bg-sky-400 text-white font-semibold px-6 py-3 text-sm shadow-lg shadow-sky-900/30 transition-colors">
    <i class="fas fa-tags" aria-hidden="true"></i>
    Browse All Tags
</a>
@endsection

@section('secondary-ctas')
<a href="/discover/trending" 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">
    Trending
</a>
<a href="/search" 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-search mr-1.5" aria-hidden="true"></i> Search
</a>
@endsection

@section('recovery')

{{-- Similar tags --}}
@if(isset($similarTags) && $similarTags->count())
<div class="mb-10">
    <h2 class="text-sm font-semibold text-white/40 uppercase tracking-widest mb-4">Similar Tags</h2>
    <div class="flex flex-wrap gap-2">
        @foreach($similarTags->take(10) as $tag)
        <a href="/tag/{{ $tag->slug }}"
           class="rounded-full bg-sky-500/10 hover:bg-sky-500/20 border border-sky-500/20 hover:border-sky-500/40 text-sky-300 hover:text-sky-200 px-3 py-1 text-xs font-medium transition-colors">
            #{{ $tag->name }}
            @if($tag->artworks_count ?? null)
            <span class="text-sky-400/60 ml-1">{{ number_format($tag->artworks_count) }}</span>
            @endif
        </a>
        @endforeach
    </div>
</div>
@endif

{{-- Trending tags --}}
@if(isset($trendingTags) && $trendingTags->count())
<div>
    <h2 class="text-sm font-semibold text-white/40 uppercase tracking-widest mb-4">Popular Tags</h2>
    <div class="flex flex-wrap gap-2">
        @foreach($trendingTags->take(10) as $tag)
        <a href="/tag/{{ $tag->slug }}"
           class="rounded-full bg-white/5 hover:bg-sky-500/20 border border-white/8 hover:border-sky-500/30 text-white/70 hover:text-sky-300 px-3 py-1 text-xs font-medium transition-colors">
            #{{ $tag->name }}
        </a>
        @endforeach
    </div>
</div>
@endif

@endsection
