{{ block title }}Results{{ endblock }}

{{ block content }}
<style>
    .results-container {
        max-width: 750px;
        margin: 0 auto;
        font-family: 'Helvetica Neue', Arial, sans-serif;
        color: #2c3e50;
    }
    .results-container h2 { margin-top: 0; }
    .summary-box {
        background: #f0f4f8;
        border-radius: 8px;
        padding: 1.5em;
        text-align: center;
        margin: 1.5em 0;
    }
    .summary-box .big-number {
        font-size: 36px;
        font-weight: 700;
        color: #27ae60;
    }
    .results-table {
        width: 100%;
        border-collapse: collapse;
        margin: 1.5em 0;
        font-size: 14px;
    }
    .results-table th {
        background: #2c3e50;
        color: white;
        padding: 8px 10px;
        text-align: center;
        font-weight: 600;
    }
    .results-table td {
        padding: 6px 10px;
        border-bottom: 1px solid #eee;
        text-align: center;
    }
    .results-table tr:nth-child(even) { background: #f9f9f9; }
    .results-table tr.block-divider td {
        border-top: 3px solid #bdc3c7;
    }
    .badge-t1 {
        background: #d5f5e3; color: #1e8449;
        padding: 2px 6px; border-radius: 3px;
        font-size: 11px; font-weight: 700;
    }
    .badge-t2 {
        background: #fdebd0; color: #d35400;
        padding: 2px 6px; border-radius: 3px;
        font-size: 11px; font-weight: 700;
    }
    .payment-positive { color: #27ae60; font-weight: 600; }
    .payment-zero { color: #e74c3c; font-weight: 600; }
</style>

<div class="results-container">
    <p>Here is a summary of your performance across all 8 trials.
       Each trial is worth up to {{ per_trial_endowment }} points, minus a penalty for estimation error.</p>

    <div class="summary-box">
        <div>Total points</div>
        <div class="big-number">{{ total_payment }}</div>
    </div>

    <table class="results-table">
        <thead>
            <tr>
                <th>Trial</th>
                <th>Type</th>
                <th># balls (1st)</th>
                <th># balls (2nd)</th>
                <th>First signal</th>
                <th>Second signal</th>
                <th>Your estimate</th>
                <th>True position</th>
                <th>Squared error</th>
                <th>Points</th>
            </tr>
        </thead>
        <tbody>
            {{ for p in rounds }}
            <tr {{ if p.round_number == 5 }}class="block-divider"{{ endif }}>
                <td>{{ p.round_number }}</td>
                <td>
                    {{ if p.treatment == 'T1' }}
                        <span class="badge-t1">Task 1</span>
                    {{ else }}
                        <span class="badge-t2">Task 2</span>
                    {{ endif }}
                </td>
                <td>{{ p.n_i }}</td>
                <td>{{ p.n_j }}</td>
                <td>{{ p.x_i }}</td>
                <td>{{ p.x_j }}</td>
                <td>{{ p.theta_hat }}</td>
                <td>{{ p.theta }}</td>
                <td>{{ p.squared_error|to0 }}</td>
                <td>
                    {{ if p.trial_payment > 0 }}
                        <span class="payment-positive">{{ p.trial_payment|to0 }}</span>
                    {{ else }}
                        <span class="payment-zero">0</span>
                    {{ endif }}
                </td>
            </tr>
            {{ endfor }}
        </tbody>
    </table>

</div>

{{ next_button }}
{{ endblock }}