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

{{ block title }}
    {{ Lexicon.instruction_title}}
{{ endblock }}

{{ block content }}

<div class="scrollable-content">
    <p>{{ Lexicon.instructions_part1|safe }}</p>
    <p>{{ Lexicon.instructions_part2|safe }}</p>
    <p>{{ Lexicon.instructions_part3|safe }}</p>
    <p>{{ Lexicon.instructions_example|safe }}</p>
</div>

{# Hidden submit button to allow form submission from footer #}
<button id="instructions-submit-btn" type="submit" style="display:none;"></button>
{% 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">
        {% if lang == 'fr' %}
        <button class="btn btn-primary" type="button" onclick="document.getElementById('instructions-submit-btn').click();">Suivant</button>
        {% else %}
        <button class="btn btn-primary" type="button" onclick="document.getElementById('instructions-submit-btn').click();">Next</button>
        {% endif %}
    </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 %}