{{ block title }}
Frage {{nummer}} von {{C.AMOUNT_QUESTIONS}}

{{ endblock }}

{{ block styles }}
<style>
    #studienfeldInput, #studiengangInput {
        width: auto;
        min-width: 300px;
        max-width: 100%;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 10px center;
        padding-right: 2rem;
    }
</style>
{{ endblock }}

{{ block content }}


<!--{{formfield 'Studienfeld'}}>-->
<p> Bitte wählen Sie zuerst Ihr Studienfeld aus, und anschließend Ihren Studiengang.</p>
<br>

<p style="margin-bottom: 0.25rem;">Ihr Studienfeld: </p>
<select name="studienfeld" id="studienfeldInput" class="form-control">
</select>
<br>
<p style="margin-bottom: 0.25rem;">Ihr Studiengang: </p>
<select id="studiengangInput" class="form-control">
</select>


<div id="nextButtonDiv"><br>
    <button type="button" class="btn btn-primary" id="continueButton">Weiter</button>
</div>



<input type="hidden" name="Studiengang" id="studiengang" />
<input type="hidden" name="Studienfeld" id="studienfeld" />


{{ formfield_errors 'Studienfeld' }}
{{ formfield_errors 'Studiengang' }}
{{ endblock }}

{{block script}}
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {

    // var studienfeldDropdown = document.getElementsByName("studienfeld");
    var studienfeldDropdown = document.getElementById("studienfeldInput")
    var studiengangDropdown = document.getElementById("studiengangInput");
    var studiengangHiddenInput = document.getElementById("studiengang");
    var studienfeldHiddenInput = document.getElementById("studienfeld");
    var continueButton = document.getElementById("continueButton");
    var studiengang_text = js_vars.studiengang_text;
    var studiengangChoices = js_vars.studiengang;
    var studienfeldChoices = js_vars.studienfeld;
    studienfeldDropdown.innerHTML = '';

    var defaultOption = document.createElement('option');
    defaultOption.textContent = "Hier reinklicken, um Ihr Studienfeld auszuwählen";
    defaultOption.value = "";
    studienfeldDropdown.appendChild(defaultOption);
    var id = 0;
    for(var key in studiengangChoices) {
        if (studiengangChoices.hasOwnProperty(key))
        {
            // index

            var option = document.createElement('option');
            option.textContent = studienfeldChoices[id];

            option.innerHTML = studienfeldChoices[id];
            option.value = key;
            option.index = id;
            studienfeldDropdown.appendChild(option);
        }
        id++;
    }

    studienfeldDropdown.addEventListener('change', function() {
        var selectedField = this.value;
        var options = studiengangChoices[selectedField];

        studiengangDropdown.innerHTML = "<option value=''>"+studiengang_text+"</option>"; // Reset and add placeholder
        if(options) {
            options.forEach(function(option) {
                var opt = document.createElement('option');
                opt.value = option;
                opt.innerHTML = option;

                studiengangDropdown.appendChild(opt);
            });
        }
    });

    studienfeldDropdown.addEventListener('change', function() {


        studienfeldHiddenInput.value = studienfeldChoices[studienfeldDropdown.selectedIndex-1];

    });
    studiengangDropdown.addEventListener('change', function (){

        studiengangHiddenInput.value = this.value;

    });

    continueButton.addEventListener('click', function() {

        if(studienfeldHiddenInput.value === ''){
            alert('Bitte wählen Sie ein Studienfeld aus & dann einen Studiengang')
        }
        else if(studiengangDropdown.value === '' || studiengangDropdown.value === studiengang_text ){
            alert('Bitte wählen Sie einen Studiengang.');
        }
        else {
            document.forms[0].submit();
        }
    });
});
</script>
{{endblock}}