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

{{ block content }}

<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;
}

table.beliefs-table {
    border-collapse: collapse;
    margin: 0 auto;
    border: none;
}
table.beliefs-table th {
    padding: 6px 20px;
}

table.beliefs-table td {
    border: none;
    text-align: center;
    padding: 6px 20px;
    font-weight: normal;
    border-bottom: 1px solid #ccc;
}
table.beliefs-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 <b>if you rank it first</b>.</p>
<p>You will report one probability per island in a table like the one below.</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 <b>if you rank it first?</b></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' }}

    <table class="beliefs-table">
        <thead>
            <tr>
                <th>Island</th>
                <th>Probability (%)</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><span class="island-badge" style="background-color:rgb(21,96,130);color:white">A</span></td>
                <td>{{ form.prac_beliefA }}</td>
            </tr>
            <tr>
                <td><span class="island-badge" style="background-color:rgb(233,113,50);color:white">B</span></td>
                <td>{{ form.prac_beliefB }}</td>
            </tr>
            <tr>
                <td><span class="island-badge" style="background-color:rgb(25,107,36);color:white">C</span></td>
                <td>{{ form.prac_beliefC }}</td>
            </tr>
            <tr>
                <td><span class="island-badge" style="background-color:rgb(15,158,213);color:white">D</span></td>
                <td>{{ form.prac_beliefD }}</td>
            </tr>
            <tr>
                <td><span class="island-badge" style="background-color:rgb(160,43,147);color:white">E</span></td>
                <td>{{ form.prac_beliefE }}</td>
            </tr>
            <tr>
                <td><span class="island-badge" style="background-color:rgb(209,209,209);color:#222">F</span></td>
                <td>{{ form.prac_beliefF }}</td>
            </tr>
        </tbody>
    </table>
</div>

<p></p>
{{ next_button }}

{{ endblock }}