---
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 -%}
<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="icon-link" 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 -%}
  {% render "partials/blocks/associated-media.liquid", posts:genre.posts %}
  {% render "partials/blocks/associated-media.liquid", books:genre.books %}
  {% render "partials/blocks/associated-media.liquid", movies:genre.movies %}
  {%- if genre.description -%}
    <h3>Overview</h3>
    <div data-toggle-content class="text-toggle-hidden">
      {{ genre.description | markdown }}
      <p><a href="{{ 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>
  {%- endif -%}
</article>