{% extends "global/Page.html" %}
{% load otree %}

{% block title %}
{% endblock %}

{% block content %}

<style>
    /* Same page layout as other pages */
    .p1-wrap {
        max-width: 980px;
        margin: 0 auto;
    }

    .p1-wrap p {
        margin-bottom: 14px;
        line-height: 1.35;
    }

    .p1-section {
        margin-top: 24px;
        margin-bottom: 24px;
    }

    /* Generic box style */
    .result-box{
        max-width: 760px;
        border: 1px solid #e6e6e6;
        border-radius: 10px;
        padding: 14px 18px;
        background: #fafafa;
        margin: 0 auto;
    }

    /* Rows inside definition box */
    .score-row{
        display: flex;
        gap: 0px;
        padding: 14px 0;
        align-items: baseline;
    }

    .score-row + .score-row{
        border-top: 1px solid #efefef;
    }

    .score-label{
        min-width: 140px;
        font-weight: 600;
    }
/* Harmonize table spacing */
    /* Make the plain .table match the other pages without changing your HTML */
    table.table{
        width: 100%;
        border-collapse: collapse;
        margin-top: 10px;
        margin-bottom: 14px;
    }
    table.table th,
    table.table td{
        border: 1px solid #e6e6e6;
        padding: 10px;
        vertical-align: top;
    }
    table.table thead th{
        background: #fafafa;
        font-weight: 600;
        text-align: center;
        vertical-align: middle;
    }
    table.table tbody td{
        text-align: center;
        vertical-align: middle;
    }


    /* Next button alignment */
    .next-wrap{
        max-width: 980px;
        margin: 26px auto 0 auto;
    }
</style>

<div class="p1-wrap">

    <h3 style="margin-top: 0;">Résultats</h3>

    <div class="p1-section">

        <p>
            Deux scores résument votre performance :
        </p>

        <!-- Box 1: Definitions -->
        <div class="result-box">
            <div class="score-row">
                <span class="score-label">Performance :</span>
                <span>votre nombre total d’exercices correctement résolus.</span>
            </div>
            <div class="score-row">
                <span class="score-label">Productivité :</span>
                <span>votre nombre moyen d’exercices correctement résolus par minute.</span>
            </div>
        </div>

    </div>

    <div class="p1-section">

        <p>
            Pendant ces 5 minutes, vous avez obtenu les scores suivants :
        </p>

        <!-- Box 2: Results -->

            <table class="table score-table">
                <thead>
                    <tr>
                        <th>Participant</th>
                        <th>Temps passé</th>
                        <th>Performance</th>
                        <th>Productivité</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td style="font-weight: 600;">Vous</td>
                        <td style="font-weight: 600;">5 minutes</td>
                        <td style="font-weight: 600;">{{ part1_num_correct }}</td>
                        <td style="font-weight: 600;">{{ part1_correct_per_min }}</td>
                    </tr>
                </tbody>
            </table>
        

    </div>

    <div style="text-align:right;">
              {{ next_button }}
    </div>

</div>

{% endblock %}