@extends('layouts.admin')
@section('content')
    <div class="mb-6 flex flex-wrap items-center justify-between gap-3">
        <h2
            class="text-xl font-semibold text-gray-800 dark:text-white/90"
        >Gérer les publications</h2>

        <nav>
            <ol class="flex items-center gap-1.5">
                <li>
                    <a href="{{ route('admin.blog.create') }}"
                        class="inline-flex items-center gap-2 px-4 py-3 text-sm font-medium text-white transition rounded-lg bg-brand-500 shadow-theme-xs hover:bg-brand-600"
                    >
                        Créer une publication
                    </a>
                </li>
            </ol>
        </nav>
    </div>

    <div class="space-y-6">
        <x-admin.messages />

        <div
            class="overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]"
        >
            <div class="max-w-full overflow-x-auto">
                <table class="min-w-full">
                    <!-- table header start -->
                    <thead>
                    <tr class="border-b border-gray-100 dark:border-gray-800">
                        <th class="px-5 py-3 sm:px-6">
                            <div class="flex items-center">
                                <p
                                    class="font-medium text-gray-500 text-theme-xs dark:text-gray-400"
                                >
                                    Titre
                                </p>
                            </div>
                        </th>
                        <th class="px-5 py-3 sm:px-6">
                            <div class="flex items-center">
                                <p
                                    class="font-medium text-gray-500 text-theme-xs dark:text-gray-400"
                                >
                                    État
                                </p>
                            </div>
                        </th>
                        <th class="px-5 py-3 sm:px-6">
                            <div class="flex items-center">
                                <p
                                    class="font-medium text-gray-500 text-theme-xs dark:text-gray-400"
                                >
                                    Date de création
                                </p>
                            </div>
                        </th>
                    </tr>
                    </thead>
                    <!-- table header end -->
                    <!-- table body start -->
                    <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
                    @forelse($posts as $post)
                        <tr>
                            <td class="px-5 py-4 sm:px-6">
                                <div class="flex items-center">
                                    <a href="{{ route('admin.blog.edit', ['id' => $post->id]) }}" class="text-blue-light-500 text-theme-sm dark:text-blue-500">
                                        {{ $post->title }}
                                    </a>
                                </div>
                            </td>
                            <td class="px-5 py-4 sm:px-6">
                                <div class="flex items-center">
                                    @if($post->status === "published")
                                        <p
                                            class="rounded-full bg-success-50 px-2 py-0.5 text-theme-xs font-medium text-success-700 dark:bg-success-500/15 dark:text-success-500"
                                        >
                                            Publié
                                        </p>
                                    @elseif($post->status === "draft")
                                        <span
                                            class="inline-flex items-center justify-center gap-1 rounded-full bg-warning-50 px-2.5 py-0.5 text-theme-xs font-medium text-warning-600 dark:bg-warning-500/15 dark:text-orange-400"
                                        >
    Brouillon
  </span>
                                    @endif
                                </div>
                            </td>
                            <td class="px-5 py-4 sm:px-6">
                                <div class="flex items-center">
                                    <div class="flex -space-x-2">
                                        <p class="text-gray-500 text-theme-sm dark:text-gray-400">
                                            {{ $post->created_at->format('d/m/Y H:i') }}
                                        </p>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="3" class="px-5 py-4 sm:px-6"><p class="text-center dark:text-white">Aucune publication à afficher.</p></td>
                        </tr>
                    @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection