{{block style}}
<style>
  .gamble-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin-bottom: 30px;
  }

  .gamble-option {
    width: 30%;
    border: 1px solid #ddd;
    padding: 15px;
    margin: 0 2%;
    border-radius: 5px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
  }

  .gamble-option .outcome-table {
    flex-grow: 1;
  }

  .gamble-header {
    text-align: center;
    background-color: #f9f9f9;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 5px 5px 0 0;
  }

  .outcome-list {
    list-style-type: none;
    padding-left: 0;
  }

  .outcome-list li {
    margin-bottom: 10px;
  }

  .radio-input {
    display: none;
  }

  .radio-label {
    display: block;
    text-align: center;
    margin-top: auto;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
    background-color: #f0f0f0;
  }

  .radio-label:hover {
    background-color: #ddd;
  }

  .radio-label.active {
    background-color: #aaa;
    transform: scale(0.95);
  }

  input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
  }

  .outcome-table {
    width: 100%;
    border-collapse: collapse;
    font-family: Arial, sans-serif;
    margin-bottom: 20px;
  }

  .outcome-table th,
  .outcome-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
  }

  .outcome-table th {
    background-color: #f2f2f2;
    color: black;
  }

  .outcome-table tbody tr:nth-child(even) {
    background-color: #f5f5f5;
  }

  .outcome-table tbody tr:hover {
    background-color: #ddd;
  }

  .otree-btn-next {
    display: none;
  }

  .gamble {
    opacity: 1.;
    pointer-events: auto;
  }

  .selected-gamble {
    outline: 2px solid green;
    outline-offset: -2px;
    background-color: #e9ffe9;
  }

  .realized-gamble-row {
    background-color: #ffffe0;
    outline: 2px solid #222;
    outline-offset: -2px;
  }

  .select-gamble-btn {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 4px;
    opacity: 0.5;
    pointer-events: none;
  }

  .centered-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .otree-title {
    text-align: center;
  }

  .wheel-box {
    position: relative;
    margin-top: 15px;
    display: flex;
    justify-content: center;
  }

  .wheel-box canvas {
    display: block;
  }

  .wheel-pointer-marker {
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 18px solid #333;
    z-index: 10;
  }
</style>
{{endblock}}

{{ block title }}
Select a gamble
{{ endblock }}
{{ block content }}


<div class="gamble-container gamble">
  {{ for option in gamble_data.options }}
  <div class="gamble-option">
    <div class="gamble-header">
      <h3>{{ option.option_name }}</h3>
    </div>
    <table class="outcome-table">
      <thead>
        <tr>
          <th>Probability</th>
          <th>Payoff</th>
        </tr>
      </thead>
      <tbody>
        {{ for outcome in option.outcomes }}
        <tr class="outcome-row" data-gamble="{{ option.option_name }}" data-outcome="{{ outcome.outcome_name }}">
          <td>{{ outcome.percentage }}%</td>
          <td>{{ outcome.payoff }}</td>
        </tr>
        {{ endfor }}
      </tbody>
    </table>
    <input type="radio" id="{{ option.option_name }}" name="choice" value="{{ option.option_name }}"
      onclick="enableSelect()">
    <label class="radio-label" for="{{ option.option_name }}">{{ option.option_name }}</label>

    <div class="wheel-box" data-option="{{ option.option_name }}" style="display: none;">
      <div class="wheel-pointer-marker"></div>
      <canvas class="wheel-canvas" width="240" height="240"></canvas>
    </div>
  </div>
  {{ endfor }}
</div>

<div class="centered-container">
  <p class="no-selection"></p>
  <button class="select-gamble-btn" onclick="selectGambleFunction()" type="button">Select Gamble</button>

  <p class="feedback"></p>
  <div id="listContainer"></div>

  {{ next_button }}
</div>

