{% block styles %}
    <link href="{% static 'global/css/custom.css' %}" rel="stylesheet"/>
    <link href="{% static 'global/css/counter.css' %}" rel="stylesheet"/>
    <style>
        .rotate_text td div {
            writing-mode: vertical-lr;
            -webkit-writing-mode: vertical-lr;
            -ms-writing-mode: vertical-lr;
            -webkit-transform: rotate(-180deg);
            -moz-transform: rotate(-180deg);
            -o-transform: rotate(-180deg);
            transform: rotate(-180deg);
        }
        .rotated_cell {
            vertical-align: bottom;
        }
        .no_rotate_text td div {
            min-width: 60px;
        }
    </style>
{% endblock %}

{{ block scripts }}
    <script>
        var elements = document.querySelectorAll('.input_radio_td');
        if (js_vars.mobile == 1) {
            for (var i = 0; i < elements.length; i++) {
              elements[i].style.paddingLeft = "0rem"
              elements[i].style.paddingRight = "0rem"
            }
            var element = document.getElementById('tr1')
            element.classList.add('rotate_text')
            var element = document.getElementById('tr2')
            element.classList.add('rotate_text')
            var element = document.getElementById('tr3')
            element.classList.add('rotate_text')
        }
        else {
            for (var i = 0; i < elements.length; i++) {
              elements[i].style.paddingLeft = "0.5rem"
              elements[i].style.paddingRight = "0.5rem"
               elements[i].style.textAlign = "center"
            }
            var element = document.getElementById('tr1')
            element.classList.add('no_rotate_text')
            var element = document.getElementById('tr2')
            element.classList.add('no_rotate_text')
            var element = document.getElementById('tr3')
            element.classList.add('no_rotate_text')
        }

    </script>

{{ endblock }}

{{ block title }}
    Fragebogen
{{ endblock }}

