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

{% block content %}

<hr>

<hr>

<h1 class="timepref__heading">
    {{ title }}
</h1>

</p>
        <p align="justify">
            {{ instructions }} 
</p>


<table class="table table-bordered {% if use_slider %}timepref__with-slider{% endif %}">
    <tbody>
    {% for question in curr_block.questions %}
    <tr class="timepref__question-start timepref__question-unanswered timepref__question-index-{{question.question_number}}">
        <th rowspan="3" width="10">{{ question.question_number }}.</th>
        <td> {{question_instructions}} <span class="text-uppercase"> {{ curr_block.econ_text_delay_start }} </span></td>
        {% for value in question.econ_start_values %}
        <td class="text-center">{{ value }}</td>
        {% endfor %}
    </tr>
    <tr class="timepref__question-end">
        <td>and <span class="text-uppercase"> {{ curr_block.econ_text_total_end }} </span></td>
        {% for value in question.econ_end_values %}
        <td class="text-center">{{ value }}</td>
        {% endfor %}
    </tr>
    <tr class="timepref__question-choices" data-question-index="{{question.question_number}}">
        <td></td>
        {% for index in question.choice_index %}
        <td class="text-center timepref__question-choice">
            <input type="radio" name="question_{{question.question_number}}" value="{{ index }}" />
        </td>
        {% endfor %}

    <h1></h1>

    {% if not forloop.last %}
    <tr class="timepref__spacer">
        <td></td>
        {% for value in question.econ_start_values %}
        <td></td>
        {% endfor %}
    {% endif %} <!-- // endif: forloop.last -->
    {% endfor %} <!-- // endfor: curr_block.questions -->
    </tbody>
</table>

<input id="timepref__answers" type="hidden" name="question_answers" data-block-index="{{ block_index }}" value="{{player.question_answers}}">

<div class="timepref__waiting">
    You need to fill out all choices in order to continue.
</div>

<div class="timepref__next-button">
{% next_button %}
</div>

{% endblock %}

{% block styles %}
<link rel="stylesheet" href="{% static 'otime/styles/block.css' %}"/>
<link rel="stylesheet" href="{% static 'otime/styles/rangeslider.css' %}"/>
{% endblock %}

{% block scripts %}
<script src="{% static 'otime/scripts/rangeslider.min.js' %}"></script>
<script src="{% static 'otime/scripts/block.js' %}"></script>
{% endblock %}