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

{% block scripts %}
    <script src="https://cdn.rangetouch.com/2.0.0/rangetouch.js"></script>
    <script type="text/javascript" src="{% static "global/js/range_input_standard.js" %}"></script>
    <script type="text/javascript">
        $(function () {
            var touch = {{ touch|json }};
            if (touch) {const ranges = RangeTouch.setup('input[type="range"]');}
            rangeInput()
        })
    </script>
{% endblock %}
{% block styles %}
    <link rel="stylesheet" type="text/css" href="{% static "global/css/range_input.css" %}">
{% endblock %}

{% block title %}
    Preference for the present
{% endblock %}

{% block content %}
    <div class="wrapper">
        <div class="wrapper instructions text-center">
            <p>
            Activity Reminder: <br>
            5 credits were allocated to a participant, who then chose how much to keep and how much to invest for the future. The invested credits were doubled.
            </p>
        </div>

        <div class="section my-5 px-4">
          <p align="center">
              <b>How many credits do you think probationary officers have invested for the future, on average?<br></b>
              <div class="container-fluid">
                  <div class="row text-center d-flex">
                      <div class="col-2 align-self-center"></div>
                      <div class="col-2 align-self-center">{{ min_label }}</div>
                      <div class="col-6 align-self-center">{% formfield player.avg_invest %}</div>
                      <div class="col-2 align-self-center">{{ max_label }}</div>
                  </div>
              </div>
          </p>
          <p align="center">
              <b>How many credits do you think women invested, on average? Men?<br></b>
              <div class="container-fluid">
                  <div class="row text-center d-flex">
                      <div class="col-2 align-self-center">Women:</div>
                      <div class="col-2 align-self-center">{{ min_label }}</div>
                      <div class="col-6 align-self-center">{% formfield player.avg_invest_girls %}</div>
                      <div class="col-2 align-self-center">{{ max_label }}</div>
                  </div>
                  <div class="row text-center d-flex">
                      <div class="col-2 align-self-center">Men:</div>
                      <div class="col-2 align-self-center">{{ min_label }}</div>
                      <div class="col-6 align-self-center">{% formfield player.avg_invest_boys %}</div>
                      <div class="col-2 align-self-center">{{ max_label }}</div>
                  </div>
              </div>
          </p>
        </div>

        <div class="section px-4">
          <p align="center">
              <b>Now, if you could pick an ideal level of preference for the present, how many credits would you like probationary officers to invest for the future?<br></b>

              <div class="container-fluid">
                  <div class="row text-center d-flex">
                      <div class="col-2 align-self-center">All the probationary officers:</div>
                      <div class="col-2 align-self-center">{{ min_label }}</div>
                      <div class="col-6 align-self-center">{% formfield player.should_invest %}</div>
                      <div class="col-2 align-self-center">{{ max_label }}</div>
                  </div>
                  <div class="row text-center d-flex">
                      <div class="col-2 align-self-center">Women:</div>
                      <div class="col-2 align-self-center">{{ min_label }}</div>
                      <div class="col-6 align-self-center">{% formfield player.should_invest_girls %}</div>
                      <div class="col-2 align-self-center">{{ max_label }}</div>
                  </div>
                  <div class="row text-center d-flex">
                      <div class="col-2 align-self-center">Men:</div>
                      <div class="col-2 align-self-center">{{ min_label }}</div>
                      <div class="col-6 align-self-center">{% formfield player.should_invest_boys %}</div>
                      <div class="col-2 align-self-center">{{ max_label }}</div>
                  </div>
              </div>
          </p>
        </div>

        {% next_button %}
    </div>

{% endblock %}