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

{% block title %}
    {{ Lexicon.investment_title }}
{% endblock %}

{% block content %}

<!-- Static graph display for test round -->
<img src="{{ graph_url }}" alt="Realized Return Graph" width="900px">

<p id="feedback-output"></p>

<script>
    const lang = "{{ lang }}";

    {% if lang == 'fr' %}
        const decimalSeparator = ",";
    {% else %}
        const decimalSeparator = ".";
    {% endif %}

    const feedbackTemplate = `{{ Lexicon.feedback_template | safe }}`;

    const fmt1 = x => Number(x).toFixed(1).replace('.', decimalSeparator);
    const fmt0 = x => Number(x).toFixed(0).replace('.', decimalSeparator);
    
    function generateFeedback(){
        return feedbackTemplate
            .replace('{allocation}', fmt0({{ allocation|safe }}))
            .replace('{realized_return}', fmt1({{ realized_return|safe }}))
            .replace('{payoff}', fmt1({{ payoff|safe }}));
    }

    document.addEventListener("DOMContentLoaded", () => {
        document.getElementById("feedback-output").innerHTML = generateFeedback();
    });
</script>

{# Hidden submit button to allow form submission from footer #}
<button id="results-submit-btn" type="submit" style="display:none;"></button>
{% endblock %}

{% block footer_buttons %}
<button class="btn btn-primary" type="button" onclick="document.getElementById('results-submit-btn').click();">Next</button>
{% endblock %}