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

{{ block title }}
  <p>{{if subsession.round_number == 1 }}
    Practice Period
{{ else }}
   Period {{ round_shown }} of {{ total_shown }}
{{ endif }}
  </p>
{{ endblock }}


{{ block content }}


<img  src="{{ static 'positionA7.png' }}" width="500px" />

<p> You are at <b>Position A</b> this period. </p>
<p>
    If you win, you receive <b>400</b> points; if the participant at position <b>B</b> wins, you receive <b>0</b> points; if
    the participant at position <b>C</b> wins, you receive <b>0</b> points.
</p>
<p>
    <b>Every participant must pay their bids.</b>
</p>

<div class="mb-3">

        {{ formfields }}

        <input id="slider_bid" type="range" class="form-range form-control" style="border: 0px" min="0" max="{{ endowment }}" step="0.1" list="range_labels">

        <div style="max-width: 400px"><div style="display: inline">0</div><div style="float: right; display: inline">{{ endowment|to0 }}</div></div>

    </div>

    {{ next_button }}

{{ endblock }}

{{ block scripts }}
    <script>
        $('#id_bid').change(function(){
            value = parseFloat($('#id_bid').val())
            value = value.toFixed(1)
            $('#id_bid').val(value);

            $('#slider_bid').val(value);
        });

        $('#slider_bid').change(function(){
            $('#id_bid').val($('#slider_bid').val());
        });
    </script>
{{ endblock }}