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

{% block content %}
    {% tracking_time %}
    {% tracking_focus %}
<link rel="stylesheet" href="{% static 'global/instructions.css' %}"/>
<script>
    $(document).ready(function() {
    $(".otree-btn-next").text("Submit");
  })
</script>
<div class="instructions">
    You have been matched with two other individuals; one from your own group and one from the other group.
    <ul>
      <li> In this round, you make three decisions. For each decision you have a certain amount of money. The sum of the amounts across the three decisions is 100 INR. </li>
      <li> In each decision, your task is to decide how to divide the given amount between the two matched individuals.</li>
      <li> The two individuals get the sum of the amount of money you choose to give them in each decision. </li>
      <li> You get the average of the amount received by the other two. </li>

    Decision {{DecisionID}}: Your task is to divide 43 INR between the two individuals. <br>
    Please enter the amounts you want to give to the other two (amounts can be anything from 0 INR to 43 INR):

</div>
	{% csrf_token %}
    <br>
    {% for field in form  %}
    {% cycle True True False as fillable_fields silent %} 
        {% if fillable_fields %} 
            <div class="row">
              <div class="col-4">
                {{ field.label_tag }}
              </div>
              <div class="col-8">
                {{ field }}
              </div>
            </div>
        <br>
    <!-- Since we need to add a plus sign, the cycle tag executes this code only once and then not for the remaining iterations -->
        {% cycle True False as even_row silent %} 
        {% if even_row %} 
            <div class="row">
              <div class="col-4">
              </div>
              <div class="col-8 plus_sign">
                <h2>+</h2>
              </div>
            </div> 
        {% endif %}
        <br>
        {% endif %}
    {% endfor %}

    <div class="row">
        <div class="col-4">
            Total 
        </div>
        <div class="col-8">
          <div class="input-group input-group-narrow">
            <input type = "number" name="total" id="id_my_hidden_input" value="43" disabled="disabled" class='form-control'/> 
              <div class="input-group-append">
                <span class="input-group-text">INR</span>
              </div>
          </div>
          </div>
    </div>
    <br>

    <div class="row next_button">
        <div class="col-12">
            {% next_button %}
        </div>
    </div>


    <!-- CSS : Inline because it's legit one line. Okay fine, maybe it's two go away. -->
    <style>
     .plus_sign{
        padding-left: 5%;
     }
     .next_button{
        text-align: center;
     }
    </style>

{% endblock %}