{{ block title }}
    Geschlecht
{{ endblock }}

{% block content %}
    <p>{{ form.gender.label }}</p>

    <label>
        <input type="radio" name="gender" value="männlich" required>
        Männlich
    </label><br>

    <label>
        <input type="radio" name="gender" value="weiblich">
        Weiblich
    </label><br>

    <label>
        <input type="radio" name="gender" value="anderes">
        Ich identifiziere mich als:
        <input type="text" name="gender_other" id="gender_other_input" style="display:none; margin-left: 10px;">
    </label><br>

    <label>
        <input type="radio" name="gender" value="nothing">
        Ich möchte diese Frage nicht beantworten.
    </label><br>

    <script>
        const radios = document.querySelectorAll('input[name="gender"]');
        const otherInput = document.getElementById('gender_other_input');

        function toggleOtherInput() {
            const selected = document.querySelector('input[name="gender"]:checked');
            if (selected && selected.value === 'anderes') {
                otherInput.style.display = 'inline';
                otherInput.required = true;
            } else {
                otherInput.style.display = 'none';
                otherInput.required = false;
                otherInput.value = '';  // clear the field if not used
            }
        }

        radios.forEach(radio => {
            radio.addEventListener('change', toggleOtherInput);
        });

        // On page load
        toggleOtherInput();
    </script>
    <br>
    <button class="otree-btn-next btn btn-primary">Weiter</button>
{% endblock %}