{% block styles %}
    <link href="{% static 'global/css/custom.css' %}" rel="stylesheet"/>
    <link href="{% static 'global/css/counter_before.css' %}" rel="stylesheet"/>
    <style>
        .input_radio_td {
            padding-right: 0rem !important;
            padding-left: 0rem !important;
            text-align: center;
        }
    </style>
{% endblock %}

{{ block scripts }}

{{ endblock }}

{{ block title }}
    Auszahlung aus Topf - Runde {{ round }}
{{ endblock }}
{{ block content }}

    <h3>Beiträge</h3>
    <p>
        Im folgenden sehen Sie, wie viel insgesamt in dieser Runde in den gemeinsamen Topf eingezahlt wurde.
    </p>

     <table align="center"">

        <tr>
            <td style="text-align: left">Ihr Beitrag: </td>
            <td style="text-align: right; padding-right: 10px; min-width: 120px">{{ beitrag }} Cents</td>
        </tr>
        <tr style="border-bottom: 1px solid black">
            <td style="text-align: left">Beitrag des Mitspielers: </td>
            <td style="text-align: right; padding-right: 10px">{{ beitrag_bot }} Cents</td>
        </tr>
        <tr>
            <td style="text-align: left"><b>Gesamte Beiträge:</b> </td>
            <td style="text-align: right; padding-right: 10px"><b>{{ total_beitrag }} Cents</b></td>
        </tr>

    </table>
    <br>

    <h3>Auszahlung aus dem Topf</h3>
    <p>
        Insgesamt wurden {{ total_beitrag }} Cents in den Topf eingezahlt. Dieses Geld wird mit dem Faktor 1,5 multipliziert
        und dann unter beiden Mitspielern gleichmäßig aufgeteilt. Somit beträgt Ihre Auszahlung aus dem Topf {{ payoff_topf|to0 }}
        Cents.
    </p>
    <br>
    <h3>Fragen zu Ihren Emotionen</h3>
    <p>
        Bitte geben Sie an, wie stark Sie die folgenden Emotionen aktuell empfinden:
    </p>
    <div style="display: flex; justify-content: center;">
        <table cellpadding="0" cellspacing="0" border="0" class="table table-striped radiogrid2 hoverTable" style="max-width: 700px">
            <tbody>
                <tr>
                    <td class="input_radio_td"></td>
                    <td class="input_radio_td" style="text-align: left; padding-left: 10px !important;">überhaupt nicht ...</td>
                    <td class="input_radio_td"></td>
                    <td class="input_radio_td"></td>
                    <td class="input_radio_td"></td>
                    <td class="input_radio_td"></td>
                    <td colspan="2" style="text-align: right; padding-right: 10px !important;" class="input_radio_td" >... maximal</td>
                </tr>
                <tr>
                    <td style="text-align: left">
                        {{ form.vertrauen.label }}
                    </td>
                    {% for choice in form.vertrauen %}
                        <td width="70px" class="input_radio_td">{{ choice }}</td>
                    {% endfor %}
                </tr>
                <tr>
                    <td style="text-align: left">
                        {{ form.freude.label }}
                    </td>
                    {% for choice in form.freude %}
                        <td class="input_radio_td">{{ choice }}</td>
                    {% endfor %}
                </tr>
                <tr>
                    <td style="text-align: left">
                        {{ form.stolz.label }}
                    </td>
                    {% for choice in form.stolz %}
                        <td class="input_radio_td">{{ choice }}</td>
                    {% endfor %}
                </tr>
                <tr>
                    <td style="text-align: left">
                        {{ form.aerger.label }}
                    </td>
                    {% for choice in form.aerger %}
                        <td class="input_radio_td">{{ choice }}</td>
                    {% endfor %}
                </tr>
                <tr>
                    <td style="text-align: left">
                        {{ form.scham.label }}
                    </td>
                    {% for choice in form.scham %}
                        <td class="input_radio_td">{{ choice }}</td>
                    {% endfor %}
                </tr>
                <tr>
                    <td style="text-align: left">
                        {{ form.enttaeuschung.label }}
                    </td>
                    {% for choice in form.enttaeuschung %}
                        <td class="input_radio_td">{{ choice }}</td>
                    {% endfor %}
                </tr>
                <tr>
                    <td style="text-align: left">
                        {{ form.angst.label }}
                    </td>
                    {% for choice in form.angst %}
                        <td class="input_radio_td">{{ choice }}</td>
                    {% endfor %}
                </tr>
                <tr>
                    <td style="text-align: left">
                        {{ form.verachtung.label }}
                    </td>
                    {% for choice in form.verachtung %}
                        <td class="input_radio_td">{{ choice }}</td>
                    {% endfor %}
                </tr>
            </tbody>
        </table>
    </div>



    <br>

    <p style="text-align: center">
        Klicken Sie auf <i>Weiter</i>, um fortzufahren.
    </p>
    {{ next_button }}

{{ endblock }}