<?php require_once __DIR__ . '/_sidebar.php'; ?>
<main class="flex-1 py-16 md:py-0 md:pl-64">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 md:py-16">
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-8">
            <div>
                <h1 class="text-2xl font-bold text-slate-900">Blog Posts</h1>
                <p class="text-sm text-slate-500 mt-1">Manage blog articles and insights.</p>
            </div>
            <a href="<?= htmlspecialchars($baseUrl) ?>/admin/blog/create" class="inline-flex items-center gap-2 px-5 py-2.5 rounded-full bg-gradient-to-r from-[#FF007A] to-[#D87AA8] text-white text-sm font-semibold shadow-lg shadow-[#FF007A]/20 hover:shadow-xl hover:shadow-[#FF007A]/40 hover:-translate-y-0.5 transition-all duration-300">
                <span class="material-symbols-outlined text-base">add</span>
                New Post
            </a>
        </div>

        <div class="bg-white rounded-3xl border border-slate-200 shadow-sm overflow-hidden">
            <div class="overflow-x-auto">
                <table class="w-full text-left text-sm">
                    <thead class="bg-slate-50 border-b border-slate-200">
                        <tr>
                            <th class="px-6 py-4 font-semibold text-slate-900">Title</th>
                            <th class="px-6 py-4 font-semibold text-slate-900">Slug</th>
                            <th class="px-6 py-4 font-semibold text-slate-900">Status</th>
                            <th class="px-6 py-4 font-semibold text-slate-900">Published</th>
                            <th class="px-6 py-4 font-semibold text-slate-900 text-right">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100">
                        <?php if (empty($posts)): ?>
                            <tr>
                                <td colspan="5" class="px-6 py-10 text-center text-slate-500">No blog posts yet. Create your first post.</td>
                            </tr>
                        <?php else: ?>
                            <?php foreach ($posts as $post): ?>
                            <tr class="hover:bg-slate-50/60 transition-colors">
                                <td class="px-6 py-4">
                                    <div class="font-semibold text-slate-900"><?= htmlspecialchars($post['title']) ?></div>
                                </td>
                                <td class="px-6 py-4 text-slate-500"><?= htmlspecialchars($post['slug']) ?></td>
                                <td class="px-6 py-4">
                                    <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium <?= $post['status'] === 'published' ? 'bg-green-50 text-green-700' : 'bg-amber-50 text-amber-700' ?>">
                                        <?= htmlspecialchars(ucfirst($post['status'])) ?>
                                    </span>
                                </td>
                                <td class="px-6 py-4 text-slate-500"><?= $post['published_at'] ? date('M j, Y', strtotime($post['published_at'])) : '—' ?></td>
                                <td class="px-6 py-4 text-right">
                                    <div class="flex items-center justify-end gap-2">
                                        <a href="<?= htmlspecialchars($baseUrl) ?>/admin/blog/edit?id=<?= (int)$post['id'] ?>" class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-slate-100 text-slate-700 hover:bg-slate-200 transition text-xs font-medium">
                                            <span class="material-symbols-outlined text-sm">edit</span>
                                            Edit
                                        </a>
                                        <form method="post" action="<?= htmlspecialchars($baseUrl) ?>/admin/blog/delete" class="inline" onsubmit="return confirm('Delete this blog post?');">
                                            <?= CSRF::input() ?>
                                            <input type="hidden" name="id" value="<?= (int)$post['id'] ?>">
                                            <button type="submit" class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-rose-50 text-rose-700 hover:bg-rose-100 transition text-xs font-medium">
                                                <span class="material-symbols-outlined text-sm">delete</span>
                                                Delete
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                            <?php endforeach; ?>
                        <?php endif; ?>
                    </tbody>
                </table>
        </div>
    </div>
</main>
</div>
