{% extends "global/Page.html" %}
{% load otree %}

{% block title %}
    
{% endblock %}

{% block content %}

    <br>

    <p></p>
     {% formfield 'posexample' %}
    <p></p>
     {% formfield 'impcccity' %}

    <p></p>
     {% formfield 'ffmfuture' %}
    <p></p>

    <p>  <br>  <br> </p>
    Wie sehr stimmen Sie den folgenden Aussagen zu?
    <br>
    {% formfield 'policyindfight' %}
    <br>
    {% formfield 'policycrowdout' %}
    <br>
    {% formfield 'policygovmot' %}
    <br>
    {% formfield 'policyneighmot' %}
    <br>
    {% formfield 'policyccrestrict' %}
    <br>
    {% formfield 'policyposexam' %}
    <br>
    {% formfield 'policynoclue' %}
    <br>
    {% formfield 'policymorecity' %}
    <br>
    {% formfield 'policyhelp' %}
    
     <p></p>
    <br>
     {% formfield 'newsletter' %}
    <div class="form-check">
        <input class="form-check-input" type="checkbox" value="True" name="newsletterconsent">
        <label class="form-check-label">
            Ich bin damit einverstanden, dass meine Email-Adresse an das „Team Frankfurt Klimaschutz" zur Anmeldung für den Klimaschutz Newsletter weitergeleitet wird.
        </label>
    </div>
    <p></p>
    {% next_button %}
    <script>
        let fields = [
            {
                id: "policyindfight",
                scale_label_01: "stimme überhaupt nicht zu",
                scale_label_02: "stimme voll und ganz zu"
            },
            {
                id: "policycrowdout",
                scale_label_01: "stimme überhaupt nicht zu",
                scale_label_02: "stimme voll und ganz zu"
            },
            {
                id: "policygovmot",
                scale_label_01: "stimme überhaupt nicht zu",
                scale_label_02: "stimme voll und ganz zu"
            },
            {
                id: "policyneighmot",
                scale_label_01: "stimme überhaupt nicht zu",
                scale_label_02: "stimme voll und ganz zu"
            },
            {
                id: "policyccrestrict",
                scale_label_01: "stimme überhaupt nicht zu",
                scale_label_02: "stimme voll und ganz zu"
            },
            {
                id: "policyposexam",
                scale_label_01: "stimme überhaupt nicht zu",
                scale_label_02: "stimme voll und ganz zu"
            },
            {
                id: "policynoclue",
                scale_label_01: "stimme überhaupt nicht zu",
                scale_label_02: "stimme voll und ganz zu"
            },
            {
                id: "policymorecity",
                scale_label_01: "stimme überhaupt nicht zu",
                scale_label_02: "stimme voll und ganz zu"
            },
            {
                id: "policyhelp",
                scale_label_01: "stimme überhaupt nicht zu",
                scale_label_02: "stimme voll und ganz zu"
            }

        ]
    
        fields.forEach(field => {
            let label = document.querySelector(`label.col-form-label[for=id_${field.id}]`);
            let control = label.nextElementSibling || label.nextSibling;
            let scale_label_01 = document.createElement("div");
            let scale_label_02 = document.createElement("div");
            scale_label_01.classList.add("scale-label");
            scale_label_02.classList.add("scale-label");
            scale_label_01.textContent = field.scale_label_01;
            scale_label_02.textContent = field.scale_label_02;
            control.prepend(scale_label_01);
            control.append(scale_label_02);
            control.classList.add("with_labels");
        });
    </script>
{% endblock %}