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

{% block content %}
<main class='tracks'>
    <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="track-list">
            {% for track in tracks %}
            <li>
                <a href="{% url 'sandtable:track' track.id %}">
                    <img class="list-pic" src="{{ track.pic.url }}">
                    <a class="track-name" href="{% url 'sandtable:track' track.id %}">{{ track.name }}</a>
                </a>
            </li>
            {% empty %}
            <div class='empty'><a>No tracks have been added yet.</a></div>
            {% endfor %}
        </ul>
    </div>
    <div class="upload-div">
        <a href="{% url 'sandtable:upload' %}">Upload</a>
    </div>
</main>
{% endblock content %}