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

{% block content %}
<style>
    .unfilled { padding: 15px; border: 2px solid #f44336 !important; border-radius: 10px; background-color: #fff5f5; }
</style>

<div class="card shadow-sm p-4 mb-4 border-primary">
    <div id="wrapper_ai_assist_methods" class="p-2">
        {% formfield player.ai_assist_methods %}
    </div>
    <div class="next-btn-wrap" style="text-align: center;">
    <button class="otree-next-button btn btn-primary">Next</button>
</div>
</div>

<script>
    document.querySelector('form').addEventListener('submit', function(e) {
        const field = document.getElementsByName('ai_assist_methods')[0];
        const wrapper = document.getElementById('wrapper_ai_assist_methods');

        if (!field.value.trim()) {
            e.preventDefault();
            wrapper.classList.add('unfilled');
            alert("Please complete the required questions marked in red.");
        }
    });
</script>
{% endblock %}