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

<section class="section">
    <div class="container">
        <h1 class="title">Mes Playlists</h1>

        <?php if (isset($error)): ?>
            <div class="notification is-danger">
                <?= $error ?>
            </div>
        <?php endif; ?>

        <?php if ($playlists): ?>
            <div class="columns is-multiline">
                <?php foreach ($playlists as $playlist): ?>
                    <div class="column is-one-third">
                        <div class="card">
                            <div class="card-content">
                                <div class="media">
                                    <div class="media-content">
                                        <p class="title is-4"><?= anchor("playlist/view/{$playlist->id}", $playlist->name) ?></p>
                                        <div class="buttons">
                                            <?= form_open('playlist/duplicate/'.$playlist->id, ['style' => 'display:inline;']) ?>
                                                <button type="submit" class="button button-duplicate is-small">Dupliquer</button>
                                            <?= form_close() ?>
                                            <button class="button button-rename is-small" onclick="showRenameModal('<?= $playlist->id ?>', '<?= $playlist->name ?>')">Renommer</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <footer class="card-footer">
                                <?= form_open('playlist/delete/'.$playlist->id, ['class' => 'card-footer-item']) ?>
                                    <button type="submit" class="button button-delete is-small">Supprimer</button>
                                <?= form_close() ?>
                            </footer>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
        <?php else: ?>
            <p>Vous n'avez pas encore de playlists.</p>
        <?php endif; ?>

        <div class="box">
            <form method="post" action="<?= site_url('playlist/add') ?>">
                <div class="field">
                    <label class="label">Nom de la playlist</label>
                    <div class="control">
                        <input type="text" name="name" class="input" placeholder="Nom de la playlist" required>
                    </div>
                </div>
                <div class="field">
                    <label class="label">Type de Playlist</label>
                    <div class="control">
                        <div class="select">
                            <select name="type" id="playlistType" onchange="toggleRandomOptions()">
                                <option value="empty" selected>Vide</option>
                                <option value="random">Aléatoire</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div id="randomOptions" style="display: none;">
                    <div class="field">
                        <label class="label">Nombre de chansons</label>
                        <div class="control">
                            <input type="number" name="numSongs" class="input" placeholder="Nombre de chansons" min="1">
                        </div>
                    </div>
                    <div class="field">
                        <label class="label">Genre</label>
                        <div class="control">
                            <div class="select">
                                <select name="genre">
                                    <option value="">Tous</option>
                                    <?php foreach($genres as $genre): ?>
                                        <option value="<?= $genre->name ?>"><?= $genre->name ?></option>
                                    <?php endforeach; ?>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="field">
                    <div class="control">
                        <button type="submit" class="button is-link">Créer une playlist</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</section>

<!-- Rename Modal -->
<div id="renameModal" class="modal">
    <div class="modal-background"></div>
    <div class="modal-card">
        <header class="modal-card-head">
            <p class="modal-card-title">Renommer la Playlist</p>
            <button class="delete" aria-label="close" onclick="closeRenameModal()"></button>
        </header>
        <section class="modal-card-body">
            <form id="renameForm" method="post" action="<?= site_url('playlist/rename') ?>">
                <div class="field">
                    <label class="label">Nouveau Nom</label>
                    <div class="control">
                        <input type="hidden" name="playlistId" id="renamePlaylistId">
                        <input type="text" name="newName" class="input" id="renameNewName" required>
                    </div>
                </div>
                <div class="field">
                    <div class="control">
                        <button type="submit" class="button is-link">Renommer</button>
                    </div>
                </div>
            </form>
        </section>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        toggleRandomOptions();
    });

    function toggleRandomOptions() {
        var playlistType = document.getElementById('playlistType').value;
        var randomOptions = document.getElementById('randomOptions');
        if (playlistType === 'random') {
            randomOptions.style.display = 'block';
        } else {
            randomOptions.style.display = 'none';
        }
    }

    function showRenameModal(playlistId, playlistName) {
        document.getElementById('renamePlaylistId').value = playlistId;
        document.getElementById('renameNewName').value = playlistName;
        document.getElementById('renameModal').classList.add('is-active');
    }

    function closeRenameModal() {
        document.getElementById('renameModal').classList.remove('is-active');
    }
</script>

<style>
.button-rename {
    background-color: #D17B8F; /* Rose */
    border-color: #D17B8F;
    color: #FFF;
}

.button-rename:hover {
    background-color: #B5697D; /* Rose plus foncé */
    border-color: #B5697D;
}

.button-duplicate {
    background-color: #A569BD; /* Violet */
    border-color: #A569BD;
    color: #FFF;
}

.button-duplicate:hover {
    background-color: #8E57A8; /* Violet plus foncé */
    border-color: #8E57A8;
}

.button-delete {
    background-color: #C3423F; /* Rougeâtre */
    border-color: #C3423F;
    color: #FFF;
}

.button-delete:hover {
    background-color: #A83835; /* Rougeâtre plus foncé */
    border-color: #A83835;
}
</style>