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

{% block content %}
    <h2>Please select your preferred language:</h2>
{% endblock %}

{% block footer %}
<div class="fixed-footer">
    <div class="footer-left">
    </div>
    <div class="footer-center">
        <div id="footer-error-message" class="error-message"></div>
    </div>
    <div class="footer-right">
        <form method="post" style="display: inline-flex; gap: 10px; flex-direction: row; align-items: center;">
            <button name="language" value="en" class="btn btn-primary">English</button>
            <button name="language" value="fr" class="btn btn-primary">Français</button>
        </form>
    </div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
    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 });
    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 %}