<?php ob_start(); ?>

<article class="blog-article">
    <div class="container container-narrow">
        <?php if (!empty($post['featured_image'])): ?>
        <?= picture_tag($post['featured_image'], $post['title'], 'article-image', false) ?>
        <?php endif; ?>

        <h1 class="article-title"><?= e($post['title']) ?></h1>

        <div class="article-meta">
            <?php if (!empty($post['category_name'])): ?>
            <a href="/blog/category/<?= e($post['category_slug']) ?>" class="article-category"><?= e($post['category_name']) ?></a>
            <?php endif; ?>
            <span><?= e($post['author_name'] ?? '') ?></span>
            <span><?= format_date($post['published_at'] ?? $post['created_at']) ?></span>
            <?php if (!empty($reading_time)): ?>
            <span class="article-reading-time"><?= render_icon('clock', 14) ?> <?= (int) $reading_time ?> <?= __('theme.reading_time_min') ?></span>
            <?php endif; ?>
        </div>

        <?php if (!empty($toc)): ?>
        <nav class="article-toc" aria-label="<?= __('theme.toc_title') ?>">
            <div class="article-toc-title"><?= render_icon('list', 16) ?> <?= __('theme.toc_title') ?></div>
            <ol class="article-toc-list">
                <?php foreach ($toc as $heading): ?>
                <li class="toc-level-<?= (int) $heading['level'] ?>"><a href="#<?= e($heading['id']) ?>"><?= e($heading['text']) ?></a></li>
                <?php endforeach; ?>
            </ol>
        </nav>
        <?php endif; ?>

        <?php if (!empty($sections)): ?>
        </div><!-- close container-narrow for full-width sections -->
        <?= render_section_assets($sections, 'head') ?>
        <?php foreach ($sections as $_s): ?>
            <?php if (!$_s['is_active']) continue; ?>
            <?= render_page_section($_s, $sections) ?>
        <?php endforeach; ?>
        <?= render_section_assets($sections, 'footer') ?>
        <div class="container container-narrow">
        <?php else: ?>
        <div class="article-content">
            <?= $post['content'] ?? '' ?>
        </div>
        <?php endif; ?>

        <?php if (!empty($related_posts)): ?>
        <div class="article-related">
            <h3 class="article-related-title"><?= __('theme.related_posts_title') ?></h3>
            <div class="related-posts-grid">
                <?php foreach ($related_posts as $rp): ?>
                <a href="/blog/<?= e($rp['slug']) ?>" class="related-post-card">
                    <?php if (!empty($rp['featured_image'])): ?>
                    <div class="related-post-img-wrap"><?= picture_tag($rp['featured_image'], e($rp['title']), 'related-post-img', false) ?></div>
                    <?php endif; ?>
                    <div class="related-post-body">
                        <span class="related-post-date"><?= format_date($rp['published_at'] ?? $rp['created_at']) ?></span>
                        <h4><?= e($rp['title']) ?></h4>
                    </div>
                </a>
                <?php endforeach; ?>
            </div>
        </div>
        <?php endif; ?>

        <div class="article-footer">
            <a href="/blog" class="btn btn-secondary">&larr; Back to Blog</a>
        </div>
    </div>
</article>

<?php $content = ob_get_clean(); include __DIR__ . '/layout.php'; ?>
