{% 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 }}
    Fragen zu Ihren Emotionen
{{ endblock }}
{{ block content }}

    <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.vertrauen0.label }}
                    </td>
                    {% for choice in form.vertrauen0 %}
                        <td width="70px" class="input_radio_td">{{ choice }}</td>
                    {% endfor %}
                </tr>
                <tr>
                    <td style="text-align: left">
                        {{ form.freude0.label }}
                    </td>
                    {% for choice in form.freude0 %}
                        <td class="input_radio_td">{{ choice }}</td>
                    {% endfor %}
                </tr>
                <tr>
                    <td style="text-align: left">
                        {{ form.stolz0.label }}
                    </td>
                    {% for choice in form.stolz0 %}
                        <td class="input_radio_td">{{ choice }}</td>
                    {% endfor %}
                </tr>
                <tr>
                    <td style="text-align: left">
                        {{ form.aerger0.label }}
                    </td>
                    {% for choice in form.aerger0 %}
                        <td class="input_radio_td">{{ choice }}</td>
                    {% endfor %}
                </tr>
                <tr>
                    <td style="text-align: left">
                        {{ form.scham0.label }}
                    </td>
                    {% for choice in form.scham0 %}
                        <td class="input_radio_td">{{ choice }}</td>
                    {% endfor %}
                </tr>
                <tr>
                    <td style="text-align: left">
                        {{ form.enttaeuschung0.label }}
                    </td>
                    {% for choice in form.enttaeuschung0 %}
                        <td class="input_radio_td">{{ choice }}</td>
                    {% endfor %}
                </tr>
                <tr>
                    <td style="text-align: left">
                        {{ form.angst0.label }}
                    </td>
                    {% for choice in form.angst0 %}
                        <td class="input_radio_td">{{ choice }}</td>
                    {% endfor %}
                </tr>
                <tr>
                    <td style="text-align: left">
                        {{ form.verachtung0.label }}
                    </td>
                    {% for choice in form.verachtung0 %}
                        <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 }}