{% 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> You get the average of the amount that the other two get. </li>
  </ul>
  Please enter the amounts you want to give to the other two (amounts can be anything from 0 INR to 100 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="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. -->
    <style>
     .plus_sign{
        padding-left: 5%;
     }
     .next_button{
        text-align: center;
     }
    </style>

{% endblock %}