<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PE de {{ nom }}</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css"/>
    <style>
    .w3-badge{
        background-color:#000;
        color:#fff;
        display:inline-block;
        padding-left:8px;
        padding-right:8px;
        text-align:center;
        border-radius:50%;
        font-size: 70%;
    }
    .w3-red{background-color: darkred;}
    .w3-blue{background-color: darkblue;}
    ul.legend li {list-style: none; }
    </style>
</head>

<body>
 <main class="container">

     <h1>Résultats PE de {{prenom}} {{nom}} <span style="font-size: 80%">({{ parcours }})</span></h1>



    <h2>Légende</h2>
     <ul class="legend">
         <li><span class="w3-badge w3-red">../..</span>&nbsp;Classement par groupe</li>
        <li><span class="w3-badge w3-blue">../..</span>&nbsp;Classement par promo</li>
     </ul>

{% for tag in tags %}

    <h2>Tag <code>👜 {{ tag }}</code></h2>

    <table class="striped">
    <!-- Entêtes/Colonnes -->
    <thead>
        <tr>
            <th rowspan="2"></th>
            {%  for col in colonnes_html %}
                <th colspan="2" data-theme="dark">{{ col }}</th>
            {%  endfor %}
            <th colspan="2" data-theme="dark">Général</th>
        </tr>
        <tr>
            {%  for col in colonnes_html %}
                <th>Note</th><th>Class.</th>
            {%  endfor %}
            <th>Note</th><th>Class.</th>
        </tr>
    </thead>
    <tbody>
    {% for aggregat in moyennes[tag] %}
        <tr>
            <td>{{ aggregat }}</td>
            {%  for comp in moyennes[tag][aggregat] %}
            <td>{{ moyennes[tag][aggregat][comp]["note"] }}</td>
            <td><span class="w3-badge w3-red">{{ moyennes[tag][aggregat][comp]["rang_groupe"] }}</span>
            <span class="w3-badge w3-blue">{{ moyennes[tag][aggregat][comp]["rang_promo"] }}</span></td>
            {% endfor %}
        </tr>
    {% endfor %}
    </tbody>
    </table>
{%  endfor %}

 </main>main>
</body>
</html>