{% 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 are matched with two participants; one from your own group and one from the other group. 
  <ul>
    <li>
      There is an amount of 100 INR to be distributed amongst the two of them.
    </li>
    <li>
      Your task is to decide how to divide this amount between the two.
    </li>
    <li>
      The two individuals get the amount of money you choose to give them.
    </li>
    <li>
      The amount you get will be decided by an even chance lottery (e.g., the toss of a fair coin is an even chance lottery.). With 50% chance you will get the amount you give to the member of your group and with 50% chance the amount you give to the member of the other group.
    </li>
    Please enter the amounts you want to give to the other two (amounts can be anything from 0 INR to 100 INR).
  </ul>

</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="100" 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. -->
    <!-- it's 6, venky -->
    <style>
     .plus_sign{
        padding-left: 5%;
     }
     .next_button{
        text-align: center;
     }
    </style>

{% endblock %}