@extends('theme-News::layouts.base')
@section('title', $taxonomy->name . ' — ' . AleshaSetting::get('site_name', ''))

@section('content')
<div style="max-width:1280px; margin:0 auto; padding:40px 20px 48px;">
    <div style="display:grid; grid-template-columns:1fr 300px; gap:24px;" class="tax-grid">
        <div>
            <div style="margin-bottom:24px; padding-bottom:16px; border-bottom:3px solid var(--news-red); display:flex; align-items:baseline; gap:12px;">
                <span class="category-badge" style="font-size:11px;">{{ ucfirst($taxonomy->type) }}</span>
                <h1 class="news-headline" style="font-size:1.8rem; font-weight:900; color:#111; margin:0;">{{ $taxonomy->name }}</h1>
            </div>
            @if($taxonomy->description)
            <p style="color:#6b7280; margin-bottom:20px; font-size:14px;">{{ $taxonomy->description }}</p>
            @endif

            @if($posts->count())
            <div style="display:flex; flex-direction:column; gap:16px;">
                @foreach($posts as $post)
                @php $cat = $post->taxonomies->where('type','category')->first() @endphp
                <article style="background:#fff; border:1px solid #e5e7eb; border-radius:10px; overflow:hidden; display:flex;" class="tax-article">
                    @if($post->getFirstMedia('featured'))
                    <div style="width:200px; flex-shrink:0; overflow:hidden;" class="tax-article-img">
                        <a href="/{{ $post->content_type }}/{{ $post->slug }}">
                            <img src="{{ $post->getFirstMediaUrl('featured') }}" alt="{{ $post->title }}"
                                 style="width:200px; height:140px; object-fit:cover; display:block; transition:transform 0.3s;"
                                 onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'">
                        </a>
                    </div>
                    @else
                    <div style="width:5px; background:var(--news-red); flex-shrink:0;"></div>
                    @endif
                    <div style="padding:14px 18px; flex:1;">
                        @if($cat && $cat->id !== $taxonomy->id)
                        <a href="/category/{{ $cat->slug }}" class="category-badge" style="font-size:10px; margin-bottom:8px; display:inline-flex; text-decoration:none;">{{ $cat->name }}</a>
                        @endif
                        <a href="/{{ $post->content_type }}/{{ $post->slug }}" style="text-decoration:none;">
                            <h2 class="news-headline news-card-title" style="font-size:1.05rem; margin:6px 0 8px;">{{ $post->title }}</h2>
                        </a>
                        @if($post->excerpt)
                        <p style="font-size:13px; color:#6b7280; margin:0 0 10px; line-height:1.5;">{{ Str::limit($post->excerpt, 120) }}</p>
                        @endif
                        <p class="article-meta">{{ $post->author->name ?? 'Editor' }} · {{ $post->published_at?->format('d M Y') }}</p>
                    </div>
                </article>
                @endforeach
            </div>
            @if($posts->hasPages())
            <div style="margin-top:24px; display:flex; justify-content:center;">{{ $posts->links() }}</div>
            @endif
            @else
            <p style="color:#9ca3af; text-align:center; padding:40px 0;">No articles in this {{ $taxonomy->type }}.</p>
            @endif
        </div>

        @include('theme-News::partials.sidebar-widgets')
    </div>
</div>
<style>
@media (max-width:768px) {
    .tax-grid { grid-template-columns:1fr !important; }
    .tax-article { flex-direction:column !important; }
    .tax-article-img { width:100% !important; }
    .tax-article-img img { width:100% !important; height:200px !important; }
}
</style>
@endsection
