{{ extends 'global/IntroPage.html' }}
{{ block title }}Your Input: Assignment Probabilities{{ endblock }}

{{ block page_body }}

<style>
.section-divider { border: none; border-top: 4px solid #999; margin: 20px 0; }

.box {
    border: 2px solid #aaa;
    border-radius: 8px;
    padding: 16px;
    max-width: 360px;
    margin: 0 auto;
    text-align: center;
}

.island-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%;
    font-weight: bold; font-size: 13px;
}

.island-unknown {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%;
    background-color: #333; color: white;
    font-weight: bold; font-size: 14px;
}

.rank-table {
    border-collapse: collapse;
    margin: 10px auto;
}
.rank-table th,
.rank-table td {
    border: 1px solid #dddddd;
    padding: 4px 8px;
    text-align: center;
}
.rank-table th {
    font-weight: bold;
}
.rank-table input[type="number"] {
    width: 70px;
    text-align: center;
    display: block;
    margin: 0 auto;
}


</style>

<p>In each round, you will also be asked to report your best guess of <b>assignment probabilities</b>.</p>
<p>These are your guesses of the likelihood of being sent to each island, given your submitted ranking.</p>
<p>You will report one probability per island in a table like the one below. Reports must total 100%.</p>
<p>You can click below to see how the interface works.</p>

<hr class="section-divider">

<div class="box">
    <p>What do you think is your probability of being sent to each island?</p>

    {{ formfield_errors 'prac_beliefA' }}{{ formfield_errors 'prac_beliefB' }}{{ formfield_errors 'prac_beliefC' }}
    {{ formfield_errors 'prac_beliefD' }}{{ formfield_errors 'prac_beliefE' }}{{ formfield_errors 'prac_beliefF' }}
    {{ formfield_errors 'prac_belief0' }}

    <table class="rank-table">
        <thead>
            <tr>
                <th>Rank</th>
                <th>Island</th>
                <th>Probability (%)</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td><span class="island-unknown">?</span></td>
                <td>{{ form.prac_beliefA }}</td>
            </tr>
            <tr>
                <td>2</td>
                <td><span class="island-unknown">?</span></td>
                <td>{{ form.prac_beliefB }}</td>
            </tr>
            <tr>
                <td>3</td>
                <td><span class="island-unknown">?</span></td>
                <td>{{ form.prac_beliefC }}</td>
            </tr>
            <tr>
                <td>4</td>
                <td><span class="island-unknown">?</span></td>
                <td>{{ form.prac_beliefD }}</td>
            </tr>
            <tr>
                <td>5</td>
                <td><span class="island-unknown">?</span></td>
                <td>{{ form.prac_beliefE }}</td>
            </tr>
            <tr>
                <td>6</td>
                <td><span class="island-unknown">?</span></td>
                <td>{{ form.prac_beliefF }}</td>
            </tr>
            <tr>
                <td colspan="2" style="text-align:center;">
                    <span style="display:block;">Not sent to</span>
                    <span style="display:block;">any island</span>
                </td>
                <td>{{ form.prac_belief0 }}</td>
            </tr>
        </tbody>
    </table>

    <div style="margin-top: 8px; font-size: 14px;">
        Total: <span id="belief-total-display" style="font-weight:bold; color: red;">0</span>%
    </div>

</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    var totalDisplay = document.getElementById('belief-total-display');
    function beliefSum() {
        return Array.from(document.querySelectorAll('input[type="number"]')).reduce(function(s, inp) {
            var v = parseFloat(inp.value);
            return s + (isNaN(v) ? 0 : v);
        }, 0);
    }
    function anyEntered() {
        return Array.from(document.querySelectorAll('input[type="number"]')).some(function(inp) {
            return inp.value.trim() !== '';
        });
    }
    function updateTotal() {
        var total = beliefSum();
        totalDisplay.textContent = total;
        if (!anyEntered()) {
            totalDisplay.style.color = 'black';
        } else {
            totalDisplay.style.color = (total === 100) ? 'black' : 'red';
        }
    }
    document.querySelector('.box').addEventListener('input', updateTotal);
    updateTotal();
});
</script>

<p></p>
<div class="otree-nav-buttons">{{ back_button }} {{ next_button }}</div>

{{ endblock }}