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

{% block title %}{% endblock %}

{% block content %}
<style>
    /* Same spacing system as your reference template */
    .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;
    }

    /* Subtitle card */
    .p1-subtitle-card{
        display: inline-block;
        background: #f4f4f4;
        border: 1px solid #e6e6e6;
        border-radius: 8px;
        padding: 10px 18px;
        margin: 0 0 14px 0;
    }
    .p1-subtitle-card h5{
        margin: 0;
    }

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

    .score-row{
        display: flex;
        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 */

    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;
    }
    .sort-arrow{
  font-size: 12px;
  color: #666;
  margin-left: 0px;
}
    .rank-sub{
  margin-top: 6px;
  font-size: 16px;
  color: #666;
  font-weight: 400;
}


</style>

<div class="p1-wrap">
    <div class="p1-section">

        <div class="p1-subtitle-card">
            <h5>Résultats</h5>
        </div>

        <p>
            Pour rappel, deux scores résument votre performance :
        </p>

        <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>

        <p>
            Voici vos résultats pour ces {{ minutes_str }} minutes passées sur l'activité des exercices de logique :
        </p>

        {% if show_rank %}

        <table class="table">
            <thead>
                <tr>
                    <th><span class="sort-arrow">↓</span> Classement <span class="sort-arrow">↓</span> <div class="rank-sub">(basé sur la performance)</div></th>
                    <th>Participant</th>
                    <th>Temps passé</th>
                    <th class="rank-key"> <span class="sort-arrow">↓</span> Performance <span class="sort-arrow">↓</span>
                    </th>

                    <th>Productivité</th>
                </tr>
            </thead>
            <tbody>
                {% for r in table_rows %}
                <tr {% if r.participant == "Vous" %}style="font-weight: bold;"{% endif %}>
                    <td>{{ r.rank }}</td>
                    <td>{{ r.participant }}</td>
                    <td>{{ r.time }}</td>
                    <td>{{ r.performance }}</td>
                    <td>{{ r.productivity }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>

        {% else %}


            <table class="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;">{{minutes_str}} minutes</td>
                        <td style="font-weight: 600;">{{ part2_num_correct }}</td>
                        <td style="font-weight: 600;">{{ part2_correct_per_min }}</td>
                    </tr>
                </tbody>
            </table>


        {% endif %}

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

    </div>
</div>

{% endblock %}