{% load static %}

<!doctype html>
<html lang="en">

    <head>
        <title>FPGA-Cluster Output</title>
        <meta charset="UTF-8">
        <meta name="author" content="Joachim Reif">
        
        <link href="{% static 'output/styles.css' %}" rel="stylesheet" type="text/css">
        <script src="{% static 'output/script.js'%}" type="module"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js" type="text/javascript"></script>

        <link rel="shortcut icon" href="#"> <!-- DELETE in production-->
    </head>

    <body>

        <header>
            <h1>FPGA-Cluster Output</h1>
            <a href="{% url 'interface:base' %}?type=std">Back</a>
        </header>

        <nav>
            <div id="data">
                <form method="GET" action="{% url 'output:download' %}">
                    <input type="checkbox" name="results_plain" id="r-plain">
                    <label for="r-plain">Results (Plaintext)</label>
                    <br>
                    <input type="checkbox" name="results_binary" id="r-binary">
                    <label for="r-binary"> Results (Binary)</label>
                    <br>
                    <input type="checkbox" name="metric_pr" id="m-pr">
                    <label for="m-pr">Pulse Rate</label>
                    <br>
                    <input type="checkbox" name="metric_cv" id="m-cv">
                    <label for="m-cv">Coefficient of Variation</label>
                    <br>
                    <input type="checkbox" name="metric_pc" id="m-pc">
                    <label for="m-pc">Pearson Correlation</label>

                    <input type="submit" value="Download" class="button-sidebar">
                </form>
            </div>
            <hr>
            <div id="statistics">
                <input type="checkbox" name="PR" id="stats_1">
                <label for="stats_1">Pulse Rate</label><br>
                <input type="checkbox" name="PC" id="stats_2">
                <label for="stats_2">Pearson Correlation</label><br>
                <input type="checkbox" name="CV" id="stats_3">
                <label for="stats_3">Coefficient of Variation</label>

                    <input type="button" value="Show statistics" class="button-sidebar">
            </div>
        </nav>

        <section>
            <!-- show statistics -->
        </section>

    </body>

</html>