{% extends "base.html" %}
{% load bootstrap4 %}

{% block title %}Questions{% endblock title %}

{% block content %}
<br><br>
<section class="page-section" id="services">
    <div class="container">
        <h2>Questions</h2>
        <br>
        {% if question_form %}
        <br>
        <h4>Change/Add Question</h4>
        <div class="row">
            <div class="col-8">
                <form method="post" method="post" class="form" enctype="multipart/form-data">
                    {{ upload_form.management_form }}
                    {% csrf_token %}
                    {% bootstrap_form question_form %}
                    {% buttons %}
                    <button type="submit" class="btn btn-sm btn-info">Save</button>
                    <!-- <a class="btn btn-sm btn-outline-info" href="{% url 'questioning:questions' %}">New</a> -->
                    {% endbuttons %}
                </form>        
            </div>
            <div class="col-2"></div>
            <div class="col-2"></div>
        </div>
        <br><br>
        {% endif %}
        <div class="row justify-content-md-left">
            <div class="col col-md-2"><a class="btn btn-sm btn-outline-info" href="{% url 'questioning:generate_test' %}">Gernerate Test</a></div>
            <div class="col col-md-3">Add a Project to all quesitons:</div> 
            {% for project in projects %}
                <div class="col col-md-1"><a class="btn btn-sm btn-outline-danger" href="{% url 'questioning:questions_add_project' %}{{project.pk}}/">+[{{project.name}}]</a></div> 
            {%endfor%}
        </div>
        <br>
        {% for question in questions %}
        <div class="row justify-content-md-left">
            <div class="col col-md-4">{{question.topic}}</div> 
            <div class="col col-md-7">{{question.question}}</div>
            <div class="col col-md-1"><a class="btn btn-sm btn-outline-info" href="{% url 'questioning:questions' %}{{question.id}}/">Change</a></div>
        </div>
        {%endfor%}
        <br><br>
        <h2>Test Result Overview</h2>
        <br>
        <div class="row justify-content-md-left">
            <div class="col col-md-3">testee</div> 
            <div class="col col-md-3">correct answers</div>
            <div class="col col-md-3">test duration</div>
            <div class="col col-md-3">test start</div>
        </div>
        <br>
        {% for result in test_results %}
        <div class="row justify-content-md-left">
            <div class="col col-md-3">{{result.testee}}</div> 
            <div class="col col-md-3">{{result.result|floatformat:-2}} %</div>
            <div class="col col-md-3">{{result.duration|floatformat:-1}} min</div>
            <div class="col col-md-3">{{result.created_at}}</div>
        </div>
        {%endfor%}
    </div>
</section>

<script>
document.addEventListener("DOMContentLoaded", function (event) {
    var scrollpos_section = sessionStorage.getItem('scrollpos_section');
    if (scrollpos_section) {
        window.scrollTo(0, scrollpos_section);
        sessionStorage.removeItem('scrollpos_section');
    }
});

window.addEventListener("beforeunload", function (e) {
    sessionStorage.setItem('scrollpos_section', window.scrollY);
});
</script>
{% endblock content %}