SAe-PHP-S2/application/views/musiques_list.php

<section class="section">
    <div class="container">
        <h1 class="title is-4 has-text-dark">Liste des musiques</h1>
        <div class="columns is-multiline">
            <?php foreach ($musics as $music): ?>
                <div class="column is-one-quarter-desktop is-half-tablet is-full-mobile">
                    <div class="card">
                        <div class="card-image">
                            <figure class="image is-4by3">
                                <img src="data:image/jpeg;base64,<?= base64_encode($music->jpeg) ?>" alt="<?= $music->trackName ?>">
                            </figure>
                        </div>
                        <div class="card-content">
                            <div class="media">
                                <div class="media-content">
                                    <p class="title is-4 music-title"><?= anchor("music/view/{$music->trackId}", $music->trackName) ?></p>
                                    <p class="subtitle is-6"><?= "{$music->year} - {$music->artistName} - {$music->albumName}" ?></p>
                                    <?php if (isset($is_logged_in) && $is_logged_in): ?>
                                        <form method="post" action="<?= site_url('playlist/selectPlaylist') ?>">
                                            <input type="hidden" name="itemId" value="<?= $music->trackId ?>">
                                            <input type="hidden" name="itemType" value="song">
                                            <button type="submit" class="button is-link">Ajouter à la playlist</button>
                                        </form>
                                    <?php endif; ?>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            <?php endforeach; ?>
        </div>
        <!-- Pagination -->
        <nav class="pagination" role="navigation" aria-label="pagination">
                <?= $pagination ?>
            </nav>
    </div>
</section>



<style>

.pagination a, .pagination span {
    padding: 8px 12px;
    margin: 0 2px;
    border-radius: 4px;
    border: 1px solid #ddd;
    color: #333;
    text-decoration: none;
}

.pagination a:hover {
    background-color: #f0f0f0;
    border-color: #bbb;
}

.pagination .is-current {
    background-color: #3273dc;
    border-color: #3273dc;
    color: #fff;
}

</style>