{{ extends 'global/Page.html' }}
{{ block title }}Block {{ block_num }}, Round {{ round_in_block }} — Result{{ endblock }}

{{ block content }}
<div style="max-width: 740px; margin: auto;">

  <table style="margin: 0 auto 12px auto; font-size: 1.05em; border-collapse: separate; border-spacing: 24px 4px;">
    <tr>
      <td>Your <strong>best outcome</strong> this round:</td>
      <td style="font-weight:bold; color:#29ab2b;">{{ ideal_point }}</td>
    </tr>
    <tr>
      <td><strong>Group outcome:</strong></td>
      <td style="font-weight:bold;">
        {{ if winning_option == 'A' }}
          ★ Option A<br>({{ winning_policy }})
        {{ else }}
          ★ Option B<br>({{ winning_policy }})
        {{ endif }}
      </td>
    </tr>
    <tr>
      <td><strong>Round earnings:</strong></td>
      <td style="font-weight:bold; font-size:1.15em;">{{ round_payoff }} points</td>
    </tr>
  </table>

</div>

  <!-- Number line -->
  <div style="margin: 12px 50px;">
    <canvas id="number-line" style="display:block; width:100%;" height="280"></canvas>
  </div>
  <script>
    (function() {
      const canvas = document.getElementById("number-line");
      canvas.width = canvas.offsetWidth;
      const ctx    = canvas.getContext("2d");
      const startX = 10, endX = canvas.width - 10, lineY = 123;

      // Axis
      ctx.strokeStyle = "#333"; ctx.lineWidth = 2;
      ctx.beginPath(); ctx.moveTo(startX, lineY); ctx.lineTo(endX, lineY); ctx.stroke();

      // Ticks 0–100
      for (let i = 0; i <= 10; i++) {
        const tx = startX + (i / 10) * (endX - startX);
        ctx.strokeStyle = "#333"; ctx.lineWidth = 1;
        ctx.beginPath(); ctx.moveTo(tx, lineY - 5); ctx.lineTo(tx, lineY + 5); ctx.stroke();
        ctx.fillStyle = "#333"; ctx.font = "11pt Arial"; ctx.textAlign = "center";
        ctx.fillText(i * 10, tx, lineY + 20);
      }
      ctx.lineWidth = 2;

      function drawDot(value, name, color, sign, lineLen, shape) {
        const dx = startX + (value / 100) * (endX - startX);
        const r = 6;
        ctx.fillStyle = color;
        if (shape === 'square') {
          ctx.fillRect(dx - r, lineY - r, r * 2, r * 2);
        } else if (shape === 'person') {
          const headR = 5, torsoR = 6;
          ctx.beginPath(); ctx.arc(dx, lineY - torsoR - headR - 1, headR, 0, 2 * Math.PI); ctx.fill();
          ctx.beginPath(); ctx.arc(dx, lineY, torsoR, Math.PI, 0, false); ctx.fill();
        } else {
          ctx.beginPath(); ctx.arc(dx, lineY, r, 0, 2 * Math.PI); ctx.fill();
        }
        ctx.setLineDash([4, 3]);
        ctx.strokeStyle = color; ctx.lineWidth = 1.5;
        ctx.beginPath(); ctx.moveTo(dx, lineY); ctx.lineTo(dx, lineY - sign * lineLen); ctx.stroke();
        ctx.setLineDash([]);
        ctx.lineWidth = 2;
        ctx.fillStyle = "#000"; ctx.font = "bold 11pt Arial"; ctx.textAlign = "center";
        if (sign === 1) {
          ctx.fillText(name,              dx, lineY - lineLen - 30);
          ctx.fillText("(" + value + ")", dx, lineY - lineLen - 14);
        } else {
          ctx.fillText(name,              dx, lineY + lineLen + 14);
          ctx.fillText("(" + value + ")", dx, lineY + lineLen + 30);
        }
      }

      // Shaded possible-range band
      const loX = startX + ({{ range_lo }} / 100) * (endX - startX);
      const hiX = startX + ({{ range_hi }} / 100) * (endX - startX);
      const bArm = 6;
      ctx.strokeStyle = "#1a6b1a"; ctx.lineWidth = 1.5;
      ctx.beginPath(); ctx.moveTo(loX + bArm, lineY - 8); ctx.lineTo(loX, lineY - 8); ctx.lineTo(loX, lineY + 8); ctx.lineTo(loX + bArm, lineY + 8); ctx.stroke();
      ctx.beginPath(); ctx.moveTo(hiX - bArm, lineY - 8); ctx.lineTo(hiX, lineY - 8); ctx.lineTo(hiX, lineY + 8); ctx.lineTo(hiX - bArm, lineY + 8); ctx.stroke();
      ctx.lineWidth = 2;

      // Above: policy options — star on the group winner; offset heights only when close
      const wonA  = "{{ winning_option }}" === "A";
      const nameA = (wonA  ? "★ A" : "A");
      const nameB = (!wonA ? "★ B" : "B");
      const xA = startX + ({{ policy_A }} / 100) * (endX - startX);
      const xB = startX + ({{ policy_B }} / 100) * (endX - startX);
      const lenA = Math.abs(xB - xA) < 60 ? 45 : 60;
      const lenB = Math.abs(xB - xA) < 60 ? 80 : 60;
      drawDot({{ policy_A }},    nameA,               "#000", 1,  lenA, 'square');
      drawDot({{ policy_B }},    nameB,               "#000", 1,  lenB, 'square');
      drawDot({{ ideal_point }}, "Your best outcome", "#000",    -1, 60,   'person');
    })();
  </script>

  <div style="text-align:center; margin-top: 16px;">
    {{ next_button }}
  </div>
  <script>
    setTimeout(function() {
      document.querySelector('button[type="submit"]').click();
    }, 2000);
  </script>

{{ endblock }}