{% extends "global/Page.html" %}
{% load otree %}

{% block styles %}
    <link rel="stylesheet" type="text/css" href="{% static 'css/sliders.css' %}">
{% endblock %}

{% block scripts %}
    <script type="text/javascript" src="{% static 'js/sliders.js' %}"></script>
    <script>
        function saveTime() {
            let EndTime = new Date().getTime();
            document.getElementById("finishing_time").value = EndTime;
        }
    </script>
{% endblock %}


{% block title %}
    Questionnaire
{% endblock %}

{% block content %}

    <div class="alert alert-danger" id="alert" style="display:none;">
        Please answer all questions.
    </div>


<div style="margin-top: 3em;margin-bottom: 2em">
    <p>
        You have now reached the end of the payment relevant choices. Before you leave, we ask you to answer a few questions on
        your background.
    </p>
</div>

    <div class="container">
        <table class="table table-striped" style="width:100%; margin-right: auto; margin-left: auto;">
            <thead>
                <tr>
                    <th style="text-align: center">Questionnaire</th>
                </tr>
            </thead>
            <tbody>

                <!-- AGE QUESTION -->
                <div>
                    <tr>
                        <td>{{ form.age.label }}</td>
                    </tr>
                    <tr>
                        <td>
                            <div style="text-align: center">
                                {{ form.age }}
                            </div>
                        </td>
                    </tr>
                </div>


                <!-- GENDER QUESTION -->
                <div>
                    <tr>
                        <td>{{ form.gender.label }}</td>
                    </tr>
                    <tr>
                        <td>{{ form.gender }}</td>
                    </tr>
                </div>


                <!-- EDUCATION QUESTION -->
                <div>
                    <tr>
                        <td>{{ form.levelOfEducation.label }}</td>
                    </tr>
                    <tr>
                        <td>{{ form.levelOfEducation }}</td>
                    </tr>
                </div>


                <!-- INCOME QUESTION -->
                <div>
                    <tr>
                        <td>{{ form.income.label }}</td>
                    </tr>
                    <tr>
                        <td>{{ form.income }}</td>
                    </tr>
                </div>


                <!-- ALTRUISM QUESTION -->
                <div>
                    <tr>
                        <td>{{ form.altruism.label }} </td>
                    </tr>
                    <tr>
                        <td>
                            <table class="table table-borderless">
                                <tbody>
                                    <tr style="background-color: white">
                                        <td style="width:10%; padding: 0; text-align: right; vertical-align: middle"><em>"completely unwilling to share"</em></td>
                                        <td style="vertical-align: middle">
                                            <div class="slidecontainer">
                                                <input type="range" min="0" max="10" value="0" step="1" name="altruism"  id="altruism" class="slider2" style="width: 95%;margin-left: auto;margin-right: auto">
                                                <!--<span class="slider_label">500</span>-->
                                            </div>
                                         </td>
                                        <td style="width:10%; padding:0; text-align: left; vertical-align: middle"><em>"very willing to share"</em></td>
                                    </tr>
                                </tbody>
                            </table>
                        </td>
                    </tr>
                </div>


                <!-- GIVING TYPE QUESTION -->
                <div>
                    <tr>
                        <td>{{ form.giving_type.label }}</td>
                    </tr>
                    <tr>
                        <td>
                            {{ form.giving_type }}
                        </td>
                    </tr>
                </div>

            </tbody>
        </table>
    </div>


    <div style="margin-top: 16pt; text-align: right">
        <button class="otree-btn-next btn btn-primary" onclick="saveTime();checkTouched();">
            Complete the study
        </button>
    </div>

    <input id="finishing_time" name="finishing_time" type="hidden" value=""/>


{% endblock %}