{{ block title }}
Outcomes of {{ periods_so_far }} out of 30 periods
{{ endblock }}

{{ block content }}

<style>

.reminder-box {
    margin-top: 24px;
    max-width: 260px;   /* smaller table width */
    font-size: 12px;    /* smaller text */
}

.reminder-box table {
    margin-bottom: 0;
}

.reminder-box th,
.reminder-box td {
    padding: 3px 6px;   /* tighter cell spacing */
}

.reminder-box h5 {
    font-size: 14px;    /* smaller title */
    margin-bottom: 6px;
}

.report-col {
    min-width: 220px;
    vertical-align: middle;
}

.report-header {
    text-align: center !important;
    font-style: italic;
    color: #777;
}

.report-top,
.report-good,
.report-switch {
    text-align: center !important;
}

.report-blank {
    text-align: left !important;
}

/* remove all cell borders */
.outcome-table td,
.outcome-table th{
    border: none !important;
}

/* add spacing for readability */
.outcome-table td{
    padding: 6px 10px;
}
    .block-divider td{
    border-bottom: 1px solid #999 !important;
    }

.pattern-cell {
    min-width: 95px;
    height: 32px;
    border: 6px solid white;
    padding: 6px;
}

/* Pattern 1 — diagonal stripes */
.pattern1 {
    background: repeating-linear-gradient(
        45deg,
        #bfbfbf,
        #bfbfbf 6px,
        #ffffff 6px,
        #ffffff 12px
    );
}

/* Pattern 2 — dots */
.pattern2 {
    background:
        radial-gradient(#bfbfbf 22%, transparent 24%) 0 0/14px 14px,
        radial-gradient(#bfbfbf 22%, transparent 24%) 7px 7px/14px 14px,
        #ffffff;
}

/* Pattern 3 — horizontal stripes */
.pattern3 {
    background: repeating-linear-gradient(
        0deg,
        #bfbfbf,
        #bfbfbf 6px,
        #ffffff 6px,
        #ffffff 12px
    );
}

/* Pattern 4 — vertical stripes */
.pattern4 {
    background: repeating-linear-gradient(
        90deg,
        #bfbfbf,
        #bfbfbf 6px,
        #ffffff 6px,
        #ffffff 12px
    );
}

/* Pattern 5 — checkerboard */
.pattern5 {
    background:
        linear-gradient(45deg, #bfbfbf 25%, transparent 25%) -6px 0/12px 12px,
        linear-gradient(-45deg, #bfbfbf 25%, transparent 25%) -6px 0/12px 12px,
        linear-gradient(45deg, transparent 75%, #bfbfbf 75%) -6px 0/12px 12px,
        linear-gradient(-45deg, transparent 75%, #bfbfbf 75%) -6px 0/12px 12px;
}

/* Pattern 6 — cross hatch */
.pattern6 {
    background:
        repeating-linear-gradient(
            45deg,
            #bfbfbf,
            #bfbfbf 4px,
            transparent 4px,
            transparent 8px
        ),
        repeating-linear-gradient(
            -45deg,
            #bfbfbf,
            #bfbfbf 4px,
            transparent 4px,
            transparent 8px
        );
}

.report-col {
    min-width: 220px;
    text-align: left;
    vertical-align: middle;
}

.reminder-box {
    margin-top: 24px;
    max-width: 420px;
}
</style>

<div class="row">
    <div class="col-md-12">
        <br>
        <table class="table table-sm text-center outcome-table">
            <tr>
                <th>Period</th>
                <th>Outcome</th>
                <th>Robot assistant</th>
                <th>Report history</th>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td class="report-col report-header"> Your initial likelihood report of being ranked in the Top half: {{ initial_top_belief }}% </td>
            </tr>
            {{ for row in outcome_rows }}
            <tr class="{{ if row.is_block_end }}block-divider{{ endif }}">
                <td>{{ row.period }}</td>
                <td>{{ row.outcome }}</td>
                <td class="pattern-cell {{ row.pattern_class }}"></td>
                <td class="report-col report-{{ row.report_type }}">{{ row.report_text }}</td>
            </tr>
            {{ endfor }}
        </table>
    </div>
</div>

<div class="row mt-3">
    <!-- Left: Top half belief -->
    <div class="col-md-6">
        {{ formfield 'top_belief' label='Likelihood that I am ranked in the Top half (%)' }}
        <p style="color: #777;">
            <i>Likelihood that I am ranked in the Bottom half:
            <span id="bottom_prob"></span></i>
        </p>
    </div>

    <!-- Right: Good robot belief -->
    <div class="col-md-6">
        {{ formfield 'good_belief' label='Likelihood that the quality of my robot assistant is Good (%)' }}
        <p style="color:#777;">
            <i>Likelihood that the quality of my robot assistant is Bad:
            <span id="bad_robot_prob"></span></i>
        </p>
    </div>

</div>

<!-- Centered switch decision -->
<div class="row mt-4">
    <div class="col-md-6 offset-md-3">
        {{ formfield 'switch_robot' label='Would you like to request the computer to assign you a new robot assistant?' }}
    </div>
</div>

<div class="reminder-box">
    <h5>Reminder</h5>
    <table class="table table-bordered text-center">
        <tr>
            <th>The probability of success</th>
            <th>Good robot</th>
            <th>Bad robot</th>
        </tr>
        <tr>
            <th>Top half</th>
            <td>75%</td>
            <td>50%</td>
        </tr>
        <tr>
            <th>Bottom half</th>
            <td>50%</td>
            <td>25%</td>
        </tr>
    </table>
</div>

<script>
document.addEventListener("DOMContentLoaded", function () {

    const topInput = document.querySelector("input[name='top_belief']");
    const bottom = document.getElementById("bottom_prob");

    const goodInput = document.querySelector("input[name='good_belief']");
    const bad = document.getElementById("bad_robot_prob");

    if(topInput){
        topInput.addEventListener("input", function () {
            let value = parseFloat(topInput.value);
            bottom.textContent = !isNaN(value) ? (100 - value) + "%" : "";
        });
    }

    if(goodInput){
        goodInput.addEventListener("input", function () {
            let value = parseFloat(goodInput.value);
            bad.textContent = !isNaN(value) ? (100 - value) + "%" : "";
        });
    }

});
</script>

<br>
Click Next to proceed.
{{ next_button }}

{{ endblock }}