{{ extends "global/Page.html" }}
{{ block title }} {{ endblock }}

{{ block content }}


<div>
    <label>
        <input type="radio" name="role" value="Subject" id="subjectBtn" disabled> Subject
    </label>
    <br>
    <label>
        <input type="radio" name="role" value="Experimenter" id="experimenterBtn"> Experimenter
    </label>

    <input type="hidden" id="hiddenRole" name="Role_Subject_or_Experimenter">
    <br><br>
    <button type="button" onclick="checkUpdates()">Refresh Data</button>
    <button onclick="handleSubmit()">Submit</button>
</div>

{{ formfield_errors 'Role_Subject_or_Experimenter' }}


{{ endblock }}

{{ block scripts }}
<script>
function handleSubmit() {
    const selected = document.querySelector('input[name="role"]:checked');
    if (selected) {
        document.getElementById('hiddenRole').value = selected.value;

        // Only livesend if Experimenter chosen
        if (selected.value === "Experimenter") {
            liveSend({ message: "Experimenter role confirmed" });
        }
    }

    // Submit page back to oTree
    document.querySelector('form').submit();
}



function checkUpdates(){  
  liveSend({ message: "N/A" });
}



function liveRecv(data) {
    if (data.experimenter_chosen) {
        const experimenterBtn = document.getElementById('experimenterBtn');
        experimenterBtn.checked = false;
        experimenterBtn.disabled = true;

        const subjectBtn = document.getElementById('subjectBtn');
        subjectBtn.checked = true;
      	subjectBtn.disabled = false;
    }
}
</script>
{{ endblock }}