{{ block styles }}
    <link href="{% static 'global/css/custom.css' %}" rel="stylesheet"/>
    <link href="{% static 'global/css/counter_before.css' %}" rel="stylesheet"/>
    <link href="{% static 'global/css/popup.css' %}" rel="stylesheet"/>
{{ endblock }}



{{ block title }}
    Zusammenfassung
{{ endblock }}
{{ block content }}
    <div class="alert alert-info" role="alert" >
        <p style="text-align: left">
            Sie haben alle {{ C.NUM_ROUNDS }} Runden absolviert und damit ist diese Studie beendet.
            Hier sehen Sie nochmal alle Auszahlungen der Runden und welche Auszahlung sich insgesamt ergibt.
        </p>
        <p>
            Um Ihnen das Geld auszuzahlen, benötigen wir Ihren Namen sowie Ihre IBAN.
            Bitte beachten Sie unsere Hinweise zum <a href="#popup1">Datenschutz</a>.
            Bei Fragen wenden Sie sich bitte an: <a href= "mailto:maximilian.dominicus@st.ovgu.de">maximilian.dominicus@st.ovgu.de</a>.
        </p>
        <p>
            Wenn Sie mit der Eingabe Ihrer Daten nicht einverstanden sind, lassen Sie die Felder einfach leer.
            In diesem Fall wird Ihr gewonnenes Geld an UNICEF für Klimaschutzprojekte gespendet.
        </p>

    </div>
    <h3>Ihre Auszahlung</h3>
    <div style="position: absolute; top: 30px; right: 30px">
        <div id="popup1" class="overlay">
                <div class="popup">
                    <div>
                        <a class="close" href="#">&times;</a>
                    </div>
                    <h2 style="text-align: center !important;">
                        Datenschutzbestimmung
                    </h2>
                    <div class="content">
                        {% include '_static/global/Datenschutz.html' %}
                        <br>
                    </div>
                </div>
            </div>
    </div>

    <div style="display: flex; justify-content: center;">
        <table style="text-align: center">
            <tr style="border-bottom: 1px solid black">
                <td>Runde</td>
                <td>Auszahlung</td>
            </tr>
            {% for pay in payoffs %}
            <tr>
                <td width="100px">{{ forloop.counter }}</td>
                <td width="100px">{{ pay }}</td>
            </tr>
            {% endfor %}
            <tr style="border-top: 1px solid black">
                <td><b>Gesamt</b></td>
                <td><b>{{ total_payoff }}</b></td>
            </tr>
        </table>
    </div>
    <br>
    <h3>Ihre Daten zur Auszahlung</h3>
    {{ formfields }}
    <br>
    <p style="text-align: center">
        Klicken Sie auf <i>Weiter</i>, um die Studie abzuschließen.
    </p>
    {{ next_button }}

{{ endblock }}