{% extends "base_generic.html" %}

{% block header %}
<style>
::-webkit-scrollbar {
    width: 11px;
}
  
/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px lightgrey; 
    border-radius: 25px;
}
  
/* Handle */
::-webkit-scrollbar-thumb {
    background: lightgrey; 
    border-radius: 15px;
}
.footer {
    display: none;
}
.addUser {
    color: white;
    width: 10%;
    height: 35%;
    background-color: grey;
    margin: 1px;
    padding: 2px;
    font-size: 20px;
    border-radius: 10px;
}

.back {
    position: abosolute;
    left: .75%;
    top: 35%;
    height: 30px;
    float: left;
    text-align: center;
}
.back a {
    text-decoration: none;
    color: white;
}

.form-background {
    width: 90%;
    height: 960px;
    margin: 5%;
    padding: 10px;
    background-color: whitesmoke;
    border-radius: 30px;
    border-width: 3px;
    border-style: solid;
    border-color: grey;
    text-align: center;
    overflow-y: auto;
}

.class {
    width: 46%;
    margin: 2%;
    float: left;
}
.exercises {
    width: 100%;
    background-color: black;
    overflow-y: auto;
    height: 270px;
    color: white;
    border-radius: 30px;
}
.exercise {
    float: left;
    width: 100%;
    margin: 1% 0;
    padding: 2%;
    border-color: white;
    border-width: 1px;
    border-style: solid;
    border-radius: 30px;
}
.exercise h3 {
    float: left;
    width: 50%;
    margin-left: 10%;
}
.status {
    float: right;
    border-width: 1px;
    border-style: solid;
    border-radius: 10px;
    width: 40%;
    margin-top: 5px;
    overflow: auto;
}
.status a {
    color: white;
}
.exercisebuttons{
    clear: both;
    width: 100%;
}
.btn {
    color: white;
    width: 19%;
    height: 60px;
    background-color: #333333;
    margin: auto;
    padding: auto;
    font-size: 20px;
}
.btn button {
    color: white;
    background-color: #333333;
    border-color: #333333;
    width: 100%;
}
.btn input {
    width: 90%;
    height: 15px;
    border-radius: 20px;
    margin: 0;
    padding: 0;
}
.submitted{
    font-size: 16px; 
    font-size: 1vw;
    padding: 0;
}
#submit_answer {
    padding: 0;
}
#answer {
    float: center;
    text-align: center;
    margin: 0;
    padding: 0;
}
</style>


{% if user.is_authenticated %}
{{ request.user.username }}'s Exercises
<a href="{% url 'logout' %}">
    <div class="addUser back">Logout</div>
</a>

{% else %}
  <p>You are not logged in: <a href="{% url 'login' %}">login</a></p>
{% endif %}
{% endblock %}


{% block body %}
{% if user.is_authenticated %}
<script type="text/javascript">

$("document").ready(function(){
    $('.status:contains(on)').css("background-color","green");
    $('.submitted').each(function () {
        if ($(this).text() == 'Submitted') {
            $(this).css("background-color","green");
        }
    });
    
    $("#start button").click(function(){
        var e_running = "{{user.exercise_running}}";
		if(e_running !== "None")
        {
            window.alert("There is an exercise already running!");
        }
    });
    $("#stop button").click(function(){
        var e_running = "{{user.exercise_running}}";
		if(e_running == "None")
        {
            window.alert("There are no exercises running!");
        }
    });
});
</script>

<div class="form-background">
    {% for class in classes %}
    <div class="class">
        <h2>{{ class.name }}</h2>
        <p>{{ class.description }}</p>
        <div class="exercises">
            {% for exercise in class.exercises.all %}
                <div class="exercise">
                    <h3>{{exercise.name}}</h3>
                    <div class="status">
                        {% if user.exercise_running == exercise %}
                        Running on port: <a href="http://{{settings.hostname}}:{{user.exercise_port}}">{{user.exercise_port}}</a>
                        {% else %}
                        Not Running
                        {% endif %}
                    </div>
                    <div class="exercisebuttons">
                        <form id="start" class="btn" method="POST" action="{% url 'start_exercise' user.pk class.pk exercise.pk%}" class="btn">
                            {% csrf_token %}
                            <button type="submit">Start</button>
                        </form>
                        <form class="btn" method="POST" action="{% url 'restart_exercise' user.pk class.pk exercise.pk%}" class="btn">
                            {% csrf_token %}
                            <button type="submit">Reset</button>
                        </form>
                        <form id="stop" class="btn" method="POST" action="{% url 'stop_exercise' user.pk exercise.pk%}" class="btn">
                            {% csrf_token %}
                            <button type="submit">Stop</button>
                        </form>
                        <form id="submit_answer" method="POST" action="{% url 'submit' class.pk exercise.pk %}" class="btn">
                            <button type="submit">Submit</button>
                            {% csrf_token %}
                            <div id="answer">{{ form.submitted }}</div>
                        </form>
                        {% if exercise.pk in submitted_exercises %}
                                <label class="btn submitted">Submitted</label>
                        {% else%}
                                <label class="btn submitted">Not Submitted</label>
                        {% endif %}
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
    {% endfor %}

</div>
{% endif %}
{% endblock %}