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

{% block content %}

    {% formfield player.age %}
    {% formfield player.gender %}

    <div id="other-gender-container" style="display: none;">
        {% formfield player.gender_other %}
    </div>

    {% next_button %}

{% endblock %}

{% block scripts %}

<script>
    document.addEventListener("DOMContentLoaded", function() {
        let genderRadios = document.querySelectorAll('input[name="gender"]');
        let otherContainer = document.getElementById('other-gender-container');

        function toggleOtherField() {
            let selectedValue = document.querySelector('input[name="gender"]:checked')?.value;
            // Show field if "Other" or custom text option is selected
            if (selectedValue === 'Other' || selectedValue === "You don't have an option that applies to me. I identify as:") {
                otherContainer.style.display = 'block';
            } else {
                otherContainer.style.display = 'none';
                document.querySelector('input[name="gender_other"]').value = ''; // clear text if hidden
            }
        }

        genderRadios.forEach(radio => {
            radio.addEventListener('change', toggleOtherField);
        });

        // Run on load in case of page reload/back button state
        toggleOtherField();
    });
</script>
{% endblock %}