{% extends 'notifpy/base.html' %}
{% load static from staticfiles %}

{% block body %}
<h1>Library</h1>
<div class="command-panel">
    <a class="command__button" href="{% url 'create_playlist' %}">Add Playlist</a>
</div>
{% if playlists %}
{% for playlist in playlists %}
<div class="playlist">
    <div class="playlist__header">
        <a href="{% url 'playlist' slug=playlist.slug %}">
            <h3>{{ playlist.title }}</h3>
        </a>
        <a href="{% url 'edit_playlist' slug=playlist.slug %}"><img class="playlist__icon" src="{% static 'notifpy/icons/gear.svg' %}" /></a>
        <a href="{{playlist.url_ranked}}"><img class="playlist__icon" src="{% static 'notifpy/icons/play.svg' %}" /></a>
        <a href="{{playlist.url_shuffled}}"><img class="playlist__icon" src="{% static 'notifpy/icons/random.svg' %}" /></a>
    </div>
    <div class="playlist__gallery">
        {% if playlist.videos.all %}
        {% for video in playlist.videos.all %}
        <div class="video">
            <a href="https://www.youtube.com/watch?v={{ video.id }}">
                <img class="video__thumbnail" src="{{ video.thumbnail }}" width=160 height=90 />
            </a>
            <p class="video__title">
                <a href="https://www.youtube.com/watch?v={{ video.id }}">{{ video.title | safe }}</a>
            </p>
            <p class="video__description">
                <a href="{% url 'channel' slug=video.channel.slug %}">{{ video.channel.title | safe }}</a>
                &middot;
                {{ video.time }}
            </p>
        </div>
        {% endfor %}
        {% else %}
        <p>No video in this playlist.</p>
        {% endif %}
    </div>
</div>
{% endfor %}
{% else %}
<p>No playlist found.</p>
{% endif %}
{% endblock %}