<?php if ($mobile): ?>
    <div style="margin-top: 50px;">
        <div class="slider">
            <table width="100%" style="margin: 0 auto;">
                <tbody>
                    <tr id="slides">
                        <td colspan="2">
                            <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                                <ol class="carousel-indicators">
                                    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                                    <li data-target="#carousel-example-generic" data-slide-to="1" class=""></li>
                                    <li data-target="#carousel-example-generic" data-slide-to="2" class=""></li>
                                    <li data-target="#carousel-example-generic" data-slide-to="3" class=""></li>
                                    <li data-target="#carousel-example-generic" data-slide-to="4" class=""></li>
                                    <li data-target="#carousel-example-generic" data-slide-to="5" class=""></li>
                                </ol>
                                <div class="carousel-inner" role="listbox">
                                    <?php
                                    $promosi = mysqli_query($koneksi, "SELECT * FROM promosi ORDER BY id_promosi DESC");
                                    $no = 0;
                                    while ($row = mysqli_fetch_assoc($promosi)):
                                        $active = ($no === 0) ? 'active' : '';
                                        ?>
                                        <div class="item <?= $active ?>">
                                            <img src="<?= $base_url ?>/asset/img/<?= $row['gambar_promosi'] ?>"
                                                alt="<?= htmlspecialchars($row['judul_promosi']) ?>" style="margin: 0 auto;">
                                            <div class="carousel-caption">
                                            </div>
                                        </div>
                                        <?php
                                        $no++;
                                    endwhile;
                                    ?>
                                </div>

                                <a class="left carousel-control" href="#carousel-example-generic" role="button"
                                    data-slide="prev">
                                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                                    <span class="sr-only">Previous</span>
                                </a>
                                <a class="right carousel-control" href="#carousel-example-generic" role="button"
                                    data-slide="next">
                                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                                    <span class="sr-only">Next</span>
                                </a>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="announcement-container" style="display: flex; padding: 8px 0; background-color: var(--secondary-color);">
            <div data-section="date">
                <img src="./asset/images/broadcast.png" alt="broadcast" style="width: 20px; margin: 0 8px;">
            </div>
            <div data-section="announcements">
                <div>
                    <div class="tickercontainer">
                        <div class="mask">
                            <div>
                                <div class="tickercontainer">
                                    <div class="mask">
                                        <ul class="announcement-list newsticker" id="announcement_list"
                                            style="color: rgb(235, 235, 235); width: 1030.7px; left: -387.48px;">
                                            <?php for ($i = 1; $i <= 3; $i++): ?>
                                                <li><?= htmlspecialchars($web["teks_berjalan_$i"]) ?></li>
                                            <?php endfor; ?>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
<?php else: ?>

<div style="margin-top:200px">
    <div class="slider">
        <table width="100%" style="margin: 0 auto;">
            <tbody>
                <tr id="slides">
                    <td colspan="2">

                        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

                            <!-- Indicators -->
                            <ol class="carousel-indicators">
                                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                            </ol>

                            <!-- Wrapper for slides -->
                            <div class="carousel-inner" role="listbox">
                                <?php
                                $promosi = mysqli_query($koneksi, "SELECT * FROM promosi ORDER BY id_promosi DESC");
                                $no = 0;
                                while ($row = mysqli_fetch_assoc($promosi)):
                                    $active = ($no === 0) ? 'active' : '';
                                    ?>
                                    <div class="item <?= $active ?>">
                                        <img src="<?= $base_url ?>/asset/img/<?= $row['gambar_promosi'] ?>"
                                            alt="<?= htmlspecialchars($row['judul_promosi']) ?>" style="max-width:50%;margin: 0 auto;">
                                        <div class="carousel-caption"></div>
                                    </div>
                                    <?php
                                    $no++;
                                endwhile;
                                ?>
                            </div>

                            <!-- Controls -->
                            <a class="left carousel-control" href="#carousel-example-generic" role="button"
                                data-slide="prev">
                                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                                <span class="sr-only">Previous</span>
                            </a>

                            <a class="right carousel-control" href="#carousel-example-generic" role="button"
                                data-slide="next">
                                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                                <span class="sr-only">Next</span>
                            </a>

                        </div>

                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <div class="announcement-container" style="width: 95%; margin: 0 auto; display: flex; padding: 8px 0; max-width: 1280px; background-color: var(--secondary-color);">
            <div data-section="date">
                <img src="./asset/images/broadcast.png" alt="broadcast" style="width: 24px; margin: 0 8px;">
            </div>
            <div data-section="announcements">
                <div>
                    <div class="tickercontainer">
                        <div class="mask">
                            <div>
                                <div class="tickercontainer">
                                    <div class="mask">
                                        <ul class="announcement-list newsticker" id="announcement_list"
                                            style="color: rgb(235, 235, 235); width: 1030.7px; left: -387.48px;">
                                            <?php for ($i = 1; $i <= 3; $i++): ?>
                                                <li><?= htmlspecialchars($web["teks_berjalan_$i"]) ?></li>
                                            <?php endfor; ?>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</div>
<?php endif; ?>