{{ block content }}
<b>Answer the following questions:</b>
<br>
<br>

<div class="card">
    <div class=card-header><b>Is English your first language?</b></div>
    <div class="card-body">
        <div>
            <div {{ if 'firstlanguage' in form.errors }} class="border border-danger px-3 rounded" {{ endif }}>
            {{ formfield 'firstlanguage' label=''}}
            </div>            
        </div>
        <span id='hiddenbox1' class="do-not-show">
            <b>Are you proficient in English?</b>
            {{ formfield 'english' label=''}}
        </span>
    </div>
</div>
<br>

<div class="card">
    <div class=card-header><b>What is your current year of study?</b></div>
    <div class="card-body"> {{ formfield 'year' label=''}} </div>
</div>
<br>

<div class="card">
    <div class=card-header><b>Which of the following best describes your primary field of study?</b></div>
    <div class="card-body"> {{ formfield 'field' label=''}} </div>
</div>
<br>
<br>

<div class="card">
    <div class=card-header><b>Please specify your primary field of study:</b></div>
    <div class="card-body"> {{ formfield 'field_oe' label=''}} </div>
</div>
<br>
<br>

<button class="otree-btn-next btn btn-dark btn-primary">Next</button>

{{ endblock }}

{{ block style }}
    <link rel="stylesheet" href="{% static 'global/style.css' %}"/>

    <style>
        .do-not-show {
            display: none;
        }
    </style>
{{ endblock }}

{{ block scripts }}
    <script>
        let hiddenbox1 = document.getElementById("hiddenbox1");

        let yes = document.getElementById("id_firstlanguage-0");
        let no = document.getElementById("id_firstlanguage-1");
        let english = document.getElementById("id_english");

        yes.addEventListener("change", function() {
            hiddenbox1.classList.add("do-not-show");
            english.required = false;
        });
        no.addEventListener("change", function() {
            hiddenbox1.classList.remove("do-not-show");
            english.required = true;
        });
    </script>
{{ endblock }}