{{ extends 'global/Page.html' }}
{{ block title }}Block {{ block_num }} of {{ n_blocks }}{{ endblock }}

{{ block content }}
  <div style="max-width: 680px; margin: auto; text-align: center;">
    <p style="font-size: 1.1em;">
      You are about to begin <strong>Block {{ block_num }}</strong> of {{ n_blocks }}.
      This block has <strong>{{ n_rounds }} rounds</strong>.
    </p>

    <p style="font-size: 1.1em;">
      Your <strong>center outcome</strong> for this block is:
    </p>

    <p style="font-size: 2.2em; font-weight: bold; color: #1a6b1a;">
      {{ ctr_point }}
    </p>

    <p>Your best outcome each round will vary randomly around this center.<br>
    Both values will be shown to you before each decision.</p>
  </div>

  <div style="margin: 12px 50px;">
    <canvas id="ctr-canvas" style="display:block; width:100%;" height="160"></canvas>
  </div>
  <script>
    (function() {
      const canvas = document.getElementById("ctr-canvas");
      canvas.width = canvas.offsetWidth;
      const ctx    = canvas.getContext("2d");
      const startX = 10, endX = canvas.width - 10, lineY = 85;
      const ctr = {{ ctr_point }};
      const lo  = {{ range_lo }};
      const hi  = {{ range_hi }};
      const ctrX = startX + (ctr / 100) * (endX - startX);
      const loX  = startX + (lo  / 100) * (endX - startX);
      const hiX  = startX + (hi  / 100) * (endX - startX);

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

      // Major ticks every 10 with labels
      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 - 7); ctx.lineTo(tx, lineY + 7); ctx.stroke();
        ctx.fillStyle = "#333"; ctx.font = "11pt Arial"; ctx.textAlign = "center";
        ctx.fillText(i * 10, tx, lineY + 22);
      }

      // Minor ticks — only within the possible best outcomes interval
      for (let i = lo; i <= hi; i++) {
        const tx = startX + (i / 100) * (endX - startX);
        ctx.strokeStyle = "#aaa"; ctx.lineWidth = 0.75;
        ctx.beginPath(); ctx.moveTo(tx, lineY - 3); ctx.lineTo(tx, lineY + 3); ctx.stroke();
      }

      // Center point dot + stem + label
      ctx.beginPath(); ctx.arc(ctrX, lineY, 6, 0, 2 * Math.PI);
      ctx.fillStyle = "#000"; ctx.fill();
      ctx.strokeStyle = "#1a6b1a"; ctx.lineWidth = 1.5;
      ctx.beginPath(); ctx.moveTo(ctrX, lineY); ctx.lineTo(ctrX, lineY - 35); ctx.stroke();
      ctx.fillStyle = "#1a6b1a"; ctx.font = "bold 11pt Arial"; ctx.textAlign = "center";
      ctx.fillText("Your Center Point", ctrX, lineY - 46);

      // Curly brace below axis spanning [loX, hiX]
      (function drawHBrace(x1, x2, y) {
        const mid = (x1 + x2) / 2, r = 6, armY = y + 14, tipY = y + 26;
        ctx.beginPath();
        ctx.moveTo(x1, y);
        ctx.quadraticCurveTo(x1, armY, x1 + r, armY);
        ctx.lineTo(mid - r, armY);
        ctx.quadraticCurveTo(mid, armY, mid, tipY);
        ctx.quadraticCurveTo(mid, armY, mid + r, armY);
        ctx.lineTo(x2 - r, armY);
        ctx.quadraticCurveTo(x2, armY, x2, y);
        ctx.strokeStyle = "#555"; ctx.lineWidth = 1.5; ctx.stroke();
      })(loX, hiX, lineY + 10);

      ctx.fillStyle = "#555"; ctx.font = "11pt Arial"; ctx.textAlign = "center";
      ctx.fillText("Your possible Best Outcomes", (loX + hiX) / 2, lineY + 54);
    })();
  </script>

  <div style="text-align: center; margin-top: 16px;">
    {{ next_button }}
  </div>

{{ endblock }}