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

{% block title %}

{% endblock %}

{% block content %}

    <p>
        <br>
    </p>
    

    <p><b>Was tun Sie zur Bekämpfung des Klimawandels? </b></p>
    <br>

     <p>Welche dieser Dinge versuchen Sie, aktiv zu tun?</p>
     <div class="form-check">
        <input class="form-check-input" type="checkbox" value="True" name="own1">
        <label class="form-check-label">
            Ihren Fleischkonsum verringern.
        </label>
    </div>
     <div class="form-check">
        <input class="form-check-input" type="checkbox" value="True" name="own2">
        <label class="form-check-label">
            Auf das Fliegen verzichten.
        </label>
    </div>
     <div class="form-check">
        <input class="form-check-input" type="checkbox" value="True" name="own3">
        <label class="form-check-label">
            Umweltfreundliche Alternativen zum Auto benutzen.
        </label>
    </div>
    <div class="form-check">
        <input class="form-check-input" type="checkbox" value="True" name="own4">
        <label class="form-check-label">
            Strom aus umweltfreundlichen Quellen beziehen.
        </label>
    </div>
        <div class="form-check">
        <input class="form-check-input" type="checkbox" value="True" name="own5">
        <label class="form-check-label">
            In ihrem Kaufverhalten den CO2 Fußabdruck der Produkte berücksichtigen.
        </label>
    </div>
        </div>
        <div class="form-check">
        <input class="form-check-input" type="checkbox" value="True" name="own6">
        <label class="form-check-label">
            Politisch den Kampf gegen den Klimawandel unterstützen, an Demonstrationen teilnehmen, Petitionen  unterschreiben oder Politische Organisationen unterstützen.
        </label>
    </div>
    <p></p>
    <img src="{% static 'bonus.png' %}"/>
    <p>Was denken Sie: Wie viele von 100 Befragten geben an, dass <b>sie selbst in Frankfurt …</b></p>
    <p></p>
    {% formfield 'ffm1' %}
    
    {% formfield 'ffm2' %}
    
    {% formfield 'ffm3' %}
    
    {% formfield 'ffm4' %}
    
    {% formfield 'ffm5' %}
    
    {% formfield 'ffm6' %}

   <p></p>
   <p> <br>Welche dieser Dinge sollten Menschen in Frankfurt Ihrer Meinung nach tun?</p>
   <div class="form-check">
       <input class="form-check-input" type="checkbox" value="True" name="own1">
       <label class="form-check-label">
           Ihren Fleischkonsum verringern.
       </label>
   </div>
   <div class="form-check">
       <input class="form-check-input" type="checkbox" value="True" name="own2">
       <label class="form-check-label">
           Auf das Fliegen verzichten.
       </label>
   </div>
   <div class="form-check">
       <input class="form-check-input" type="checkbox" value="True" name="own3">
       <label class="form-check-label">
           Umweltfreundliche Alternativen zum Auto benutzen.
       </label>
   </div>
   <div class="form-check">
       <input class="form-check-input" type="checkbox" value="True" name="own4">
       <label class="form-check-label">
           Strom aus umweltfreundlichen Quellen beziehen.
       </label>
   </div>
       <div class="form-check">
       <input class="form-check-input" type="checkbox" value="True" name="own5">
       <label class="form-check-label">
           In ihrem Kaufverhalten den CO2 Fußabdruck der Produkte berücksichtigen.
       </label>
    </div>
        
        <div class="form-check">
        <input class="form-check-input" type="checkbox" value="True" name="own6">
        <label class="form-check-label">
           Politisch den Kampf gegen den Klimawandel unterstützen, an Demonstrationen teilnehmen, Petitionen unterschreiben oder Politische Organisationen unterstützen.
        </label>
    </div>
    <p></p>

    
    
    {% next_button %}
    <script>
        let fields = [
            {
                id: "own1",
                scale_label_01: "",
                scale_label_02: "Ihren Fleischkonsum zu verringern"
            }
            

        ]
    
        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 %}