@extends('layouts.app')

@section('title', 'News & Posts')
@section('nav_posts', 'bg-teal-50 text-teal-700 font-semibold')
@section('page_title', 'News & Announcements')
@section('page_subtitle', 'Blog posts shown on the public /news page')

@section('content')

@if(session('success'))
<div class="mb-4 px-4 py-3 bg-green-50 border-[0.5px] border-green-200 rounded-xl text-sm text-green-700">{{ session('success') }}</div>
@endif

<div class="flex items-center justify-between mb-5">
    <p class="text-gray-500 text-sm">{{ $posts->count() }} post{{ $posts->count() !== 1 ? 's' : '' }}</p>
    <a href="{{ route('posts.create') }}" class="inline-flex items-center gap-1.5 bg-teal-600 hover:bg-teal-700 text-white font-semibold text-sm px-4 py-2 rounded-lg transition-colors">
        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
        New Post
    </a>
</div>

@if($posts->isEmpty())
<div class="bg-white border-[0.5px] border-gray-200 rounded-xl px-5 py-12 text-center text-gray-300 text-sm">No posts yet. Write your first one.</div>
@else
<div class="space-y-3">
    @foreach($posts as $post)
    <div class="bg-white border-[0.5px] border-gray-200 rounded-xl p-4 flex items-start gap-4">
        @if($post->cover_image)
        <img src="{{ \Illuminate\Support\Facades\Storage::url($post->cover_image) }}" class="w-24 h-16 object-cover rounded-lg flex-shrink-0 border-[0.5px] border-gray-100">
        @else
        <div class="w-24 h-16 rounded-lg bg-gray-50 flex-shrink-0 flex items-center justify-center text-gray-300"><svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"/></svg></div>
        @endif
        <div class="min-w-0 flex-1">
            <div class="flex items-center gap-2 flex-wrap">
                <span class="font-semibold text-gray-800 text-sm">{{ $post->title }}</span>
                @if($post->status === 'draft')
                <span class="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-semibold border-[0.5px] bg-gray-100 text-gray-500 border-gray-300">Draft</span>
                @elseif($post->isScheduled())
                <span class="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-semibold border-[0.5px] bg-amber-50 text-amber-600 border-amber-200">Scheduled</span>
                @else
                <span class="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-semibold border-[0.5px] bg-green-50 text-green-700 border-green-200">Published</span>
                @endif
                @if($post->category)<span class="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-semibold border-[0.5px] bg-teal-50 text-teal-700 border-teal-200">{{ $post->category }}</span>@endif
            </div>
            @if($post->excerpt)<p class="text-xs text-gray-500 mt-1 line-clamp-1">{{ $post->excerpt }}</p>@endif
            <p class="text-[11px] text-gray-400 mt-1">
                {{ $post->published_at ? $post->published_at->format('M j, Y g:i A') : 'No publish date' }}
                @if($post->author) · by {{ $post->author->name }}@endif
            </p>
        </div>
        <div class="flex items-center gap-3 flex-shrink-0">
            @if($post->status === 'published' && !$post->isScheduled())
            <a href="{{ route('public.news.show', $post->slug) }}" target="_blank" class="text-xs font-medium text-gray-400 hover:text-gray-600">View</a>
            @endif
            <a href="{{ route('translations.edit', ['type' => 'post', 'id' => $post->id]) }}" class="text-xs font-medium text-indigo-600 hover:text-indigo-800">Translate</a>
            <a href="{{ route('posts.edit', $post->id) }}" class="text-xs font-medium text-teal-600 hover:text-teal-800">Edit</a>
            <form method="POST" action="{{ route('posts.destroy', $post->id) }}" data-confirm="Delete this post?" data-danger="true">@csrf @method('DELETE')<button type="submit" class="text-xs font-medium text-red-500 hover:text-red-700">Delete</button></form>
        </div>
    </div>
    @endforeach
</div>
@endif

@endsection