<?php require APPROOT . '/app/views/components/header.php'; ?>

<!-- Article container begin -->
<div class="container article-container">
    <div class="article-content">
        <h3>Article</h3>

        <!-- article-post -->
        <div class="container mt-5 article-posts">
            <div class="row align-items-center">
                <!-- Image on Left -->
                <div class="col-md-7 text-center article-img">
                    <img width="100%" src="<?= URLROOT?>/images/article-image/future-of-tech.jpg" alt="Article Image"
                        class="img-fluid ">
                </div>

                <!-- Content on Right -->
                <div class="col-md-5 article-page-content">
                    <span>Featured</span>
                    <h4 class="fw-bold"><?= htmlspecialchars($data['randomArticle']->title)?></h4>
                    <p class="text-muted">
                        <?= htmlspecialchars(shortenText($data['randomArticle']->body, 200))?>.</p>
                    <a href="<?= URLROOT ?>/articles/show/<?= createSlug($data['randomArticle']->title) ?>-<?= $data['randomArticle']->id ?>"
                        class="btn btn-primary mt-3">
                        Read More <i class="fa fa-arrow-right"></i>
                    </a>

                    <!-- Author & Time Section -->
                    <div class="d-flex align-items-center author">
                        <i class="fas fa-user me-2"></i>
                        <div class="author-name">
                            <h6 class="me-3"><?= htmlspecialchars($data['randomArticle']->name) ?></h6>
                            <p class="time"><?= calculateReadTime($data['randomArticle']->body) ?> min
                                read</p>
                        </div>

                    </div>


                </div>
            </div>
        </div>

        <!-- article post end -->

        <!-- All post section begins -->

        <div class="all-posts">
            <div class="container mt-4">
                <div class="row">
                    <?php if (!empty($data['articles'])) : ?>
                    <?php foreach ($data['articles'] as $article) : ?>
                    <div class="col-md-4">
                        <div class="card shadow-sm articles" data-aos="fade-up" data-aos-duration="1000">
                            <div class="card-body articles-content">
                                <div class="article-image">
                                    <img src="<?= htmlspecialchars($article->image) ?>" alt="image">
                                </div>
                                <div class="article-contents">
                                    <h4><?= htmlspecialchars($article->title) ?></h4>
                                    <p><?= htmlspecialchars(shortenText($article->body, 150)) ?></p>
                                </div>
                                <a
                                    href="
                                        <?= URLROOT ?>/articles/show/<?= createSlug($article->title) ?>-<?= $article->id ?>">Explore
                                    More <i class="fa fa-arrow-right"></i></a>
                            </div>
                        </div>
                    </div>
                    <?php endforeach; ?>
                    <?php else : ?>
                    <p>No articles found.</p>
                    <?php endif; ?>

                    <!-- end article -->

                    <!-- recommended polls -->

                </div>
                <div style="text-align: center; margin-top: 10px;">
                    <hr>
                    <nav>
                        <ul class="pagination justify-content-center">
                            <?php for ($i = 1; $i <= $data['totalPages']; $i++): ?>
                            <li class="page-item <?= $data['page'] == $i ? 'active' : '' ?>">
                                <a class="" href="<?=URLROOT?>/articles?page=<?= $i ?>"><?= $i ?></a>
                            </li>
                            <?php endfor; ?>
                        </ul>
                    </nav>

                </div>
            </div>
        </div>

    </div>
</div>



<!-- footer -->
<?php require APPROOT . '/app/views/components/footer.php'; ?>