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

{% block title %}
Block {{ step }} of {{ num_blocks }}
{% endblock %}

{% block content %}

<hr>

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

<hr>

<h1 class="timepref__heading">
    <span class="text-uppercase">{{ curr_block.text_delay_start }}</span>
    and
    <span class="text-uppercase">{{ curr_block.text_total_end }}</span>
    from today
</h1>

<table class="table table-bordered {% if use_slider %}timepref__with-slider{% endif %}">
    <tbody>
    {% for question in curr_block.questions %}

    {% if not use_slider %}
    <tr class="timepref__question-start timepref__question-unanswered timepref__question-index-{{question.question_number}}">
        <th rowspan="3" width="10">{{ question.question_number }}.</th>
        <td>payment <span class="text-uppercase">{{ curr_block.text_delay_start }}</span>...</td>
        {% for value in question.start_values %}
        <td class="text-center">{{ value|c }}</td>
        {% endfor %}
    </tr>
    <tr class="timepref__question-end">
        <td>and payment <span class="text-uppercase">{{ curr_block.text_total_end }}</span></td>
        {% for value in question.end_values %}
        <td class="text-center">{{ value|c }}</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 %}
    </tr>

    {% if not forloop.last %}
    <tr class="timepref__spacer">
        <td></td>
        {% for value in question.start_values %}
        <td></td>
        {% endfor %}
    </tr>
    {% endif %} <!-- // endif: forloop.last -->
    {% endif %} <!-- // endif: not use_slider -->

    {% if use_slider %}
    <tr class="timepref__question-start timepref__question-index-{{question.question_number}} timepref__question-choices"
        data-question-index="{{question.question_number}}"
        data-start-values=""
        data-end-values="{{question.end_values | json}}">
        <th rowspan="2" width="10">{{ question.question_number }}.</th>
        <td class="text-nowrap">
            payment <span class="text-uppercase">{{ curr_block.text_delay_start }}</span>:
        </td>
        <td class="text-center timepref__question-start-value text-nowrap" width="100">
            0.00€
        </td>
        <td class="timepref__question-slider" rowspan="2" width="1000">
            <div class="timepref__question-start-values">
                {% for v in question.start_values %}
                <div>{{v | c}}</div>
                {% endfor %}
            </div>
            <div class="hidden timepref__question-end-values">
                {% for v in question.end_values %}
                <div>{{v | c}}</div>
                {% endfor %}
            </div>
            <input type="range" min="1" max="{{num_choices}}" step="1" value="1"/>
        </td>
    </tr>
    <tr class="timepref__question-end" data-question-index="{{question.question_number}}">
        <td class="text-nowrap">
            and payment <span class="text-uppercase">{{ curr_block.text_total_end }}</span>:
        </td>
        <td class="text-center timepref__question-end-value" >
            0.00€
        </td>
    </tr>

    {% if not forloop.last %}
    <tr class="timepref__spacer">
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    {% endif %} <!-- // endif: forloop.last -->
    {% endif %} <!-- // endif: use_slider -->

    {% endfor %} <!-- // endfor: curr_block.questions -->
    </tbody>
</table>

<input id="timepref__answers" type="hidden" name="block_answers" data-block-index="{{ block_index }}" value="{{ player.block_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 %}