{{ extends "global/Page.html" }}

{{ block styles }}
    <style>
        .table tr td:first-child input {
            margin: auto;
        }
        .table tr td:last-child input {
            margin: auto;
            text-align: center;
        }
        .table {
            max-width: 700px;
            margin: auto;
        }
        .hide-abschluss {
            display: none;
        }
        select.form-control {
            height: calc(2em + 2px) !important;
        }
        .buttonclassusualhere{
            bottom: 30px;
            right: 30px;
            width: 90%;
            text-align: right;
        }
        .form-select{
            font: normal 1.5rem Arial, sans-serif !important;
        }
        .form-control{
            border: 1px solid #2f2f2dc7;
            font: normal 1.5rem Arial, sans-serif !important;
        }
    </style>
{{ endblock }}

{{ block content }}

<div id = "all">

    <h1>Fragebogen</h1>
    <div>
        <p style="margin: 2em 0 2em;" class="text-center">
            Bitte beantworten Sie nachstehende Fragen zu Ihrer Person.<br>
<!--            Sobald alle Teilnehmenden den Fragebogen ausgefüllt haben, beginnen wir mit der Auszahlung.<br>-->
<!--            Mit * gekennzeichnete Felder müssen ausgefüllt sein.-->
        </p>
        <hr>

        <!-- Erste 5 Fragen -->
        <div>
            {{ for field in form }}

                {{ if forloop.counter < 4 }}

                    <div style="margin: 0 0 2em;" class="row">
                        <div class="col-7" style="text-align: right;">{{ field.label }}</div>
                        <div class="col-5">{{ field }}</div>
                    </div>
                {{ endif }}
            {{ endfor }}
        </div>

        <!-- Weitere Fragen -->
        {{ for field in form }}

            {{ if 4 <= forloop.counter }}

                <div style="margin: 0 0 2em;"
                        {{ if forloop.counter == 6 }}
                             id="schulabschluss"
                             class="row hide-abschluss"
                        {{ elif forloop.counter == 8 }}
                             id="berufsabschluss"
                             class="row hide-abschluss"
                        {{ else }}
                             class="row"
                        {{ endif }}
                >

                    <div class="col-7" style="text-align: right;">{{ field.label }}</div>
                    <div class="col-5">{{ field }}</div>
                </div>
            {{ endif }}
        {{ endfor }}

    </div>

    <!-- Button -->
    <div class="buttonclassusualhere">{{ next_button }}</div>
</div>


{{ endblock }}

{{ block scripts }}
    <script>

        let selectors = ["schulabschluss", "berufsabschluss"]

        let other_values = ["7", "10"]

        for (let i = 0; i < selectors.length; i++) {
            $("#id_" + selectors[i]).change(function () {
                    if ($(this).val() === other_values[i]) {
                        $("#" + selectors[i]).removeClass("hide-abschluss").addClass("font-weight-bold");
                    } else {
                        $("#" + selectors[i]).addClass("hide-abschluss");
                    }
                }
            )
        }

    </script>
{{ endblock }}