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

{% block title %}Predict Returns for Each Pairing{% endblock %}

{% block content %}

<p class="mb-3">
  Below there are four pairings between a <strong><span style="color:blue;">second row</span></strong> participant
  and a <strong><span style="color:green;">third row</span></strong> participant, shown in random order.
  Within the four pairings, there are two separate groups. Each group has a high-performing <strong><span style="color:green;">third-row</span></strong> participant
  and a low performing <strong><span style="color:green;">third-row</span></strong> participant (based on an effort-based task).
  In one group, the <strong><span style="color:green;">third-row</span></strong> participant <strong>knows</strong> their performance outcome,
  and in the other group, the <strong><span style="color:green;">third-row</span></strong> participant <strong>does not know</strong> their performance outcome
  (as stated below for each pair).
  <br><br>
  For each pair below, enter how much you think the <strong><span style="color:green;">third row</span></strong> participant will return.
  One pairing will be randomly chosen for payment. Your bonus depends on how close your prediction is to the actual return.
</p>

{% for item in items %}
  <div class="card mb-3
      {% if "knows" in item.knowledge_text %}
          border-success
      {% else %}
          border-info
      {% endif %}
  ">
    <div class="card-body">
      <h5 class="card-title">
        Pair {{ item.display_index }} — <strong>Third-Row Participant was a
        {% if item.slot == 1 %}Top performer{% else %}Bottom performer{% endif %}</strong>
      </h5>

      <ul class="mb-3">
        <li>Second row sent: <strong>${{ item.amount_sent_fmt }}</strong></li>
        <li>Tripled amount received by third row: <strong>${{ item.amount_received_fmt }}</strong></li>
        <li class="{% if "knows" in item.knowledge_text %}text-success fw-bold{% else %}text-info fw-bold{% endif %}">
          Third row {{ item.knowledge_text }}
        </li>
      </ul>

      <div class="mb-2">
        <label for="pred{{ forloop.counter }}" class="form-label">
          Your predicted return for this pairing
          <span class="text-muted">(0 to ${{ item.amount_received_fmt }})</span>
        </label>
        <input
          id="pred{{ forloop.counter }}"
          name="pred_pair{{ forloop.counter }}"
          type="number"
          class="form-control"
          step="0.01"
          min="0"
          max="{{ item.amount_received }}"
          required
        >
      </div>
    </div>
  </div>
{% endfor %}


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

<script>
  // Lightweight guard to prevent obvious mistakes before submit.
  (function () {
    const form = document.querySelector("form");
    if (!form) return;
    form.addEventListener("submit", function (e) {
      const cards = document.querySelectorAll('input[id^="pred"]');
      for (const input of cards) {
        const max = parseFloat(input.getAttribute("max")) || 0;
        const val = parseFloat(input.value);
        if (isNaN(val) || val < 0 || val > max) {
          e.preventDefault();
          alert("Each prediction must be between 0 and the tripled amount shown on the card.");
          input.focus();
          return false;
        }
      }
    });
  })();
</script>

{% endblock %}