@extends('layouts.app')
@section('content')
    <section class="max-w-7xl mx-auto px-4 py-10">
        <!-- Breadcrumb -->
        <div class="flex flex-col lg:flex-row gap-6">
            <!-- Main Articles -->
            <div class="lg:w-2/3 flex flex-col gap-4">
                <!-- Tabs + Search -->
                <div class="w-full max-w-5xl mx-auto mt-8">
                    <div class="flex items-center justify-center border-b border-gray-300 pb-2">
                        <!-- Tabs -->
                        <h2 id="latest-articles" class="text-2xl font-bold uppercase mt-3">
                            <span class="border-b-4 border-red-600">Trending Topics</span>
                        </h2>
                    </div>

                    <!-- Tab Content -->
                    <div class="mt-4 text-center">
                        @foreach ($tagshash as $tag)
                            <a href="{{ url('/') }}/tags/{{ Str::slug($tag->tag) }}.html">
                                <span
                                    class="inline-flex items-center rounded-md bg-black px-2 py-1 text-md text-white font-bold inset-ring inset-ring-gray-500/10 mt-2">
                                    {{ $tag->tag }}</span>
                            </a>
                        @endforeach
                    </div>
                </div>
            </div>

            <!-- Sidebar -->
            @include('article.rightsidebar')

        </div>
    </section>
@endsection