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

{% block content %}
<main class='index'>
    <div id="canvas-div">
        <canvas id="chart"></canvas>
        <script src="{% static 'js/chart.js' %}"></script>
    </div>

    <div class='track-playing'>
        <p>{{ track_name }}</p>
    </div>

    <div class='media'>
        <form action="#" method="get" id="eraseForm">
            <a id='erase'>
                <input type="hidden" name="eraseButton" value="true">
                <span class="icon"><ion-icon name="trash-outline"></ion-icon></span>
            </a>
        </form>
        
        <form action="#" method="get" id="playForm">
            <input type="hidden" name="playButton" value="true">
            <a id='play'>
                {% if playing %}
                    <span class="icon"><ion-icon name="pause-outline"></ion-icon></span>
                {% else %}
                    <span class="icon"><ion-icon name="play-outline"></ion-icon></span>
                {% endif %}
            </a>
        </form>

        <form action="#" method="get" id="nextForm">
            <input type="hidden" name="nextButton" value="true">
            <a id='next' href="#">
                <span class="icon"><ion-icon name="play-forward-outline"></ion-icon></span>
            </a>
        </form>
    </div>

    <script>
        var play_button = document.getElementById("play");
        var erase_button = document.getElementById("erase");
        var next_button = document.getElementById("next");

        play_button.onpointerup = function() {
            document.getElementById("playForm").submit();
        }
        erase_button.onpointerup = function() {
            document.getElementById("eraseForm").submit();
        }
        next_button.onpointerup = function() {
            document.getElementById("nextForm").submit();
        }
    </script>
</main>
{% endblock content %}