{{ block content }}
    <div class="alert alert-info" role="alert" >
        <p style="text-align: left">
            Bitte beantworten Sie die folgenden Fragen.
            Es gibt dabei keine „richtigen“ oder „falschen“ Antworten und Sie erfüllen den Zweck der Befragung
            am besten, wenn Sie die Fragen so wahrheitsgemäß wie möglich beantworten.
        </p>
    </div>

    <h3>Frage</h3>
    <p>
        Es folgen mehrere Aussagen, denen Sie mehr oder weniger zustimmen können.
        Bitte kreuzen Sie dafür eine der dargestellten Möglichkeiten zwischen "trifft überhaupt nicht zu" (1)
        bis "trifft vollkommen zu" (6) an.
    </p>
    <div style="display: flex; justify-content: center;">
        <table cellpadding="0" cellspacing="0" border="0" class="table table-striped radiogrid2 hoverTable table-header-rotated" style="max-width: 1050px">
            <tbody>
                <tr id="tr1">
                    <td>
                    </td>
                    <td class='rotated_cell input_radio_td'>
                        <div>Trifft überhaupt nicht zu</div>
                    </td>
                    <td class='rotated_cell input_radio_td'>
                        <div>Trifft nicht zu</div>
                    </td>
                    <td class='rotated_cell input_radio_td'>
                        <div>Trifft eher nicht zu</div>
                    </td>
                    <td class='rotated_cell input_radio_td'>
                        <div>Trifft eher zu</div>
                    </td>
                    <td class='rotated_cell input_radio_td'>
                        <div>Trifft ziemlich zu</div>
                    </td>
                    <td class='rotated_cell input_radio_td'>
                        <div>Trifft vollkommen zu</div>
                    </td>
                </tr>
                <tr>
                    <td width="60%" style="text-align: left">
                        {{ form.ums1_1.label }}
                    </td>
                    {% for choice in form.ums1_1 %}
                        <td width="50px" class="input_radio_td" style="text-align: inherit">{{ choice }}</td>
                    {% endfor %}
                </tr>
                <tr>
                    <td width="60%" style="text-align: left">
                        {{ form.ums1_2.label }}
                    </td>
                    {% for choice in form.ums1_2 %}
                        <td width="50px" class="input_radio_td" style="text-align: inherit">{{ choice }}</td>
                    {% endfor %}
                </tr>
                <tr>
                    <td width="60%" style="text-align: left">
                        {{ form.ums1_3.label }}
                    </td>
                    {% for choice in form.ums1_3 %}
                        <td width="50px" class="input_radio_td" style="text-align: inherit">{{ choice }}</td>
                    {% endfor %}
                </tr>
                <tr>
                    <td width="60%" style="text-align: left">
                        {{ form.ums1_4.label }}
                    </td>
                    {% for choice in form.ums1_4 %}
                        <td width="50px" class="input_radio_td" style="text-align: inherit">{{ choice }}</td>
                    {% endfor %}
                </tr>
                <tr>
                    <td width="60%" style="text-align: left">
                        {{ form.ums1_5.label }}
                    </td>
                    {% for choice in form.ums1_5 %}
                        <td width="50px" class="input_radio_td" style="text-align: inherit">{{ choice }}</td>
                    {% endfor %}
                </tr>
                <tr>
                    <td width="60%" style="text-align: left">
                        {{ form.ums1_6.label }}
                    </td>
                    {% for choice in form.ums1_6 %}
                        <td width="50px" class="input_radio_td" style="text-align: inherit">{{ choice }}</td>
                    {% endfor %}
                </tr>
                <tr>
                    <td width="60%" style="text-align: left">
                        {{ form.ums1_7.label }}
                    </td>
                    {% for choice in form.ums1_7 %}
                        <td width="50px" class="input_radio_td" style="text-align: inherit">{{ choice }}</td>
                    {% endfor %}
                </tr>

            </tbody>
        </table>
    </div>




    <br>
    <h3>Frage</h3>
    <p>
        Es folgen nun mehrere Aussagen zu Zielen, die Sie mehr oder weniger wichtig finden können.
        Bitte kreuzen Sie für jedes Ziel an, wie wichtig Ihnen dieses Ziel in Ihrem Leben ist, von "nicht wichtig" (1) bis
        "außerordentlich wichtig" (6).
    </p>
   <div style="display: flex; justify-content: center;">
        <table cellpadding="0" cellspacing="0" border="0" class="table table-striped radiogrid2 hoverTable table-header-rotated" style="max-width: 1050px">
            <tbody>
                <tr id="tr2">
                    <td >
                    </td>
                    <td class='rotated_cell input_radio_td'>
                        <div>nicht wichtig</div>
                    </td>
                    <td class='rotated_cell input_radio_td'>
                        <div>ein wenig wichtig</div>
                    </td>
                    <td class='rotated_cell input_radio_td'>
                        <div>etwas wichtig</div>
                    </td>
                    <td class='rotated_cell input_radio_td'>
                        <div>wichtig</div>
                    </td>
                    <td class='rotated_cell input_radio_td'>
                        <div>sehr wichtig</div>
                    </td>
                    <td class='rotated_cell input_radio_td'>
                        <div>außerordentlich wichtig</div>
                    </td>
                </tr>
                <tr>
                    <td width="60%" style="text-align: left">
                        {{ form.ums2_1.label }}
                    </td>
                    {% for choice in form.ums2_1 %}
                        <td width="50px" class="input_radio_td" style="text-align: inherit">{{ choice }}</td>
                    {% endfor %}
                </tr>
                <tr>
                    <td width="60%" style="text-align: left">
                        {{ form.ums2_2.label }}
                    </td>
                    {% for choice in form.ums2_2 %}
                        <td width="50px" class="input_radio_td" style="text-align: inherit">{{ choice }}</td>
                    {% endfor %}
                </tr>
                <tr>
                    <td width="60%" style="text-align: left">
                        {{ form.ums2_3.label }}
                    </td>
                    {% for choice in form.ums2_3 %}
                        <td width="50px" class="input_radio_td" style="text-align: inherit">{{ choice }}</td>
                    {% endfor %}
                </tr>
                <tr>
                    <td width="60%" style="text-align: left">
                        {{ form.ums2_4.label }}
                    </td>
                    {% for choice in form.ums2_4 %}
                        <td width="50px" class="input_radio_td" style="text-align: inherit">{{ choice }}</td>
                    {% endfor %}
                </tr>
                <tr>
                    <td width="60%" style="text-align: left">
                        {{ form.ums2_5.label }}
                    </td>
                    {% for choice in form.ums2_5 %}
                        <td width="50px" class="input_radio_td" style="text-align: inherit">{{ choice }}</td>
                    {% endfor %}
                </tr>
                <tr>
                    <td width="60%" style="text-align: left">
                        {{ form.ums2_6.label }}
                    </td>
                    {% for choice in form.ums2_6 %}
                        <td width="50px" class="input_radio_td" style="text-align: inherit">{{ choice }}</td>
                    {% endfor %}
                </tr>
                <tr>
                    <td width="60%" style="text-align: left">
                        {{ form.ums2_7.label }}
                    </td>
                    {% for choice in form.ums2_7 %}
                        <td width="50px" class="input_radio_td" style="text-align: inherit">{{ choice }}</td>
                    {% endfor %}
                </tr>
                <tr>
                    <td width="60%" style="text-align: left">
                        {{ form.ums2_8.label }}
                    </td>
                    {% for choice in form.ums2_8 %}
                        <td width="50px" class="input_radio_td" style="text-align: inherit">{{ choice }}</td>
                    {% endfor %}
                </tr>
            </tbody>
        </table>
    </div>


    <br>
    <h3>Frage</h3>
    <p>
        Im Folgenden beschreiben wir Ihnen kurz verschiedene Personen. Bitte lesen Sie
        jede Beschreibung durch und denken Sie darüber nach, inwieweit Ihnen die
        Person ähnlich oder nicht ähnlich ist. Bitte kreuzen Sie rechts an, wie ähnlich
        Ihnen die beschriebene Person ist.
    </p>

   <div style="display: flex; justify-content: center;">
        <table cellpadding="0" cellspacing="0" border="0" class="table table-striped radiogrid2 hoverTable table-header-rotated" style="max-width: 1050px">
            <tbody>
                <tr id="tr3">
                    <td style="vertical-align: bottom">
                        Es ist ihm/ihr wichtig, ...
                    </td>
                    <td class='rotated_cell input_radio_td'>
                        <div>ist mir überhaupt nicht ähnlich</div>
                    </td>
                    <td class='rotated_cell input_radio_td'>
                        <div>ist mir nicht ähnlich</div>
                    </td>
                    <td class='rotated_cell input_radio_td'>
                        <div>ist mir nur ein wenig ähnlich</div>
                    </td>
                    <td class='rotated_cell input_radio_td'>
                        <div>ist mir einigermaßen ähnlich</div>
                    </td>
                    <td class='rotated_cell input_radio_td'>
                        <div>ist mir ähnlich</div>
                    </td>
                    <td class='rotated_cell input_radio_td'>
                        <div>ist mir sehr ähnlich</div>
                    </td>
                </tr>
                <tr>
                    <td width="60%" style="text-align: left">
                        {{ form.personen01.label }}
                    </td>
                    {% for choice in form.personen01 %}
                        <td width="50px" class="input_radio_td" style="text-align: inherit">{{ choice }}</td>
                    {% endfor %}
                </tr>
                <tr>
                    <td width="60%" style="text-align: left">
                        {{ form.personen02.label }}
                    </td>
                    {% for choice in form.personen02 %}
                        <td width="50px" class="input_radio_td" style="text-align: inherit">{{ choice }}</td>
                    {% endfor %}
                </tr>
                <tr>
                    <td width="60%" style="text-align: left">
                        {{ form.personen03.label }}
                    </td>
                    {% for choice in form.personen03 %}
                        <td width="50px" class="input_radio_td" style="text-align: inherit">{{ choice }}</td>
                    {% endfor %}
                </tr>
                <tr>
                    <td width="60%" style="text-align: left">
                        {{ form.personen04.label }}
                    </td>
                    {% for choice in form.personen04 %}
                        <td width="50px" class="input_radio_td" style="text-align: inherit">{{ choice }}</td>
                    {% endfor %}
                </tr>
                <tr>
                    <td width="60%" style="text-align: left">
                        {{ form.personen05.label }}
                    </td>
                    {% for choice in form.personen05 %}
                        <td width="50px" class="input_radio_td" style="text-align: inherit">{{ choice }}</td>
                    {% endfor %}
                </tr>
                <tr>
                    <td width="60%" style="text-align: left">
                        {{ form.personen06.label }}
                    </td>
                    {% for choice in form.personen06 %}
                        <td width="50px" class="input_radio_td" style="text-align: inherit">{{ choice }}</td>
                    {% endfor %}
                </tr>
                <tr>
                    <td width="60%" style="text-align: left">
                        {{ form.personen07.label }}
                    </td>
                    {% for choice in form.personen07 %}
                        <td width="50px" class="input_radio_td" style="text-align: inherit">{{ choice }}</td>
                    {% endfor %}
                </tr>
                <tr>
                    <td width="60%" style="text-align: left">
                        {{ form.personen08.label }}
                    </td>
                    {% for choice in form.personen08 %}
                        <td width="50px" class="input_radio_td" style="text-align: inherit">{{ choice }}</td>
                    {% endfor %}
                </tr>
                <tr>
                    <td width="60%" style="text-align: left">
                        {{ form.personen09.label }}
                    </td>
                    {% for choice in form.personen09 %}
                        <td width="50px" class="input_radio_td" style="text-align: inherit">{{ choice }}</td>
                    {% endfor %}
                </tr>
                <tr>
                    <td width="60%" style="text-align: left">
                        {{ form.personen10.label }}
                    </td>
                    {% for choice in form.personen10 %}
                        <td width="50px" class="input_radio_td" style="text-align: inherit">{{ choice }}</td>
                    {% endfor %}
                </tr>
                <tr>
                    <td width="60%" style="text-align: left">
                        {{ form.personen11.label }}
                    </td>
                    {% for choice in form.personen11 %}
                        <td width="50px" class="input_radio_td" style="text-align: inherit">{{ choice }}</td>
                    {% endfor %}
                </tr>
                <tr>
                    <td width="60%" style="text-align: left">
                        {{ form.personen12.label }}
                    </td>
                    {% for choice in form.personen12 %}
                        <td width="50px" class="input_radio_td" style="text-align: inherit">{{ choice }}</td>
                    {% endfor %}
                </tr>
                <tr>
                    <td width="60%" style="text-align: left">
                        {{ form.personen13.label }}
                    </td>
                    {% for choice in form.personen13 %}
                        <td width="50px" class="input_radio_td" style="text-align: inherit">{{ choice }}</td>
                    {% endfor %}
                </tr>
                <tr>
                    <td width="60%" style="text-align: left">
                        {{ form.personen14.label }}
                    </td>
                    {% for choice in form.personen14 %}
                        <td width="50px" class="input_radio_td" style="text-align: inherit">{{ choice }}</td>
                    {% endfor %}
                </tr>
                <tr>
                    <td width="60%" style="text-align: left">
                        {{ form.personen15.label }}
                    </td>
                    {% for choice in form.personen15 %}
                        <td width="50px" class="input_radio_td" style="text-align: inherit">{{ choice }}</td>
                    {% endfor %}
                </tr>
                <tr>
                    <td width="60%" style="text-align: left">
                        {{ form.personen16.label }}
                    </td>
                    {% for choice in form.personen16 %}
                        <td width="50px" class="input_radio_td" style="text-align: inherit">{{ choice }}</td>
                    {% endfor %}
                </tr>
                <tr>
                    <td width="60%" style="text-align: left">
                        {{ form.personen17.label }}
                    </td>
                    {% for choice in form.personen17 %}
                        <td width="50px" class="input_radio_td" style="text-align: inherit">{{ choice }}</td>
                    {% endfor %}
                </tr>
                <tr>
                    <td width="60%" style="text-align: left">
                        {{ form.personen18.label }}
                    </td>
                    {% for choice in form.personen18 %}
                        <td width="50px" class="input_radio_td" style="text-align: inherit">{{ choice }}</td>
                    {% endfor %}
                </tr>
            </tbody>
        </table>
    </div>

    {{ next_button }}
{{ endblock }}