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

{% block title %}Partie 3 de l'expérience{% endblock %}

{% block content %}

<style>
    /* Same spacing system as your reference page */
    .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;
    }
    .p1-wrap ol,
    .p1-wrap ul{
        margin-top: 0;
        margin-bottom: 14px;
    }
    .p1-wrap li{
        margin-bottom: 8px;
        line-height: 1.35;
    }

    /* Match EXACT box design from your Part 1 page */
    .p1-subtitle-card{
        display: inline-block;
        background: #f4f4f4;
        border: 1px solid #e6e6e6;
        border-radius: 8px;
        padding: 10px 18px;
        margin: 10px 0 14px 0;
    }
    .p1-subtitle-card h5{
        margin: 0;
    }

    /* Standard activity boxes */
    .activity-title-box {
        display: inline-block;
        border: 1px solid #e6e6e6;
        border-radius: 10px;
        padding: 8px 16px;
        background: #fafafa;
        font-weight: 600;
        margin: 18px 0 10px 0;
    }

    /* Table styling consistent with the other pages */
    .p1-table{
        width: 100%;
        border-collapse: collapse;
        margin-top: 10px;
        margin-bottom: 14px;
    }
    .p1-table th,
    .p1-table td{
        border: 1px solid #e6e6e6;
        padding: 10px;
        vertical-align: top;
    }
    .p1-table thead th{
        background: #fafafa;
        font-weight: 600;
        text-align: center;
        vertical-align: middle;
    }
    .p1-table td{
        text-align: center;
        vertical-align: middle;
    }
    .p1-table td:first-child{
        text-align: left;
        width: 200px;
    }

    /* Slightly tighter header wrapping on small screens */
    .p1-table th{
        line-height: 1.2;
    }
    .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>Questions 1 à 9</h5>
        </div>

        <p>Les 9 premières questions visent à <strong>estimer les performances des 9 personnes</strong> ayant participé à la
        première session de l’expérience.</p>

        <p>
            Pour rappel, ces 9 personnes ont dû résoudre des exercices de logique pendant <strong>10 minutes</strong>.
        </p>

        <div class="activity-title-box">
            Prédictions
        </div>

        <p>
            Selon vous, combien d’exercices de logique chacune de ces personnes a-t-elle résolus
            correctement au total lors de ces 10 minutes&nbsp;?
        </p>

        <table class="p1-table">
            <thead>
                <tr>
                    <th>Personne <br> <div class="rank-sub">(classée du score le + au - élevé)</div></th>
                    <th>1<sup>ère</sup></th>
                    <th>2<sup>ème</sup></th>
                    <th>3<sup>ème</sup></th>
                    <th>4<sup>ème</sup></th>
                    <th>5<sup>ème</sup></th>
                    <th>6<sup>ème</sup></th>
                    <th>7<sup>ème</sup></th>
                    <th>8<sup>ème</sup></th>
                    <th>9<sup>ème</sup></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td style="font-weight: 600; text-align:center;">
                        Nombre total d'exercices résolus
                    </td>
                    <td>{% formfield player.p1 label="" %}</td>
                    <td>{% formfield player.p2 label="" %}</td>
                    <td>{% formfield player.p3 label="" %}</td>
                    <td>{% formfield player.p4 label="" %}</td>
                    <td>{% formfield player.p5 label="" %}</td>
                    <td>{% formfield player.p6 label="" %}</td>
                    <td>{% formfield player.p7 label="" %}</td>
                    <td>{% formfield player.p8 label="" %}</td>
                    <td>{% formfield player.p9 label="" %}</td>
                </tr>
            </tbody>
        </table>
        <div class="activity-title-box">
            Remarques
        </div>
        <p>
            Chaque personne correspond à une question distincte.
        </p>
        <p>
            Les réponses identiques sont acceptées.
        </p>
        <p>
        Veuillez noter que les performances doivent être renseignées du score le plus élevé au score le moins élevé.
        </p>
        <div style="text-align:right;">
            {{ next_button }}
        </div>

    </div>

</div>

{% endblock %}