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

{% block title %}
Joint Valuation - Trial {{ round_number }}
{% endblock %}

{% block content %}
<h1>Joint Valuation - Trial {{ round_number }}</h1>

<p>
  Which fruit is <strong>more valuable</strong> after the joint task?
  Move the slider toward the fruit you think is more valuable.
  The further you move it, the more confident you are.
</p>

<form method="post" id="val_form">

  <div style="display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:12px;">
    <div style="text-align:center; width:140px;">
        <svg width="56" height="56">
            <polygon
              points="28,7 7,49 49,49"
              fill="{{ option1_color }}"
              stroke="black"
              stroke-width="2"
              vector-effect="non-scaling-stroke"
            />
          </svg>
      <div style="margin-top:6px;"><strong>Option 1</strong></div>
    </div>

    <div style="flex:1; text-align:center;">
      <input
        type="range"
        id="choice_joint"
        name="rel_value_joint"
        min="-100"
        max="100"
        step="1"
        value="0"
        style="width:100%;"
      />
      <div style="display:flex; justify-content:space-between; font-size:0.9rem; margin-top:6px;">
        <span>Option 1</span>
        <span>Option 2</span>
      </div>

      <div style="margin-top:10px; font-size:0.95rem;">
        Current choice:
        <strong id="choice_text">Equal</strong>
        &nbsp;|&nbsp;
        Confidence:
        <strong><span id="conf_text">0</span>/100</strong>
      </div>
    </div>

    <div style="text-align:center; width:140px;">
        <svg width="56" height="56">
            <polygon
              points="28,7 7,49 49,49"
              fill="{{ option2_color }}"
              stroke="black"
              stroke-width="2"
              vector-effect="non-scaling-stroke"
            />
          </svg>
      <div style="margin-top:6px;"><strong>Option 2</strong></div>
    </div>
  </div>

  <br>
  <button type="submit">Submit</button>
</form>
{% endblock %}

{% block scripts %}
<script>
(function () {
  const slider = document.getElementById("choice_joint");
  const choiceText = document.getElementById("choice_text");
  const confText   = document.getElementById("conf_text");

  function update() {
    const x = parseInt(slider.value, 10);
    const conf = Math.abs(x);

    if (x === 0) choiceText.textContent = "Equal";
    else if (x < 0) choiceText.textContent = "Option 1";
    else choiceText.textContent = "Option 2";

    confText.textContent = conf;
  }

  slider.addEventListener("input", update);
  update();
})();
</script>
{% endblock %}