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

{% block content %}

<div class="progress">
    <div class="progress-bar" style="width: {{ progress }}%"></div>
</div>
<br>

<h4 align="center">{{curr_block.text_delay_start}}-Year vs. {{curr_block.text_total_end}}-Year Growth
</h4>
<br>
<h6>
    {{instructions1}}<i><strong>{{instructions2}}</strong></i>{{instructions3}}
</h6>

<table class="table table-bordered">
    <tbody>
        {% for question in curr_block.questions %}
        <tr
            class="timepref__question-start timepref__question-unanswered timepref__question-index-{{questions_to_page|add:question.index}}">
            <th rowspan="3" width="10">{{questions_to_page|add:question.index}}.</th>
            <td> {{question_instructions}} in the <strong>{{ curr_block.text_delay_start }}</strong> Year</span>
            </td>
            {% for value in question.start_values %}
            <td class="text-center">{{ value }}</td>
            {% endfor %}
        </tr>
        <tr class="timepref__question-end">
            <td>AND in the <strong>{{ curr_block.text_total_end }}</strong> Year</td>
            {% for value in question.end_values %}
            <td class="text-center">{{ value }}</td>
            {% endfor %}
        </tr>
        <tr class="timepref__question-choices" data-question-index="{{questions_to_page|add:question.index}}">
            <td></td>
            {% for index in question.choice_index %}
            <td class="text-center timepref__question-choice">
                <input type="radio" name="question_{{questions_to_page|add:question.index}}" value="{{ index }}" />
            </td>
            {% endfor %}

            <h1></h1>

            {% if not forloop.last %}
        <tr class="timepref__spacer">
            <td></td>
            {% for value in question.start_values %}
            <td></td>
            {% endfor %}
            {% endif %}
            <!-- // endif: forloop.last -->
            {% endfor %}
            <!-- // endfor: curr_block.questions -->
    </tbody>
</table>
{% if player.set_1 %}
<input id="timepref__answers" type="hidden" name="question1_answers" data-block-index="{{ block_index }}"
    value="{{player.question1_answers}}">
{% else %}
<input id="timepref__answers" type="hidden" name="question2_answers" data-block-index="{{ block_index }}"
    value="{{player.question2_answers}}">
{% endif %}

<script>
    function alertFunctionBlock() {
        alert("In order for your answers to be most helpful to us, it is really important that you respond to all questions.")
        jQuery('.timepref__waiting').hide();
        jQuery('.timepref__next-button').show();
        return false
    }
</script>

<div class="timepref__waiting" onclick="return alertFunctionBlock();">
    {% next_button %}
</div>

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

{% endblock %}

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

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