{% extends "Base.html" %}

{% block window-title %}
Overzicht
{% endblock %}

{% block multi-row %}
  <menu role="tablist" hx-boost="true" class="multirows">
    <li role="tab" aria-selected="true">
      <a href="{% url 'overview' %}">Tracks</a>
    </li>
    <li role="tab">
      <a href="{% url 'playlist-list' %}">Playlists</a>
    </li>
  </menu>
{% endblock %}

{% block main-content %}
<p>Onderstaand alle nummers waar je al op gestemd hebt.</p>
<ul class="tree-view overview"> 
  {% for artist, albums in artists.items %}
  <li>
    <details>
      <summary>{{artist}}</summary>
      <ul>
        {% for album, tracks in albums.items %}
        <li>
          <details>
            <summary>{{album}}</summary>
            <ul>
              {% for track in tracks %}
              <li>
                <a href="{{track.link}}" target="_blank">{{track.name}}</a>
              </li>
              {% endfor %}
            </ul>
          </details>
        </li>
        {% endfor %}
      </ul>
    </details>
  </li>
  {% endfor %}
</ul>
{% endblock %}