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

{% block title %}Decide How Much To Return{% endblock %}

{% block content %}

<p>
  You are the third row participant for this pairing. The second row participant sent an amount that was tripled for you.
  You now choose how much to return.
</p>

<p class="text-primary">{{ knowledge_text }}</p>

<h4>Tripled amount you received: <strong>{{ amount_received }}</strong></h4>



</ul>

<div class="mb-3">
  <label for="ret_amt" class="form-label">
    Amount you want to return
    <span class="text-muted">(0 to {{ amount_received }})</span>
  </label>
  <input
    id="ret_amt"
    name="responder_decision"
    type="number"
    class="form-control"
    step="0.01"
    min="0"
    max="{{ amount_received }}"
    required
  >
  <div class="form-text">
    You keep <em>received minus return</em>. You cannot return more than you received.
  </div>
</div>


<div class="d-flex justify-content-end">
  {{ next_button }}
</div>

<script>
  (function () {
    const form = document.querySelector("form");
    if (!form) return;

    form.addEventListener("submit", function (e) {
      const input = document.getElementById("ret_amt");
      if (!input) return; // nothing to validate when amount is 0

      const max = parseFloat(input.getAttribute("max")) || 0;
      const val = parseFloat(input.value);

    });
  })();
</script>

{% endblock %}