{{--
    Public Knowledge Base Tag Page
    ===============================
    Displays all questions with a specific tag.
    
    Features:
    - Tag header
    - Filterable question list
    - Related tags
    
    Layout: Site Layout (public)
--}}
<x-site-layout 
    title="{{ 'Tag: ' . $tag . ' - Knowledge Base' }}"
    meta-description="Questions tagged with {{ $tag }} in our knowledge base"
>
    {{-- Hero Section --}}
    <div class="bg-gradient-to-r from-blue-600 to-blue-700 shadow-lg">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
            
            {{-- Tag Header --}}
            <div class="flex items-center mb-4">
                <div class="w-14 h-14 rounded-xl bg-white bg-opacity-20 flex items-center justify-center mr-4">
                    <i class="fas fa-tag text-white text-2xl"></i>
                </div>
                <div>
                    <h1 class="text-3xl font-bold text-white">{{ $tag }}</h1>
                    <p class="text-blue-100">Questions tagged with "{{ $tag }}"</p>
                </div>
            </div>
            
            {{-- Stats --}}
            <div class="bg-white bg-opacity-20 backdrop-blur-sm rounded-lg px-4 py-2 inline-block">
                <span class="text-blue-100 text-sm">Questions</span>
                <p class="text-white text-xl font-bold">{{ number_format($questions->total()) }}</p>
            </div>
        </div>
    </div>

    {{-- Breadcrumb --}}
    <div class="bg-gray-50 border-b border-gray-200">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3">
            <nav class="flex items-center space-x-2 text-sm text-gray-600" aria-label="Breadcrumb">
                <a href="{{ url('/') }}" class="hover:text-blue-600 transition flex items-center">
                    <i class="fas fa-home mr-1"></i>Home
                </a>
                <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
                <a href="{{ route('public.knowledge-base.index') }}" class="hover:text-blue-600 transition">Knowledge Base</a>
                <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
                <span class="text-gray-900 font-medium">Tag: {{ $tag }}</span>
            </nav>
        </div>
    </div>

    {{-- Main Content --}}
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
            
            {{-- Main Content --}}
            <div class="lg:col-span-3">
                
                {{-- Filter Bar --}}
                <div class="bg-theme-card rounded-lg shadow-sm p-4 mb-6">
                    <div class="flex flex-wrap gap-2">
                        <a href="{{ route('public.knowledge-base.tag', ['tag' => $tag, 'sort' => 'recent']) }}" 
                           class="px-4 py-2 rounded-lg {{ request('sort', 'recent') === 'recent' ? 'bg-blue-600 text-white' : 'bg-theme-body text-theme-body hover:bg-opacity-80' }} transition">
                            <i class="fas fa-clock mr-2"></i>
                            Recent
                        </a>
                        <a href="{{ route('public.knowledge-base.tag', ['tag' => $tag, 'sort' => 'popular']) }}" 
                           class="px-4 py-2 rounded-lg {{ request('sort') === 'popular' ? 'bg-blue-600 text-white' : 'bg-theme-body text-theme-body hover:bg-opacity-80' }} transition">
                            <i class="fas fa-fire mr-2"></i>
                            Popular
                        </a>
                        <a href="{{ route('public.knowledge-base.tag', ['tag' => $tag, 'sort' => 'helpful']) }}" 
                           class="px-4 py-2 rounded-lg {{ request('sort') === 'helpful' ? 'bg-blue-600 text-white' : 'bg-theme-body text-theme-body hover:bg-opacity-80' }} transition">
                            <i class="fas fa-thumbs-up mr-2"></i>
                            Most Helpful
                        </a>
                    </div>
                </div>
                
                {{-- Questions List --}}
                <div class="space-y-4">
                    @forelse($questions as $question)
                        @include('public.knowledge-base.partials.question-card', ['question' => $question])
                    @empty
                        <div class="bg-theme-card rounded-lg shadow-sm p-8 text-center">
                            <i class="fas fa-tag text-4xl text-gray-300 mb-4"></i>
                            <h3 class="text-lg font-medium text-theme-heading mb-2">No questions with this tag</h3>
                            <p class="text-theme-body mb-4">
                                There are no questions tagged with "{{ $tag }}" yet.
                            </p>
                            <a href="{{ route('public.knowledge-base.index') }}" 
                               class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
                                <i class="fas fa-list mr-2"></i>
                                Browse All Questions
                            </a>
                        </div>
                    @endforelse
                </div>
                
                {{-- Pagination --}}
                @if($questions->hasPages())
                    <div class="mt-6">
                        {{ $questions->links() }}
                    </div>
                @endif
            </div>
            
            {{-- Sidebar --}}
            <div class="lg:col-span-1 space-y-6">
                
                {{-- Categories Sidebar --}}
                <div class="bg-theme-card rounded-lg shadow-sm overflow-hidden">
                    <div class="bg-gradient-to-r from-blue-600 to-blue-700 px-4 py-3">
                        <h3 class="text-lg font-semibold text-white flex items-center">
                            <i class="fas fa-folder mr-2"></i>
                            Categories
                        </h3>
                    </div>
                    <ul class="divide-y theme-divider">
                        @foreach($categories as $category)
                            <li>
                                <a href="{{ route('public.knowledge-base.category', $category->slug) }}" 
                                   class="flex items-center justify-between p-3 hover:bg-theme-body transition">
                                    <span class="flex items-center">
                                        <i class="fas {{ $category->icon ?? 'fa-folder' }} {{ $category->color ? "text-{$category->color}-500" : 'text-blue-500' }} mr-2"></i>
                                        {{ $category->name }}
                                    </span>
                                    <span class="text-xs bg-theme-body px-2 py-1 rounded-full text-theme-body">
                                        {{ $category->questions_count ?? 0 }}
                                    </span>
                                </a>
                            </li>
                        @endforeach
                    </ul>
                </div>
                
                {{-- Related Tags --}}
                <div class="bg-theme-card rounded-lg shadow-sm p-4">
                    <h3 class="text-lg font-semibold text-theme-heading mb-3 flex items-center">
                        <i class="fas fa-tags text-blue-600 mr-2"></i>
                        Related Tags
                    </h3>
                    <div class="flex flex-wrap gap-2">
                        @foreach($tags as $tagName => $count)
                            @if($tagName !== $tag && $count > 0)
                                <a href="{{ route('public.knowledge-base.tag', $tagName) }}" 
                                   class="px-3 py-1 bg-theme-body text-theme-body rounded-full text-sm hover:bg-blue-100 hover:text-blue-700 transition">
                                    {{ $tagName }}
                                    <span class="text-xs text-gray-400 ml-1">{{ $count }}</span>
                                </a>
                            @endif
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-site-layout>
