---
layout: default
pagination:
  data: genres
  size: 1
  alias: genre
permalink: "{{ genre.url }}/index.html"
updated: "now"
schema: genre
---
{% assign artistCount = genre.artists.size %}
{%- capture connectingWord -%}
  {% if artistCount > 1 %}
    are
  {% else %}
    is
  {% endif %}
{%- endcapture -%}
{%- assign mediaLinks = genre.artists | sortByPlaysDescending: "total_plays" | mediaLinks: "artist", 5 -%}
{%- capture js -%}
  {% render "../../../assets/scripts/text-toggle.js" %}
{%- endcapture -%}
<script>{{ js }}</script>
<noscript><style>[data-toggle-content].text-toggle-hidden {height: unset !important;overflow: unset !important;margin-bottom: unset !important;}[data-toggle-content].text-toggle-hidden::after {display: none !important;}</style></noscript>
<a class="back-link-header link-icon" href="/music" title="Go back to the music index page">{% tablericon "arrow-left" "Go back to the music index page" %} Back to music</a>
<h2>{{ genre.name }}</h2>
<article class="genre-focus">
  {%- if mediaLinks -%}
  <p>My top <strong class="highlight-text">{{ genre.name }}</strong> artists {{ connectingWord }} {{ mediaLinks }}. I've listened to <strong class="highlight-text">{{ genre.total_plays | formatNumber }}</strong> tracks form this genre.</p>
  <hr />
  {% endif %}
  {%- if genre.description -%}
  <div data-toggle-content class="text-toggle-hidden">
    {{ genre.description | markdown }}
    <p><a href="{{ genre.wiki_link }}">Continue reading at Wikipedia.</a></p>
    <p class="text-small"><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>
  {%- endif -%}
</article>