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

    {{ if player.replaced_by_bot == 0 }}
        <div class="result-shell">
            <div class="result-card">
                <div class="result-box result-box-info">
                    <p><b>The main part of the experiment has ended.</b></p>
                </div>

                <div class="rounds-card">
                    <table class="table results-table">
                        <thead>
                            <tr>
                                <th scope="col">Round</th>
                                <th scope="col">Earnings</th>
                                <th></th>
                                <th scope="col">Round</th>
                                <th scope="col">Earnings</th>
                            </tr>
                        </thead>
                        <tbody>
                            {{ for round1, earnings1, round2, earnings2 in table }}
                                <tr>
                                    <td>{{ round1 }}</td>
                                    <td>{{ earnings1 }}</td>
                                    <td></td>
                                    <td>{{ round2 }}</td>
                                    <td>{{ earnings2 }}</td>
                                </tr>
                            {{ endfor }}
                        </tbody>
                    </table>
                </div>

                <div class="result-box result-box-highlight">
                    <p><b>The selected round for payments was round {{ player.round_to_pay }} in which you earned {{ player.ecu_earned }} ECU.</b></p>
                </div>

                <div class="result-box result-box-highlight">
                    <p><b>That means that you will earn {{ player.money_earned|to2 }} pounds from this part of the experiment.</b></p>
                </div>

                <div class="result-box result-box-info">
                    <p><b>You will now play two additional short tasks.</b></p>
                </div>

                <div class="result-actions">
                    <button class="otree-btn-next btn btn-primary">Continue</button>
                </div>
            </div>
        </div>
    {{ else }}
        <div class="alert alert-danger">
            <p>You were not able to answer in time. A bot will play in your place.</p>
        </div>
    {{ endif }}

{{ endblock }}

{{ block styles }}
    <style>
        body {
            background: #eef3f7;
        }

        .result-shell {
            max-width: 900px;
            margin: 0 auto;
        }

        .result-card {
            background: #fbfdff;
            border: 1px solid #d4dde6;
            border-radius: 14px;
            box-shadow: 0 8px 24px rgba(30, 48, 66, 0.06);
            padding: 22px 24px;
        }

        .rounds-card {
            margin: 18px 0;
            background: #fbfdff;
            border: 1px solid #d4dde6;
            border-radius: 12px;
            overflow: hidden;
        }

        .results-table {
            margin-bottom: 0;
            text-align: center;
        }

        .results-table thead th {
            background: #e7edf3;
            color: #24313d;
            font-weight: 700;
            border-color: #d4dde6;
        }

        .results-table td {
            border-color: #d4dde6;
            background: #fbfdff;
            vertical-align: middle;
        }

        .result-box {
            margin: 14px 0;
            padding: 12px 14px;
            border-radius: 8px;
        }

        .result-box p {
            margin-bottom: 0;
            line-height: 1.7;
            text-align: justify;
        }

        .result-box-info {
            background: #edf4fa;
            border-left: 4px solid #4e6f8c;
            color: #355066;
        }

        .result-box-highlight {
            background: #f6f1e7;
            border-left: 4px solid #b79a62;
            color: #57451f;
        }

        .result-actions {
            margin-top: 20px;
        }

        .alert-danger {
            border-radius: 10px;
            border: 1px solid #d9c4c1;
            background: #fff1ef;
            color: #7c4f48;
        }
    </style>
{{ endblock }}