<?php
include __DIR__ . '/layout/header.php';
?>

<div class="container mx-auto px-4 py-8">
    <!-- Breadcrumbs -->
    <nav class="flex mb-4" aria-label="Breadcrumb">
        <ol class="inline-flex items-center space-x-1 md:space-x-3">
            <li class="inline-flex items-center">
                <a href="/" class="text-gray-400 hover:text-white transition-colors">
                    <i class="fas fa-home mr-2"></i>Home
                </a>
            </li>
            <li aria-current="page" class="breadcrumb-item">
                <div class="flex items-center">
                    <i class="fas fa-chevron-right text-gray-400 mx-2 text-xs"></i>
                    <span class="text-white font-medium breadcrumb-text-last">Blog</span>
                </div>
            </li>
        </ol>
    </nav>

    <header class="mb-12 text-center">
        <h1 class="text-4xl font-bold mb-4">Blog</h1>
        <p class="text-xl text-gray-300 max-w-3xl mx-auto">Stay updated with the latest gaming news, tips, and updates from our team.</p>
    </header>

    <!-- Blog Page Ad -->
    <?php if (isset($settings['enable_ads']) && $settings['enable_ads'] == '1' && isset($settings['blog_page_ad']) && !empty($settings['blog_page_ad'])): ?>
    <div class="ad-container blog-page-ad mb-8">
        <?= $settings['blog_page_ad'] ?>
    </div>
    <?php endif; ?>

    <?php if (empty($posts)): ?>
    <div class="bg-card-bg p-8 rounded-xl text-center border border-gray-800/50">
        <i class="fas fa-blog text-5xl text-gray-500 mb-4"></i>
        <h2 class="text-2xl font-semibold mb-2">No Blog Posts Yet</h2>
        <p class="text-gray-400">Check back soon for new content!</p>
    </div>
    <?php else: ?>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        <?php foreach ($posts as $post): ?>
        <article class="bg-card-bg rounded-xl overflow-hidden hover:shadow-hover transition-all duration-300 border border-gray-800/50 hover:border-primary/50">
            <a href="/blog/<?= $post['slug'] ?>">
                <?php if (!empty($post['featured_image'])): ?>
                <div class="aspect-video overflow-hidden">
                    <img src="<?= htmlspecialchars($post['featured_image']) ?>" alt="<?= htmlspecialchars($post['title']) ?>"
                         class="w-full h-full object-cover transition-transform duration-500 hover:scale-110" loading="lazy">
                </div>
                <?php endif; ?>
                <div class="p-6">
                    <h2 class="text-xl font-semibold mb-3 group-hover:text-primary transition-colors"><?= htmlspecialchars($post['title']) ?></h2>
                    <div class="text-gray-400 text-sm mb-4">
                        <span class="flex items-center">
                            <i class="far fa-calendar-alt mr-2"></i>
                            <?= date('M j, Y', strtotime($post['created_at'])) ?>
                        </span>
                        <?php if (!empty($post['tags'])): ?>
                        <div class="flex flex-wrap gap-2 mt-2">
                            <?php
                            $tags = explode(',', $post['tags']);
                            foreach ($tags as $tag):
                            ?>
                            <span class="bg-sidebar-bg px-2 py-1 rounded-full text-xs hover:bg-primary/20 transition-colors">
                                <i class="fas fa-tag mr-1"></i><?= htmlspecialchars(trim($tag)) ?>
                            </span>
                            <?php endforeach; ?>
                        </div>
                        <?php endif; ?>
                    </div>
                    <div class="text-gray-300 mb-4 line-clamp-3 prose prose-invert prose-sm">
                        <?= substr(strip_tags($post['content']), 0, 200) ?>...
                    </div>
                    <div class="flex justify-end">
                        <span class="inline-flex items-center text-primary hover:text-white transition-colors">
                            Read more
                            <i class="fas fa-arrow-right ml-2"></i>
                        </span>
                    </div>
                </div>
            </a>
        </article>
        <?php endforeach; ?>
    </div>

    <?php if (isset($totalPages) && $totalPages > 1): ?>
    <div class="mt-12 flex justify-center">
        <div class="inline-flex rounded-md shadow-sm">
            <?php if ($page > 1): ?>
            <a href="/blog?page=<?= $page - 1 ?>" class="px-4 py-2 text-sm font-medium text-white bg-card-bg rounded-l-lg hover:bg-card-hover border border-gray-800/50 hover:border-primary/50 transition-all">
                <i class="fas fa-chevron-left mr-2"></i>Previous
            </a>
            <?php endif; ?>

            <?php for ($i = 1; $i <= $totalPages; $i++): ?>
            <a href="/blog?page=<?= $i ?>" class="px-4 py-2 text-sm font-medium <?= $i === $page ? 'bg-primary text-white' : 'bg-card-bg text-white hover:bg-card-hover' ?> border border-gray-800/50 hover:border-primary/50 transition-all <?= $i === 1 ? ($page === 1 ? 'rounded-l-lg' : '') : ($i === $totalPages ? 'rounded-r-lg' : '') ?>">
                <?= $i ?>
            </a>
            <?php endfor; ?>

            <?php if ($page < $totalPages): ?>
            <a href="/blog?page=<?= $page + 1 ?>" class="px-4 py-2 text-sm font-medium text-white bg-card-bg rounded-r-lg hover:bg-card-hover border border-gray-800/50 hover:border-primary/50 transition-all">
                Next<i class="fas fa-chevron-right ml-2"></i>
            </a>
            <?php endif; ?>
        </div>
    </div>
    <?php endif; ?>
    <?php endif; ?>
</div>

<?php include __DIR__ . '/layout/footer.php'; ?>