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

{% block title %}Decision Test Round {{player.round_number}}/{{Constants.NUM_TEST_ROUNDS}}
{% endblock %}
{% block content %}

<link rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/11.0.2/css/bootstrap-slider.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/11.0.2/bootstrap-slider.min.js"></script>

<div style="width:100%;">
    <div style="width:50%; float: left; display: inline-block;">
        <p>
            Urgency:&nbsp;&nbsp;&nbsp;{{ player.urgency }}&nbsp;&nbsp;&nbsp;
            {% if player.urgency == 1 %}
            <img src="{% static 'karma/figures/urgency-timer-low.png' %}" style="height:35px;"/>
            {% elif player.urgency == 3 %}
            <img src="{% static 'karma/figures/urgency-timer-med.png' %}" style="height:35px;"/>
            {% elif player.urgency == 6 %}
            <img src="{% static 'karma/figures/urgency-timer-high.png' %}" style="height:35px;"/>
            {% endif %}<br>
            Karma:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ karma_floor }}
        </p>
    </div>
    <div style="width:50%; float: left; display: inline-block;">
        <p>
            Total score: {{ participant.payoff }}
        </p>
        <p>
            <wbr>
        </p>
    </div>
</div>

<div class="mb-3 _formfield">
    <label class="col-form-label" for="id_karma_input">Please choose your bid:</label>
    <div class="controls">
        <input id="id_karma_input" type="number" name="karma_input" style="width:{{karma_slider_width}}%"
               data-slider-id="karma"
               data-slider-min="0"
               data-slider-value="0"
               data-slider-rangeHighlights='[{ "start": {{karma_floor}}, "end": {{Constants.MAX_KARMA}}, "class": "disabled" }]'
               {% if treatment <= 2 %}
                   data-slider-max="{{karma_floor}}"
                   data-slider-step="1"
                   data-slider-ticks="[{% for i in karma_range %}{{i}}, {% endfor %}{{karma_floor}}]"
                   data-slider-ticks-labels='[{% for i in karma_range %}"{{i}}", {% endfor %}"{{karma_floor}}"]'
               {% else %}
                   data-slider-max="{{half_bid}}"
                   data-slider-step="{{half_bid}}"
                   data-slider-ticks="[0, {{half_bid}}]"
                   data-slider-ticks-labels='["0", "{{half_bid}}"]'
               {% endif %}/>
    </div>
</div>

{% if form.karma_input.errors %}{{ form.karma_input.errors.0 }}{% endif %}

<script>
        $('#id_karma_input').slider({
            id: 'karma',
            min: 0,
            value: 0,
            {% if treatment <= 2 %}
                max: {{karma_floor}},
                step: 1,
            {% else %}
                max: {{half_bid}},
                step: {{half_bid}},
            {% endif %}
            rangeHighlights: [{ "start": {{karma_floor}}, "end": {{Constants.MAX_KARMA}}, "class": "disabled" }]});
</script>

<style>
        #karma .slider-selection {
            background: #81bfde;
        }

        #karma .slider-rangeHighlight.disabled {
            background: #808080;
        }

</style>

{% next_button %}

{% endblock %}