@extends('layouts.nova')

@php($useUnifiedSeo = true)

@push('head')
<link rel="alternate" type="application/rss+xml" title="{{ $tag->name }} Artworks — Skinbase" href="{{ url('/rss/tag/' . $tag->slug) }}">
@endpush

@section('content')
<div class="px-6 py-8 md:px-10">

    {{-- Header --}}
    <div class="mb-6 flex flex-wrap items-start justify-between gap-4">
        <div>
            <div class="flex items-center gap-3 mb-1">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-lg bg-sky-500/15 text-sky-400">
                    <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"/></svg>
                </span>
                <h1 class="text-2xl font-bold text-white">{{ $tag->name }}</h1>
            </div>
            <p class="text-sm text-neutral-400">
                {{ number_format($artworks->total()) }} {{ Str::plural('artwork', $artworks->total()) }}
            </p>
        </div>

        {{-- Sort controls --}}
        <div class="flex items-center gap-2 flex-wrap">
            @foreach(['popular' => 'Most viewed', 'latest' => 'Newest', 'likes' => 'Most liked', 'downloads' => 'Most downloaded'] as $key => $label)
                <a href="{{ route('tags.show', [$tag->slug, 'sort' => $key]) }}"
                   class="px-3 py-1.5 rounded-lg text-xs font-medium transition-colors
                          {{ $sort === $key ? 'bg-sky-500 text-white' : 'bg-white/5 text-neutral-400 hover:bg-white/10 hover:text-white' }}">
                    {{ $label }}
                </a>
            @endforeach
        </div>
    </div>

    {{-- Grid --}}
    @if($artworks->isEmpty())
        <div class="rounded-xl bg-white/[0.03] border border-white/[0.06] p-10 text-center text-neutral-400">
            No artworks found for this tag yet.
        </div>
    @else
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-5">
            @foreach($artworks as $artwork)
                <x-artwork-card :art="$artwork" />
            @endforeach
        </div>

        <div class="flex justify-center mt-10">
            {{ $artworks->appends(['sort' => $sort])->links('pagination::tailwind') }}
        </div>
    @endif

</div>
@endsection
