{{ block title }}
<style>
    .center-text {
        text-align: center;
        font-size: 30px;
        font-weight: bold;
    }
</style>
<div class="center-text">
    Gesamtergebnisse
</div>
{{ endblock }}

{{ block content }}
<style>

    .otree-body{
        background-color: lightgrey;
        border-radius: 10px;

    }
    .table-container {
        background-color: #f2f2f2;

        border-radius: 10px;
        max-width: 900px;
        margin: auto;

    }

    table {
        border-collapse: separate;
        border-spacing: 0;
        width: 100%;
        border-radius: 10px;
        overflow: hidden;
    }

    th, td {
        text-align: center;
        vertical-align: middle;
        border: 2px solid black;
        padding: 12px;
        font-size: 16px;
    }

    th:first-child {
        border-top-left-radius: 10px;
    }
    th:last-child {
        border-top-right-radius: 10px;
    }
    tr:last-child td:first-child {
        border-bottom-left-radius: 10px;
    }
    tr:last-child td:last-child {
        border-bottom-right-radius: 10px;
    }
</style>

<div class="table-container">
    <table>
        <tr>
            <th>Ihr Gewinn über alle Runden in Talern</th>
            <th>Ihr Gewinn über alle Runden in Euro</th>
            <th>Bonus aus Verständnisfragen in Euro</th>
            <th>Bonus für Erklärungen in Euro</th>
            <th>Show-up Fee in Euro</th>
            <th>Gesamtauszahlung in Euro</th>

        </tr>
        <tr>
            <td>{{player.payoff_acc}}</td>
            <td>{{player.payoff_mon}}</td>
            <td>{{player.bonus_mon}}</td>
            <td>{{player.explanation_bonus}}</td>
            <td>{{player.show_up_fee}}</td>
            <td>{{player.payoff_mon_final}}</td>

        </tr>
    </table>
</div>
<div class="center-text">
    {{ formfields }}
    <button class="otree-btn-next btn btn-primary">Weiter</button>
</div>

{{ endblock }}