@extends('layouts.admin')
@section('title', 'Blog')
@section('page_title', 'Blog')

@section('content')

<div class="flex justify-end mb-6">
    <a href="{{ route('admin.blog.create') }}" class="inline-flex items-center gap-2 btn-gold text-navy-dark font-display font-bold text-sm px-4 py-2.5 rounded-xl shadow-md hover:brightness-105 transition-all">
        <x-icon name="plus" class="w-4 h-4" /> Nouvel article
    </a>
</div>

<div class="bg-white rounded-2xl border border-gray-100 overflow-hidden">
    @forelse($posts as $post)
        <div class="flex items-center justify-between gap-4 px-5 py-4 border-b border-gray-50 last:border-0">
            <div class="flex items-center gap-3 min-w-0">
                <div class="w-12 h-9 rounded-lg bg-navy/5 overflow-hidden shrink-0">
                    @if($post->cover_image)<img src="{{ Storage::url($post->cover_image) }}" class="w-full h-full object-cover">@endif
                </div>
                <div class="min-w-0">
                    <p class="font-bold text-sm text-navy-dark truncate">{{ $post->title }}</p>
                    <p class="text-xs text-gray-400 truncate">{{ $post->author->name ?? '—' }}</p>
                </div>
                @if($post->published_at)
                    <span class="text-[10px] font-bold px-2 py-0.5 rounded-full bg-emerald-50 text-emerald-600 shrink-0">Publié</span>
                @else
                    <span class="text-[10px] font-bold px-2 py-0.5 rounded-full bg-gray-100 text-gray-500 shrink-0">Brouillon</span>
                @endif
            </div>
            <div class="flex items-center gap-1 shrink-0">
                <a href="{{ route('admin.blog.edit', $post) }}" class="p-2 text-gray-400 hover:text-navy rounded-lg hover:bg-gray-50"><x-icon name="pencil" class="w-4 h-4" /></a>
                <form method="POST" action="{{ route('admin.blog.destroy', $post) }}" onsubmit="return confirm('Supprimer cet article ?');">
                    @csrf @method('DELETE')
                    <button class="p-2 text-gray-400 hover:text-rose-600 rounded-lg hover:bg-rose-50"><x-icon name="trash" class="w-4 h-4" /></button>
                </form>
            </div>
        </div>
    @empty
        <p class="text-center text-gray-400 py-10">Aucun article pour l'instant.</p>
    @endforelse
</div>

@endsection