{% extends "sandtable/base.html" %}
{% load static %}

{% block content %}
<main class='queue'>
    <div class="header">
        <ul class="header-list">
            <li>
                <a href="{% url 'sandtable:tracks' %}">Tracks</a>
            </li>
            <li>
                <a href="{% url 'sandtable:queue' %}">Queue</a>
            </li>
        </ul>
    </div>
    <div class="track-list-div">
        <ul class="queue-list">
            {% for track in queue %}
            <li>
                <a>{{ track.file }}</a>
            </li>
            {% empty %}
            <div class='empty'><a>Queue is empty.</a></div>
            {% endfor %}
        </ul>
    </div>
    <div class="upload-div">
        <form action="#" method="get">
            <input type="submit" class="btn" value="Clear queue" name="clearQueue">
        </form>
    </div>
</main>
{% endblock content %}