{% load otree %}

{{ block title }}Final Survey{{ endblock }}

{{ block content }}
<p>Please answer the following questions.</p>

{{ formfield 'ethnicity' }}
<div id="ethnicGroupOtherWrap">
    {{ formfield 'ethnicity_other' }}
</div>
{{ formfield 'father_birth_country' }}
{{ formfield 'mother_birth_country' }}
{{ formfield 'birth_country' }}
{{ formfield 'us_start_age' }}

<script>
    (function () {
        const wrap = document.getElementById('ethnicGroupOtherWrap');
        if (!wrap) return;
        const inputs = document.querySelectorAll('input[name="race_ethnicity"]');
        function toggle() {
            const selected = document.querySelector('input[name="race_ethnicity"]:checked');
            const show = selected && selected.value === 'Other';
            wrap.style.display = show ? '' : 'none';
        }
        inputs.forEach(el => el.addEventListener('change', toggle));
        toggle();
    })();
</script>

{{ next_button }}
{% include "final_survey/_debug_autofill.html" %}
{{ endblock }}