{{ extends 'global/Page.html' }}
{{ block title }}Block {{ block_num }}, Round {{ round_in_block }}{{ 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>center outcome</strong> this block:</td>
        <td style="font-weight:bold; color:#1a6b1a;">{{ ctr_point }}</td>
      </tr>
      <tr>
        <td>Your <strong>best outcome</strong> this round:</td>
        <td style="font-weight:bold; color:#29ab2b;">{{ ideal_point }}</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.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 + 18);
      }

      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 (draw before the axis so it sits behind)
      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;

      // Others' center points (gray, no label, slightly smaller)
      JSON.parse('{{ others_ctr_json }}').forEach(function(v) {
        const dx = startX + (v / 100) * (endX - startX);
        ctx.beginPath(); ctx.arc(dx, lineY, 4, 0, 2 * Math.PI);
        ctx.fillStyle = "#999"; ctx.fill();
      });

      // Above (sign=1): policy options — offset heights only when close
      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 }},    "A",                 "#000", 1,  lenA, 'square');
      drawDot({{ policy_B }},    "B",                 "#000", 1,  lenB, 'square');
      drawDot({{ ideal_point }}, "Your best outcome", "#000",    -1, 60,   'person');
    })();
  </script>

  <div style="max-width: 740px; margin: auto;">
    <p style="text-align:center; color:#555; margin-top:6px; font-size:0.95em;">
      You and 8 others each make a choice. The option chosen by the majority becomes the group outcome.
    </p>

    <!-- Choice buttons -->
    <div style="text-align:center; margin-top: 20px;">
    <p style="font-size:1.1em;"><strong>Which option do you choose?</strong></p>
    <button type="submit" name="vote" value="A"
            style="font-size:1.2em; padding:10px 40px; margin:8px; background:white; color:#111; border:2px solid #333; border-radius:6px; cursor:pointer;">
      Option A
    </button>
    <button type="submit" name="vote" value="B"
            style="font-size:1.2em; padding:10px 40px; margin:8px; background:white; color:#111; border:2px solid #333; border-radius:6px; cursor:pointer;">
      Option B
    </button>
    </div>
  </div>

{{ endblock }}