{% extends "base.html" %}

{% block title %}{{ playlist.name }}{% endblock %}

{% block content %}
    <h1>{{ playlist.name }}</h1>

    <ul>
        {% for artist in artists %}
            <li>
                <span class="preportion-bar">
                    <span class="preportion-bar-progress" style="transform: translateX({{ -100 * (1 - (artist.count / track_count)) }}%);"></span>
                </span>
                {{ artist.name }}: {{ artist.count }}
            </li>
        {% endfor %}
    </ul>

    <details>
        <summary>Pie chart</summary>

        <img src="data:image/png;base64,{{ pie }}" alt="">
    </details>
{% endblock %}