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

{% block title %}
    {{ Lexicon.investment_title }} - Round {{ round_number }}
{% endblock %}

{% block content %}

<!-- Show the graph for the realized return -->
<img src="{{ graph_url }}" alt="Realized Return Graph for Decision {{ decision_id }}" width="900px">

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

<script>
    // @ts-nocheck - Template syntax used for server-side rendering
    (function() {
        const lang = "{{ lang }}";
        const decimalSeparator = (lang === "fr") ? "," : ".";
        const fmt1 = x => x.toFixed(1).replace('.', decimalSeparator);
        const fmt0 = x => x.toFixed(0).replace('.', decimalSeparator);
        
        const allocation = {{ allocation|safe }};
        const realizedReturn = {{ realized_return|safe }};
        const payoffInvestment = {{ payoff_investment|safe }};
        const payoffTotal = {{ payoff_total|safe }};
        const forecastedReturn = {{ forecasted_return|safe }};
        const payoffForecast = {{ payoff_forecast|safe }};
        const forecastCorrect = "{{ forecast_correct }}";
        
        const feedbackTemplate = `{{ Lexicon.feedback_template|safe }}`;
        
        function generateFeedback () {
            return feedbackTemplate
                .replaceAll('{allocation}', fmt0(allocation))
                .replaceAll('{realized_return}', fmt1(realizedReturn))
                .replace('{payoff_investment}', fmt1(payoffInvestment))
                .replace('{payoff_total}', fmt1(payoffTotal))
                .replace('{forecast_correct}', forecastCorrect)
                .replaceAll('{forecasted_return}', fmt1(forecastedReturn))
                .replace('{payoff_forecast}', fmt1(payoffForecast));
        }

        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 %}
{% if lang == 'fr' %}
    <button class="btn btn-primary" type="button" onclick="document.getElementById('results-submit-btn').click();">Suivant</button>
{% else %}
    <button class="btn btn-primary" type="button" onclick="document.getElementById('results-submit-btn').click();">Next</button>
{% endif %}
{% endblock %}