{{ block title }}
{{ endblock }}

{{ block content }}
<div style="display: flex; flex-direction: column; gap: 1.5em;">

    <!-- Unclear question -->
    <div class="question-block">
        {{ formfield 'Ana_PQ_unclear_yn' }}
        <div id="unclear_elaboration" class="elaboration" style="display: none;">
            {{ formfield 'Ana_PQ_unclear' }}
        </div>
    </div>

    <!-- Issue question -->
    <div class="question-block">
        {{ formfield 'Ana_PQ_issue_yn' }}
        <div id="issue_elaboration" class="elaboration" style="display: none;">
            {{ formfield 'Ana_PQ_issue' }}
        </div>
    </div>

</div>

<script>
    function setupElaboration(radioName, elaborationId) {
        const elaboration = document.getElementById(elaborationId);

        // Find the "Yes" radio input and its parent label/wrapper
        const yesRadio = document.querySelector(`input[name="${radioName}"][value="True"]`);

        if (yesRadio) {
            // Get the outermost wrapper of the Yes radio (go up to label or li or div)
            const yesWrapper = yesRadio.closest('label, li, div.radio, div') || yesRadio.parentElement;

            // Insert the elaboration box right after the Yes wrapper
            yesWrapper.insertAdjacentElement('afterend', elaboration);
        }

        // Toggle visibility
        function update() {
            const checked = document.querySelector(`input[name="${radioName}"]:checked`);
            elaboration.style.display = (checked && checked.value === 'True') ? 'block' : 'none';
        }

        document.querySelectorAll(`input[name="${radioName}"]`).forEach(radio => {
            radio.addEventListener('change', update);
        });

        update();
    }

    document.addEventListener('DOMContentLoaded', function () {
        setupElaboration('Ana_PQ_unclear_yn', 'unclear_elaboration');
        setupElaboration('Ana_PQ_issue_yn', 'issue_elaboration');
    });
</script>

<br><br>
<div style = " display: flex; justify-content: right; align-items: right; ">
        <button class="btn btn-primary">Submit</button>
    </div>

<style>
    .btn-next {
        display: block;
        width: 200px;
        margin: 30px auto 0;
        padding: 10px;
        background-color: #3498db;
        color: white;
        border: none;
        border-radius: 5px;
        font-size: 18px;
        cursor: pointer;
        text-align: center;
    }

    .btn-next:hover {
        background-color: #2980b9;
    }
</style>
{{ endblock }}