{{ block title }}{{ endblock }}

{{ block content }}
<link rel="stylesheet" href="{{ static 'css/css.css' }}">

<div class="content-box box-neutral">
    <h2 class="section-title">Games with Your Group</h2>
    <hr class="section-divider">

    <div class="section-box box-calm" style="text-align:center; padding:30px 40px; margin-top:24px;">
        <div class="section-header" style="justify-content:center; margin-bottom:16px;">
            <div class="icon">👥</div>
            <h3 style="margin:0; font-size:1.2em;">You will now play with your same Economy group</h3>
        </div>
        <p style="font-size:1.05em; color:#444; margin:0;">
            The next two games are played with the <strong>same two participants</strong> you were grouped with in the previous Part.
        </p>
    </div>

    <!-- Group reminder: multipliers + Part I earnings -->
    <!-- <div class="section-box box-neutral" style="margin-top:24px;">
        <div class="section-header">
            <div class="icon">👥</div>
            <h3>Your Economy Group</h3>
        </div>
        <table style="width:100%; border-collapse:collapse; text-align:center; margin-top:8px;">
            <thead>
                <tr style="background:#f5f5f5;">
                    <th style="padding:10px 16px; border-bottom:2px solid #ddd; text-align:left;">Group member</th>
                    <th style="padding:10px 16px; border-bottom:2px solid #ddd;">Multiplier (Part I)</th>
                    <th style="padding:10px 16px; border-bottom:2px solid #ddd;">Part I earnings (ECs)</th>
                </tr>
            </thead>
            <tbody>
                {% for member in group_data %}
                <tr style="border-bottom:1px solid #eee;">
                    <td style="padding:10px 16px; text-align:left;">
                        <strong>{{ member.label }}</strong>
                    </td>
                    <td style="padding:10px 16px;">
                        <strong>&times;{{ member.multiplier }}</strong>
                    </td>
                    <td style="padding:10px 16px;">
                        {{ member.earnings }} ECs
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div> -->

    <div class="buttons-container" style="margin-top:30px;">
        <div></div>
        <button id="NextButton" class="btn btn-primary">Next &rarr;</button>
    </div>
</div>

{{ endblock }}