{% extends "global/Page.html" %}
{% load otree %}
{% block content %}
{% include "joint_inference/_styles.html" %}

<style>
.pl-row { transition: background 0.15s; }
.pl-row.pick-a td:first-child { background: #e8f5e9; font-weight: bold; }
.pl-row.pick-b td:last-child { background: #e8f5e9; font-weight: bold; }
.pl-row.switch-row { border: 2px solid #2c8a2c; }
</style>

<div style="text-align:right; color:#888; font-size:0.85em; margin-bottom:8px;">
{% if player.is_practice %}Practice trial {{ player.round_number }} of 2{% else %}Trial {{ trial_num }} of 8{% endif %}
</div>

<h3>Q2. Which report is from your partner?</h3>

<div style="display: flex; gap: 32px; flex-wrap: wrap; margin: 16px 0;">
    <div class="source-row" style="flex: 1; min-width: 280px;">
        <span class="source-label">Report A</span>
        <div class="ball-grid">{% for c in source_a %}<span class="ball {{ c }}"></span>{% endfor %}</div><span class="count-label">{{ k_a }} / 10</span>
    </div>
    <div class="source-row" style="flex: 1; min-width: 280px;">
        <span class="source-label">Report B</span>
        <div class="ball-grid">{% for c in source_b %}<span class="ball {{ c }}"></span>{% endfor %}</div><span class="count-label">{{ k_b }} / 10</span>
    </div>
</div>
<div class="source-row you-row">
    <span class="source-label" style="width: 110px;">Your sample</span>
    <div class="ball-grid">{% for c in sample %}<span class="ball {{ c }}"></span>{% endfor %}</div><span class="count-label">{{ k_i }} / {{ n_i }}</span>
</div>

<div style="background: #f0f4ff; padding: 16px; border-radius: 8px; margin: 24px 0;">
    <p style="margin-top:0;"><b>How confident are you that Report A came from your partner?</b></p>
    <p style="margin-bottom: 4px;">I think there is between a
        <b><span id="switch-lo">45</span>%</b> and
        <b><span id="switch-hi">50</span>%</b>
        chance that Report A is from my partner.</p>
    <div style="display: flex; align-items: center; gap: 16px; margin-top: 8px;">
        <span style="font-size: 0.85em; color: #666;">0%</span>
        <input type="range" min="0" max="100" step="5" value="50" id="switch-slider"
               style="flex: 1; max-width: 400px;"
               oninput="updateSwitch(parseInt(this.value))">
        <span style="font-size: 0.85em; color: #666;">100%</span>
    </div>
    <p style="font-size: 0.85em; color: #666; margin-bottom: 0;">This is the point at which you would prefer the known-probability lottery over betting that Report A is from your partner.</p>
</div>

<details style="margin: 16px 0;" {% if player.round_number == 1 %}open{% endif %}>
    <summary style="cursor: pointer; font-weight: bold;">View implied price list</summary>
    <p style="font-size: 0.85em; color: #666;">Based on your selection above, here are your choices for each row.</p>
    <table class="price-list" style="font-size: 0.85em;">
        <thead>
            <tr>
                <th class="opt-a">Option A<br><small>100 pts if Report A is from your partner</small></th>
                <th class="opt-b">Option B<br><small>100 pts with known probability</small></th>
            </tr>
        </thead>
        <tbody id="price-list-body">
            {% for pct in pcts %}
            <tr class="pl-row" id="plrow_{{ forloop.counter0 }}">
                <td class="opt-a">Bet on Report A</td>
                <td class="opt-b">{{ pct }}% lottery</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</details>

<input type="hidden" name="q2_choices_json" id="q2_choices_json">

<script>
var nRows = {{ pcts|length }};
var pcts = {{ pcts }};

function updateSwitch(switchVal) {
    // Update interval display
    var lo = Math.max(0, switchVal - 5);
    var hi = switchVal;
    if (switchVal == 0) {
        document.getElementById('switch-lo').innerText = '0';
        document.getElementById('switch-hi').innerText = '5';
    } else {
        document.getElementById('switch-lo').innerText = lo;
        document.getElementById('switch-hi').innerText = hi;
    }

    // Update price list highlighting
    for (var i = 0; i < nRows; i++) {
        var row = document.getElementById('plrow_' + i);
        row.classList.remove('pick-a', 'pick-b', 'switch-row');
        if (pcts[i] < switchVal) {
            row.classList.add('pick-a');
        } else {
            row.classList.add('pick-b');
        }
        if (pcts[i] == switchVal) {
            row.classList.add('switch-row');
        }
    }
}

// Initialize
updateSwitch(50);

document.querySelector('form').addEventListener('submit', function(e) {
    var switchVal = parseInt(document.getElementById('switch-slider').value);
    var choices = [];
    for (var i = 0; i < nRows; i++) {
        choices.push(pcts[i] < switchVal ? 'A' : 'B');
    }
    document.getElementById('q2_choices_json').value = JSON.stringify(choices);
});
</script>

{{ next_button }}
{% endblock %}