<?= $this->extend($viewsPath . '/layout'); ?>
<?= $this->section('content'); ?>

<section class="section section-page">
    <div class="container-xl">
        <div class="row">
            <div class="col-12">
                <div class="section-title">
                    <h1 class="title">Web Stories</h1>
                </div>
            </div>
            
            <div class="col-12">
                <div class="row g-4">
                    <?php if (!empty($stories)): ?>
                        <?php foreach ($stories as $story): 
                            $imgUrl = strpos($story->cover_image, 'http') === 0 ? $story->cover_image : base_url($story->cover_image);
                        ?>
                        <div class="col-6 col-md-4 col-lg-3">
                            <div class="card border-0 shadow-sm rounded-4 overflow-hidden position-relative" style="aspect-ratio: 9/16; background: #000;">
                                <a href="<?= langBaseUrl('web-stories/' . $story->slug); ?>" class="text-decoration-none d-block w-100 h-100">
                                    <img src="<?= esc($imgUrl); ?>" alt="<?= esc($story->title); ?>" class="w-100 h-100" style="object-fit: cover; opacity: 0.85; transition: 0.3s;">
                                    
                                    <div class="position-absolute bottom-0 start-0 w-100 p-3" style="background: linear-gradient(to top, rgba(0,0,0,0.95), transparent);">
                                        <div class="badge bg-primary mb-2"><?= trans("web_story") ?? 'Story'; ?></div>
                                        <h3 class="text-white fs-6 fw-bold mb-0" style="line-height: 1.4;">
                                            <?= esc(character_limiter($story->title, 55)); ?>
                                        </h3>
                                    </div>
                                </a>
                            </div>
                        </div>
                        <?php endforeach; ?>
                    <?php else: ?>
                        <div class="col-12 text-center text-muted py-5">
                            <p><?= trans("no_records_found"); ?></p>
                        </div>
                    <?php endif; ?>
                </div>

                <!-- Pagination -->
                <?php if (isset($pager) && $pager->getPageCount() > 1): ?>
                    <div class="d-flex justify-content-center mt-5">
                        <?= $pager->links(); ?>
                    </div>
                <?php endif; ?>
            </div>
        </div>
    </div>
</section>

<?= $this->endSection(); ?>