<h5>Différents critères</h5>

<form method="post">
        <div id="filter-buttons-playlist" class="filter-buttons-playlist">
            <button type="button" onclick="toggleCheckboxesPlaylist('genre')">Genres</button>
            <button type="button" onclick="toggleCheckboxesPlaylist('artist')">Artists</button>
            <button type="button" onclick="toggleCheckboxesPlaylist('year')">Years</button>
        </div>

        <div id="genre-checkboxes-playlist" style="display:none;">
            <?php foreach ($genres as $genre): ?>
                <label>
                    <input type="checkbox" name="genre[]" value="<?= $genre->genreName; ?>">
                    <?= $genre->genreName; ?>
                </label><br>
            <?php endforeach; ?>
        </div>

        <div id="artist-checkboxes-playlist" style="display:none;">
            <?php foreach ($artists as $artist): ?>
                <label>
                    <input type="checkbox" name="artist[]" value="<?= $artist->artistName; ?>">
                    <?= $artist->artistName; ?>
                </label><br>
            <?php endforeach; ?>
        </div>

        <div id="year-checkboxes-playlist" style="display:none;">
            <?php foreach ($years as $year): ?>
                <label>
                    <input type="checkbox" name="year[]" value="<?= $year->year; ?>">
                    <?= $year->year; ?>
                </label><br>
            <?php endforeach; ?>
        </div>
    <label for="num_tracks">Nombre de musiques</label>
    <input type="number" id="num_tracks" name="num_tracks" min="1" placeholder="Nombre de musiques" required><br>
    <label for="name">Nom de la playlist</label>
    <input type="text" id="name" name="name" placeholder="name"  required>
    <div class="grid">
        <label for="Description">Déscription
        <input type="text" id="Description" name="Description" placeholder="Description" >
    </label>
    </div>
    <button type="submit">Submit</button>
</form>