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

{% block content %}
<main class='settings'>
    <div class="header center">
        <a>Settings</a>
    </div>
    <div class="track-list-div">
        <ul class="settings-list">
            <li>
                <form action="#" method="get">
                    <input type="submit" class="btn" value="Led fade" name="fadeButton">
                </form>
            </li>
            <li>
                <form action="#" method="get">
                    <input type="submit" class="btn" value="Home" name="homeButton">
                </form>
            </li>
            <li>
                <form action="#" method="get">
                    <input type="submit" class="btn" value="Calibrate" name="calibrateButton">
                </form>
            </li>
            <li>
                <form action="#" method="get">
                    <input type="submit" class="btn" value="Update coords" name="updateButton">
                </form>
            </li>
            <li>
                <form action="#" method="get">
                    <input type="submit" class="btn" value="Stop motors" name="stopButton">
                </form>
            </li>
            <li>
                <form action="#" method="get">
                    <input type="submit" class="btn" value="Power off" name="powerButton">
                </form>
            </li>
            <li>
                <form action="#" method="get">
                    <input type="submit" class="btn" value="Reset core" name="resetButton">
                </form>
            </li>
            <li>
                <a>Motor speed:</a>
                <form action="#" method="get" id="motorSliderForm">
                    <input type="range" id="speedSlider" min="1" max="10" value={{ motorSpeed }} name="motorSpeedSlider">
                    <a id="speedSliderValue"></a>
                </form>
            </li>
            <li>
                <a>Led speed:</a>
                <form action="#" method="get" id="ledSliderForm">
                    <input type="range" id="ledSlider" min="1" max="200" value={{ ledSpeed }} name="ledSpeedSlider">
                    <a id="ledSliderValue"></a>
                </form>
            </li>
            <li>
                <a>Led intensity:</a>
                <form action="#" method="get" id="ledIntensitySliderForm">
                    <input type="range" id="ledIntensitySlider" min="0" max="100" value={{ ledIntensity }} name="ledIntensitySlider">
                    <a id="ledIntensitySliderValue"></a>
                </form>
            </li>
            <li>
                <a>Led saturation:</a>
                <form action="#" method="get" id="ledSaturationSliderForm">
                    <input type="range" id="ledSaturationSlider" min="0" max="100" value={{ ledSaturation }} name="ledSaturationSlider">
                    <a id="ledSaturationSliderValue"></a>
                </form>
            </li>
        </ul>
    </div>

    <script>
        var speedSlider = document.getElementById("speedSlider");
        var speedValue = document.getElementById("speedSliderValue");
        speedValue.innerHTML = speedSlider.value;

        speedSlider.oninput = function() {
            speedValue.innerHTML = this.value;
        }

        speedSlider.onpointerup = function() {
            document.getElementById("motorSliderForm").submit();
        }

        var ledSlider = document.getElementById("ledSlider");
        var ledValue = document.getElementById("ledSliderValue");
        ledValue.innerHTML = ledSlider.value;

        ledSlider.oninput = function() {
            ledValue.innerHTML = this.value;
        }

        ledSlider.onpointerup = function() {
            document.getElementById("ledSliderForm").submit();
        }

        var ledIntensitySlider = document.getElementById("ledIntensitySlider");
        var ledIntensityValue = document.getElementById("ledIntensitySliderValue");
        ledIntensityValue.innerHTML = ledIntensitySlider.value;

        ledIntensitySlider.oninput = function() {
            ledIntensityValue.innerHTML = this.value;
        }

        ledIntensitySlider.onpointerup = function() {
            document.getElementById("ledIntensitySliderForm").submit();
        }

        var ledSaturationSlider = document.getElementById("ledSaturationSlider");
        var ledSaturationValue = document.getElementById("ledSaturationSliderValue");
        ledSaturationValue.innerHTML = ledSaturationSlider.value;

        ledSaturationSlider.oninput = function() {
            ledSaturationValue.innerHTML = this.value;
        }

        ledSaturationSlider.onpointerup = function() {
            document.getElementById("ledSaturationSliderForm").submit();
        }

    </script>
</main>
{% endblock content %}