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

{% block styles %}
    <link rel="stylesheet" type="text/css" href="{% static "css/sliders.css" %}">
    <style>
        .form-check-input {
            margin-right: 0px;
            margin-left: -7.5px;
        }
    </style>
{% endblock %}

{% block scripts %}
    <script type="text/javascript" src="{% static 'js/sliders.js' %}"></script>
{% endblock %}


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


{% block content %}

    <div class="alert alert-danger" id="alert" style="display:none;">
        Please indicate your estimate for all items. Please make sure to click on each slider once.
    </div>


<div style="margin-bottom: 18pt">
    <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">
                                                 <table class="table table-borderless">
                                                    <tbody>
                                                        <tr style="background-color: white; padding: 0">
                                                            {% for choice in form.altruism %}
                                                                    <td style="width: 9%; text-align: center; padding: 0; ">{{ choice.choice_label }}</td>
                                                            {% endfor %}
                                                        </tr>
                                                        <tr style="background-color: white; padding: 0;">
                                                            {% for choice in form.altruism %}
                                                                    <td style="width: 9%; text-align: center; padding:0">{{ choice.tag }}</td>
                                                            {% endfor %}
                                                        </tr>
                                                    </tbody>
                                                 </table>
                                            </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>


                    <!-- POLITICAL ATTITUDES QUESTION -->
                    <div>
                        <tr>
                            <td>{{ form.politics_right.label }}</td>
                        </tr>
                        <tr>
                            <td>{{ form.politics_right }}</td>
                        </tr>
                    </div>


                    <!-- ENVIRONMENTAL ATTITUDE QUESTION -->
                    <div>
                        <tr>
                            <td>{{ form.env_attitude.label }}</td>
                        </tr>
                        <tr>
                            <td>
                                <table class="table table-borderless">
                                    <tbody>
                                        <tr style="background-color: white">
                                            <td style="width:19%; padding: 0; text-align: right"><em>"Economic growth and creating jobs should be the top priority, even if the environment suffers to some extent."</em></td>
                                            <td style="text-align: center; vertical-align: middle">
                                                <div class="slidecontainer" style="margin-left: auto; margin-right: auto">
                                                    <input type="range" name="env_attitude" min="0" max="100" value="0" step="1" id="env_attitude" class="slider" style="width: 100%">
                                                </div>
                                            </td>
                                            <td style="width:20%; padding:0; text-align: left"><em>"Protecting the environment should be given priority, even if it causes slower economic growth and some loss of jobs."</em></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                        </tr>
                    </div>

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

	<div style="margin-top:12pt; text-align: right">
       <button name="slider_task_check" id="test" class="btn btn-primary btn-large" onclick="checkTouched()">Next</button>
    </div>

{% endblock %}