<h5>Filter Artiste</h5>
<button type="button" onclick="toggleFilterOptions()">Filter</button>

<div id="filter-options" class="filter-options">
    <form method="get">
        <div id="filter-buttons" class="filter-buttons">
            <button type="button" onclick="toggleCheckboxes('genre')">Genres</button>
        </div>

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

        <button type="submit">Apply Filters</button>
    </form>
</div> 

<h5>Sort Artiste</h5>
<button type="button" onclick="toggleSortButtons()">Sort</button>
<div id="sort-buttons" class="sort-buttons">
    <button type="button" onclick="sortAlbums('name', 'asc')">Sort by Artist Asc</button>
    <button type="button" onclick="sortAlbums('name', 'desc')">Sort by Artist Desc</button>
</div>

<h5>Artiste list</h5>
<section class="list">
<?php
foreach($artistes as $artiste){
    echo "<div><article>";
    echo "<header class='short-text'>";
    echo anchor("albums/viewAlbum/{$artiste->Id}", $artiste->name);
    if($this->session->userdata('logged_in')){
        echo anchor("artistes/addArtistestoPlaylist/{$artiste->Id}", "<i class='fa fa-plus'></i>");
    }
    echo "</header>";
    echo "</article></div>";
}
?>
</section>