{{ block title }}{{ endblock }}

{{ block styles }}
<style>
  @import "{% static 'negotiate.css' %}";
  .demo-wrap { align-self: start; width: 100%; }
  .board { display:flex; flex-direction:column; align-items:center; margin-top:0.5rem; }
  .row   { display:flex; justify-content:center; margin-top:-0.3em; }
  .cell  { width:2.5em; height:2.5em; border-radius:50%; border:3px solid gray; background:rgba(200,200,200,.5);
           display:flex; align-items:center; justify-content:center; cursor:pointer; margin:1px; position:relative; }
  .cell:hover { background:rgba(200,200,200,.8); }
  .ring { position:absolute; border-style:solid; border-width:4px; border-radius:50%; pointer-events:none; }
  .ring-1 { width:90%; height:90%; top:5%; left:5%; }
  .ring-green { border-color:rgba(50,205,50,0.9); }
  .gain-box { font-weight:bold; margin:.15em 0; }
  .quiz-instruction { margin:.25rem 0 .75rem; font-weight:600; }
  .status { margin-top:.75rem; font-weight:bold; }
  .otree-btn-next { display:none !important; } /* we click it via JS */
  .label-green  { color: rgb(50,205,50); }   /* You */
  .label-purple { color: rgb(186,85,211); }  /* AI */
  .label-blue   { color: rgb(30,144,255); }  /* Human */
  .participant-block {
    display: flex;
    flex-direction: column;
    align-items: center;   /* stack vertically, centered */
    margin-top: 0.5em;
  }
  .participant-block p {
    margin: 0.15em 0;
  }
  .label-green, .label-purple, .label-blue {
    font-weight: bold;     /* make labels bold */
  }
</style>
{{ endblock }}

{% block content %}
<div class="demo-wrap">
  <!-- This hidden input is inside oTree’s auto form wrapper -->
  <input type="hidden" name="quiz_action" id="quiz_action" value="">

  <h3>Quiz</h3>
  <div class="quiz-instruction">
    Choose a cell where <span style="color:green">You = 9</span> and <span style="color:purple">AI = 3</span>.
    Attempts left: {{ attempts_left }}
  </div>

  <table border="0" width="100%">
    <tr>
    <!-- LEFT TOP = AI -->
    <td width="15%" style="vertical-align:top;">
      <div class="participant-block">
       <img src="{% static 'images/ai_silhouette.svg' %}" alt="AI silhouette" width="40">
        <p class="label-purple">AI</p>
       <p class="gain-box" id="gain-a"> --</p>
     </div>
    </td>
    <td style="text-align:center; vertical-align:top;">
      <div id="triangle-board" class="board"></div>
    </td>

    <!-- RIGHT TOP = Human -->
    <td width="15%" style="vertical-align:top;">
      <div class="participant-block">
        <img src="{% static 'images/human_silhouette.svg' %}" alt="Human silhouette" width="40">
        <p class="label-blue">Human</p>
        <p class="gain-box" id="gain-b"> --</p>
      </div>
    </td>

    </tr>

    <tr>
      <td></td>
      <td style="text-align:center">
        <div class="participant-block">
          <img src="{% static 'images/human_silhouette.svg' %}" alt="You" width="40">
          <p class="label-green">You</p>
          <p class="gain-box" id="gain-you"> --</p>
        </div>
      </td>
      <td></td>
    </tr>

  </table>

  <div id="status" class="status"></div>

  {{ next_button }}
</div>
{% endblock %}

{{ block scripts }}
<script>
  function clearRings(el){ el.querySelectorAll('.ring').forEach(r => r.classList.remove('ring-green')); }

  function createCell(row, col){
    const d = document.createElement('div');
    d.className = 'cell';
    d.dataset.row = row;
    d.dataset.col = col;

    const r1 = document.createElement('div');
    r1.className = 'ring ring-1';
    r1.id = `ring_${row}_${col}_1`;
    d.appendChild(r1);

    d.addEventListener('mouseenter', () => showGains(row, col));
    d.addEventListener('mouseleave', resetGains);
    d.addEventListener('click', () => evaluateChoice(d));
    return d;
  }

  function createBoard(){
    const board = document.getElementById('triangle-board');
    const counts = [13,12,11,10,9,8,7,6,5,4,3,2,1]; // same as main game
    counts.forEach((cnt, idx) => {
      const row = idx + 1; // 1..13 from top to bottom
      const rowDiv = document.createElement('div');
      rowDiv.className = 'row';
      for(let col=1; col<=cnt; col++){
        rowDiv.appendChild(createCell(row, col));
      }
      board.appendChild(rowDiv);
    });
  }

  function showGains(row, col){
    document.getElementById('gain-you').textContent = ' ' + (row - 1);
    document.getElementById('gain-a').textContent   = ' ' + (14 - row - col); // AI (left/top)
    document.getElementById('gain-b').textContent   = ' ' + (col - 1);        // Human (right/top)
  }
  function resetGains(){
    document.getElementById('gain-you').textContent = ' --';
    document.getElementById('gain-a').textContent   = ' --';
    document.getElementById('gain-b').textContent   = ' --';
  }

  function evaluateChoice(cell){
    // Visual ring
    document.querySelectorAll('.cell').forEach(clearRings);
    document.getElementById(`ring_${cell.dataset.row}_${cell.dataset.col}_1`).classList.add('ring-green');

    // Compute payoffs
    const row = Number(cell.dataset.row);
    const col = Number(cell.dataset.col);
    const you = row - 1;
    const ai  = 14 - row - col;

    const status = document.getElementById('status');
    const actionInput = document.getElementById('quiz_action');

    if (you === 9 && ai === 3){
      status.textContent = '✅ Correct!';
      status.style.color = 'green';
      actionInput.value = 'correct';
    } else {
      status.textContent = '❌ Not correct. Submitting attempt…';
      status.style.color = 'red';
      actionInput.value = 'wrong';
    }

    document.querySelector('button.otree-btn-next').click();
  }

  document.addEventListener('DOMContentLoaded', createBoard);
</script>
{{ endblock }}