{{ block title }}
Outcomes of {{ periods_so_far }} 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>

<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 reported probability of being 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>

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

{{ endblock }}