{% extends "layout.html" %}
{% from 'macros.html' import add_data, error_message, warning_message %}

{% block title %}
    <h1>Train</h1>
{% endblock %}

{% block content %}
    {{ add_data('train', data_upload_warnings, data_upload_errors) }}

    <hr>

    <h3>Train</h3>

    <form id="trainForm" method="POST">
        <h5>Data</h5>
        <select name="dataName" required>
            {% for dataset in datasets %}
                <option value="{{ dataset[0] }}">{{ dataset[1] }}</option>
            {% endfor %}
        </select>
        <br>
        <h5>Dataset type</h5>
        <div class="btn-group" id="datasetTypeSelect" data-toggle="buttons">
          <label class="btn btn-primary active">
            <input type="radio" name="datasetType" id="regression" value="regression" autocomplete="off"> Regression
          </label>
          <label class="btn btn-primary">
            <input type="radio" name="datasetType" id="classification" value="classification" autocomplete="off"> Classification
          </label>
        </div>
        <br>

        <h5>Epochs</h5>
        <input type="number" name="epochs" min="1" step="1" value="30" required>

        <h5>Ensemble Size</h5>
        <select name="ensembleSize" required>
            <option value="1" selected="selected">1</option>
            <option value="3">3</option>
            <option value="5">5</option>
            <option value="10">10</option>
        </select>

        <h5>Checkpoint name</h5>
        <!--TODO: Verify that name isn't already in use-->
        <input type="text" name="checkpointName" placeholder="name" required>

        {% if cuda %}
            <h5>GPU</h5>
            <select name="gpu">
                <option value="None">None</option>
                {% for gpu in gpus %}
                    <option value="{{gpu}}">{{gpu}}</option>
                {% endfor %}
            </select>
            <br>
            <br>
        {% endif %}

        <br>
        <br>

        <button id="train" class="btn btn-primary btn-md">Train</button>
        <button id="training" class="btn btn-default btn-md disabled" disabled="disabled" style="display:none">Training</button>
    </form>

    <br>

    {% if warnings %}
        {% for warning in warnings %}
            {{ warning_message(warning) }}
        {% endfor %}
    {% endif %}

    {% if errors %}
        {% for error in errors %}
            {{ error_message(error) }}
        {% endfor %}
    {% endif %}

    <script type=text/javascript>
        $("#train").click(function() {
            document.getElementById("train").form.submit();
            document.getElementById("train").disabled = "disabled";
        });

        function refresh() {
            $.post("receiver", function(data){
                if (data.training == 1) {
                    document.getElementById("myProgress").style.display = "";
                    document.getElementById("myBar").style.width = data.progress + "%";
                    document.getElementById("train").style.display = "none";
                    document.getElementById("training").style.display = "";
                    document.getElementById("train").disabled = "disabled";
                }
            });
        }
        setInterval(refresh, 500);
    </script>

    <style>
        #myProgress {
        width: 100%;
        background-color: #ddd;
        }
        
        #myBar {
        width: "{{ progress }} %";
        height: 30px;
        background-color: #4CAF50;
        }
    </style>

    <div id="myProgress" style="display:none">
        <div id="myBar"></div>
    </div>

    {% if trained %}
        <h3>Training complete!</h3>

        <h4>Test performance</h4>

        <p>Overall: {{ mean_score }} {{ metric }}</p>

        <h5>By task</h5>
        {% for i in range(num_tasks) %}
            <p>{{ task_names[i] }}: {{ task_scores[i] }} {{ metric }}</p>
        {% endfor %}

    {% endif %}

{% endblock %}
