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

{% block title %}<em style="color: blue;">Second Row - Decision</em>{% endblock %}

{% block content %}


<p>In addition to your show-up fee of $5.00 and participation fee of $5.00, you now possess an additional {{ Constants.endowment }} for the task.
    You can keep any amount you wish, and you can share any amount with the paired participant in the third row.</p>

<ul>
    <li>Any amount you keep will be included in your final compensation.</li>
    <li>Any amount you share will be multiplied by {{ Constants.multiplier }} and given to the participant in the third row.</li>
    <li>The participant in the third row can then return any amount between 0 and {{ Constants.multiplier }}× what you shared.</li>
</ul>

<div class="mb-3">
  <label class="form-label">
    How much of the {{ Constants.endowment }} would you like to share with your partner in the third row?
  </label>
  <input
    type="number"
    name="sender_decision"
    min="0"
    max="{{ Constants.endowment }}"
    step="0.01"
    class="form-control"
    required
  >
  <div class="form-text">
    You keep <em>{{ Constants.endowment }} − amount shared</em>. Your partner receives <em>{{ Constants.multiplier }}× amount shared</em>.
  </div>
</div>

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

<script>
  (function () {
    const input = document.querySelector('input[name="sender_decision"]');
    const form = document.querySelector('form');
    if (!input || !form) return;

    form.addEventListener('submit', function (e) {
      const min = parseFloat(input.getAttribute('min')) || 0;
      const max = parseFloat(input.getAttribute('max')) || 10;
      const val = parseFloat(input.value);
      if (isNaN(val) || val < min || val > max) {
        e.preventDefault();
        alert(`Please enter a number between ${min} and ${max}.`);
        input.focus();
      }
    });
  })();
</script>

{% endblock %}