{% extends 'otree/Page.html' %}
{% load otree static %}

{% block global_styles %}
<link rel="stylesheet" href="{% static 'global/footer-layout.css' %}"/>
{% endblock %}

{% block content %}
<p>This is from global/Page.html.</p>
{% endblock %}

{% block footer %}
<div class="fixed-footer">
    <div class="footer-left">
        {% block footer_instructions %}{% endblock %}
    </div>
    <div class="footer-center">
        <div id="footer-error-message" class="error-message"></div>
    </div>
    <div class="footer-right">
        {% block footer_buttons %}
        {% endblock %}
    </div>
</div>

<script>
// Override oTree's default error display
document.addEventListener('DOMContentLoaded', function() {
    // Hide default oTree error alerts and show in footer
    const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            mutation.addedNodes.forEach(function(node) {
                if (node.classList && node.classList.contains('alert')) {
                    const errorText = node.textContent.trim();
                    if (errorText) {
                        document.getElementById('footer-error-message').textContent = errorText;
                        node.style.display = 'none';
                    }
                }
            });
        });
    });
    
    observer.observe(document.body, { childList: true, subtree: true });
    
    // Also check for existing errors
    const existingAlerts = document.querySelectorAll('.alert');
    existingAlerts.forEach(function(alert) {
        const errorText = alert.textContent.trim();
        if (errorText) {
            document.getElementById('footer-error-message').textContent = errorText;
            alert.style.display = 'none';
        }
    });
});
</script>
{% endblock footer %}