---
permalink: /music/genres/index.php
type: dynamic
schema: genre
---
<a class="back-link" href="/music" title="Go back to the music index page">{% tablericon "arrow-left" %} Back to music</a>
<h2 class="page-title"><?= htmlspecialchars($genre["emoji"]) ?> <?= htmlspecialchars($genre["name"]) ?></h2>
<article class="genre-focus">
  <?php $artistCount = count($genre["artists"]); ?>
  <?php if ($artistCount > 0): ?>
    <p>My top&puncsp;<mark><?= htmlspecialchars($genre["name"]) ?></mark>&puncsp;artists are
      <?php
      $artists = array_slice($genre["artists"], 0, 5);
      $artistLinks = [];
      foreach ($artists as $artist) {
        $artistLinks[] = '<a href="' . htmlspecialchars($artist["url"]) . '">' . htmlspecialchars($artist["name"]) . '</a>';
      }
      if (count($artistLinks) > 1) {
        $last = array_pop($artistLinks);
        echo implode(', ', $artistLinks) . ' and ' . $last;
      } else {
        echo implode('', $artistLinks);
      }
      ?>. I've listened to&puncsp;<mark><?= $genre["total_plays"] . ' ' . pluralize($genre["total_plays"], "play") ?></mark>&puncsp;tracks from this genre.</p>
    <hr />
  <?php endif; ?>
  <?php
    renderAssociatedMedia(
      [],
      $genre["books"] ?? [],
      [],
      $genre["movies"] ?? [],
      $genre["posts"] ?? [],
      []
    );
  ?>
  <?php if (!empty($genre["description"])): ?>
    <h3>Overview</h3>
    <div data-toggle-content class="text-toggle-hidden">
      <?= parseMarkdown($genre["description"]) ?>
      <p><a href="<?= htmlspecialchars($genre["wiki_link"]) ?>">Continue reading at Wikipedia.</a></p>
      <p><em>Wikipedia content provided under the terms of the
          <a href="https://creativecommons.org/licenses/by-sa/3.0/">Creative Commons BY-SA license</a></em></p>
    </div>
    <button data-toggle-button>Show more</button>
  <?php endif; ?>
</article>