<script type="text/javascript">
  var feedbackCond = "{{player.feedback_cond}}";

  // --- Wheel drawing ---
  var WHEEL_COLORS = ['#4CAF50', '#2196F3', '#FF9800', '#9C27B0', '#F44336', '#00BCD4'];
  var MIN_SEGMENT_ANGLE = 0.08; // ~4.5 degrees, so tiny probabilities are still visible

  function getOutcomesForOption(optionName) {
    var options = js_vars.gamble_data.options;
    for (var i = 0; i < options.length; i++) {
      if (options[i].option_name === optionName) {
        return options[i].outcomes;
      }
    }
    return [];
  }

  function computeSegmentAngles(outcomes) {
    // Convert probabilities to angles, enforcing a minimum visual size
    var angles = outcomes.map(function (o) { return o.probability * 2 * Math.PI; });
    var totalStolen = 0;
    var largestIdx = 0;
    for (var i = 0; i < angles.length; i++) {
      if (angles[i] < MIN_SEGMENT_ANGLE) {
        totalStolen += MIN_SEGMENT_ANGLE - angles[i];
        angles[i] = MIN_SEGMENT_ANGLE;
      }
      if (angles[i] > angles[largestIdx]) largestIdx = i;
    }
    angles[largestIdx] -= totalStolen;
    return angles;
  }

  function drawRotatedWheel(canvas, outcomes, rotation, highlightIdx) {
    var ctx = canvas.getContext('2d');
    var cx = canvas.width / 2;
    var cy = canvas.height / 2;
    var radius = Math.min(cx, cy) - 10;
    var angles = computeSegmentAngles(outcomes);

    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.save();
    ctx.translate(cx, cy);
    ctx.rotate(rotation);
    ctx.translate(-cx, -cy);

    var startAngle = 0;
    for (var i = 0; i < outcomes.length; i++) {
      var endAngle = startAngle + angles[i];

      // Draw segment
      ctx.beginPath();
      ctx.moveTo(cx, cy);
      ctx.arc(cx, cy, radius, startAngle - Math.PI / 2, endAngle - Math.PI / 2);
      ctx.closePath();
      ctx.fillStyle = WHEEL_COLORS[i % WHEEL_COLORS.length];
      ctx.fill();
      ctx.strokeStyle = '#fff';
      ctx.lineWidth = 2;
      ctx.stroke();

      // Label (counter-rotated so text stays upright)
      var midAngle = (startAngle + endAngle) / 2 - Math.PI / 2;
      var labelRadius = radius * 0.65;
      var lx = cx + labelRadius * Math.cos(midAngle);
      var ly = cy + labelRadius * Math.sin(midAngle);

      ctx.save();
      ctx.translate(lx, ly);
      ctx.rotate(-rotation);
      ctx.fillStyle = '#fff';
      ctx.font = 'bold 16px Arial';
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      ctx.fillText(outcomes[i].payoff.toString(), 0, 0);
      // Show percentage below payoff
      ctx.font = '12px Arial';
      ctx.fillText(outcomes[i].percentage + '%', 0, 18);
      ctx.restore();

      startAngle = endAngle;
    }

    ctx.restore();

    // Gold highlight on winning segment
    if (highlightIdx !== null && highlightIdx !== undefined) {
      ctx.save();
      ctx.translate(cx, cy);
      ctx.rotate(rotation);
      ctx.translate(-cx, -cy);
      var hStart = 0;
      for (var j = 0; j < highlightIdx; j++) {
        hStart += angles[j];
      }
      var hEnd = hStart + angles[highlightIdx];
      ctx.beginPath();
      ctx.moveTo(cx, cy);
      ctx.arc(cx, cy, radius, hStart - Math.PI / 2, hEnd - Math.PI / 2);
      ctx.closePath();
      ctx.strokeStyle = '#FFD700';
      ctx.lineWidth = 4;
      ctx.stroke();
      ctx.restore();
    }
  }

  function spinWheel(canvas, outcomes, targetIdx, onComplete) {
    var angles = computeSegmentAngles(outcomes);
    // Calculate the angle to the midpoint of the target segment
    var targetStart = 0;
    for (var i = 0; i < targetIdx; i++) {
      targetStart += angles[i];
    }
    var targetMid = targetStart + angles[targetIdx] / 2;

    // Spin several full turns, then land so targetMid aligns with the top (pointer)
    var fullRotations = 3 + Math.floor(Math.random() * 2);
    var totalRotation = fullRotations * 2 * Math.PI + (2 * Math.PI - targetMid);

    var duration = 1500;
    var startTime = null;

    function easeOutCubic(t) {
      return 1 - Math.pow(1 - t, 3);
    }

    function animate(timestamp) {
      if (!startTime) startTime = timestamp;
      var elapsed = timestamp - startTime;
      var progress = Math.min(elapsed / duration, 1);
      var easedProgress = easeOutCubic(progress);
      var currentRotation = totalRotation * easedProgress;

      drawRotatedWheel(canvas, outcomes, currentRotation, null);

      if (progress < 1) {
        requestAnimationFrame(animate);
      } else {
        // Final frame with highlight
        drawRotatedWheel(canvas, outcomes, totalRotation, targetIdx);
        if (onComplete) setTimeout(onComplete, 300);
      }
    }

    requestAnimationFrame(animate);
  }

  // --- Page logic ---

  function enableSelect() {
    document.querySelector(".select-gamble-btn").style.opacity = "1";
    document.querySelector(".select-gamble-btn").style.pointerEvents = "auto";
  }

  function selectGambleFunction() {
    var activeLabel = document.querySelector(".radio-label.active");

    if (activeLabel) {
      var select_btn = document.querySelector(".select-gamble-btn");
      select_btn.style.display = "none";
      var gamble_table = document.querySelector(".gamble-container");
      var selectedGamble = document.querySelector(".radio-label.active").parentNode;
      selectedGamble.classList.add("selected-gamble");
      gamble_table.style.pointerEvents = "none";
      // Fade tables and labels, but not the wheel canvases
      gamble_table.querySelectorAll('.outcome-table, .gamble-header, .radio-label').forEach(function (el) {
        el.style.opacity = "0.5";
      });
      document.querySelector(".no-selection").innerHTML = "";

      // Always send immediately; wheel animation happens in liveRecv
      liveSend({ choice: activeLabel.innerHTML });
    } else {
      document.querySelector(".no-selection").innerHTML = "Please select a gamble.";
    }
  }

  document.addEventListener('DOMContentLoaded', function () {
    let labels = document.querySelectorAll('.radio-label');

    labels.forEach(function (label) {
      label.addEventListener('click', function () {
        labels.forEach(function (innerLabel) {
          innerLabel.classList.remove('active');
        });
        label.classList.add('active');
      });
    });

    let player_choice = "{{player.choice}}";
    if (player_choice != "-1") {
      var radioButton = document.getElementById(player_choice);
      radioButton.checked = true;
      radioButton.classList.add('active');
      var label = document.querySelector('label[for="' + player_choice + '"]');
      label.classList.add('active');
      selectGambleFunction();
    }
  });

  function generateOrderedListFromChoices(choicesArray) {
    let olElement = document.createElement('ul');
    choicesArray.forEach(function (item) {
      let liElement = document.createElement('li');
      liElement.textContent = 'Choice ' + item.choice + ': Payoff ' + item.payoff;
      olElement.appendChild(liElement);
    });
    let container = document.getElementById('listContainer');
    container.appendChild(olElement);
  }

  function showFeedbackText(data) {
    var feedback_p = document.querySelector(".feedback");
    if (feedbackCond === "partial_feedback") {
      feedback_p.innerHTML = 'You selected ' + data.choice + '. The gamble was realized and you received the payoff ' + data.payoff + '.';
      var row = document.querySelectorAll('.outcome-row[data-outcome="' + data.outcome_name + '"]')[0];
      row.classList.add("realized-gamble-row");
    } else if (feedbackCond === "full_feedback") {
      feedback_p.innerHTML = 'You selected <strong>' + data.choice + '</strong>. The gambles were realized and you received the payoff ' + data.payoff + '. <br> The realized outcomes from all the gambles are shown below:';
      generateOrderedListFromChoices(JSON.parse(data.all_outcomes));
      var outcomes = JSON.parse(data.all_outcomes);
      outcomes.forEach(function (outcome) {
        var rows = document.querySelectorAll('.outcome-row[data-outcome="' + outcome.outcome_name + '"]');
        rows.forEach(function (row) {
          row.classList.add("realized-gamble-row");
        });
      });
    }
  }

  function getWheelForOption(optionName) {
    return document.querySelector('.wheel-box[data-option="' + optionName + '"]');
  }

  function liveRecv(data) {
    var skipAnimation = (data.type === "outcome");

    if (feedbackCond === "no_feedback") {
      document.querySelector(".otree-btn-next").style.display = "block";
    } else if (skipAnimation) {
      // Page refresh: show result immediately, no wheel
      showFeedbackText(data);
      document.querySelector(".otree-btn-next").style.display = "block";
    } else if (feedbackCond === "partial_feedback") {
      // Single wheel below the chosen option
      var wheelBox = getWheelForOption(data.choice);
      var canvas = wheelBox.querySelector('.wheel-canvas');
      var outcomes = getOutcomesForOption(data.choice);
      wheelBox.style.display = "flex";

      spinWheel(canvas, outcomes, data.outcome_idx, function () {
        showFeedbackText(data);
        document.querySelector(".otree-btn-next").style.display = "block";
      });
    } else if (feedbackCond === "full_feedback") {
      // Two wheels simultaneously, one below each option
      var allOutcomes = JSON.parse(data.all_outcomes);
      var wheelsFinished = 0;
      var totalWheels = allOutcomes.length;

      function onWheelDone() {
        wheelsFinished++;
        if (wheelsFinished === totalWheels) {
          showFeedbackText(data);
          document.querySelector(".otree-btn-next").style.display = "block";
        }
      }

      allOutcomes.forEach(function (outcomeData) {
        var wheelBox = getWheelForOption(outcomeData.choice);
        var canvas = wheelBox.querySelector('.wheel-canvas');
        var displayOutcomes = getOutcomesForOption(outcomeData.choice);
        wheelBox.style.display = "flex";

        spinWheel(canvas, displayOutcomes, outcomeData.outcome_idx, onWheelDone);
      });
    }
  }
</script>


{{ endblock }}