{% extends "global/Page.html" %}
{% block title %}{{Lexicon.payoff_title}}{% endblock %}

{% block content %}
<div class="scrollable-content">
<script>
    const lang = "{{ lang }}";
    {% if lang == 'fr' %}
        const decimalSeparator = ",";
    {% else %}
        const decimalSeparator = ".";
    {% endif %}

    const fmt2 = x => Number(x).toFixed(2).replace('.', decimalSeparator);
    const fmt1 = x => Number(x).toFixed(1).replace('.', decimalSeparator);
    const fmt0 = x => Number(x).toFixed(0).replace('.', decimalSeparator);

    document.addEventListener("DOMContentLoaded", () => {
        // Show-up fee
        const showupRaw = document.getElementById("showup-template").textContent;
        const showupText = showupRaw.replace("{show_up_fee}", "{{ show_up_fee }}");
        document.getElementById("showup-output").innerHTML = showupText;

        // Lottery result (if selected)
        {% if played_lottery %}
            const lotteryRaw = document.getElementById("lottery-template").textContent;
            const lotteryText = lotteryRaw
                .replaceAll("{lottery_allocation}", fmt0({{ lottery_allocation|safe }}))
                .replace("{lottery_result}", "{{ lottery_outcome }}")
                .replace("{lottery_tokens}", fmt1({{ lottery_tokens|safe }}))
                .replace("{lottery_return}", "{{ lottery_return_signed }}");
            document.getElementById("lottery-result").innerHTML = lotteryText;
        {% endif %}
       
        {% if forecast_value %}
        // Forecast result (always shown)
        const forecastRaw = document.getElementById("forecast-template").textContent;
        const forecastText = forecastRaw
        .replace("{selected_round}", {{ selected_round }})
        .replace("{forecast_value}", fmt1({{ forecast_value|safe }}))
        .replace("{realized_return}", fmt1({{ realized_return|safe }}));

    document.getElementById("forecast-result").innerHTML = forecastText; 
    const forecastBonusText = document.getElementById("forecast-bonus-template").textContent;
    document.getElementById("forecast-bonus-output").innerHTML = forecastBonusText;
{% endif %}

    /// Investment result
    const investmentRaw = document.getElementById("investment-template").textContent;
    const investmentText = investmentRaw
    .replaceAll("{selected_round}", {{ selected_round }})
    .replace("{realized_return}", fmt1({{ realized_return|safe }}))
    .replaceAll("{investment_allocation}", fmt0({{ investment_allocation|safe }}))
    .replace("{invest_payoff}", fmt1({{ invest_payoff|safe }}))
    .replace("{investment_return_signed}", "{{ investment_return_signed }}");

    document.getElementById("investment-result").innerHTML = investmentText;
    
    /// Total payoff
    const totalRaw = document.getElementById("total-template").textContent;
    const totalText = totalRaw
    .replace("{total_tokens}", fmt1({{ total_tokens|safe }}))
    .replace("{tokens_to_cad}", fmt2({{ tokens_to_cad|safe }}))
    .replace("{final_cad}", fmt2({{ final_cad|safe }}));  
    
    document.getElementById("total-result").innerHTML = totalText;
    });
</script>

<p>{{ Lexicon.payoff_text|safe }}</p>

<!-- Show-up fee -->
<p id="showup-output"></p>
<script id="showup-template" type="text/plain">
    {{ Lexicon.payoff_showup }}
</script>

<!-- Lottery payoff -->
<p>{{ Lexicon.payoff_lottery_intro|safe }}</p>
<div id="lottery-result">
    {% if not played_lottery %}
        <p>{{ Lexicon.payoff_lottery_not_chosen|safe }}</p>
    {% endif %}
</div>
<script id="lottery-template" type="text/plain">
    {{ Lexicon.payoff_lottery_chosen }}
</script>

<!-- Forecast bonus -->
 {% if forecast_value %}
<div id="forecast-result"></div>
<p id="forecast-bonus-output"></p>
{% endif %}

<!-- Investment payoff -->
<div id="investment-result"></div>
<script id="investment-template" type="text/plain">
  {{ Lexicon.payoff_title }}
    {% if not forecast_value %}
        {{ Lexicon.round_chosen }}
    {% endif %}
    {{ Lexicon.payoff_investment }}
</script>

<!-- Total payoff -->
<div id="total-result"></div>
<script id="total-template" type="text/plain">
    {{ Lexicon.payoff_total }}
</script>

<!-- The end-->
<div id="the-end"></div>
        {{ Lexicon.final_instruction }}


<!-- Templates -->
<script id="forecast-template" type="text/plain">
    {{ Lexicon.payoff_forecast }}
</script>
<script id="forecast-bonus-template" type="text/plain">
    {% if forecast_bonus %}
        {{ Lexicon.payoff_forecast_accurate }}
    {% else %}
        {{ Lexicon.payoff_forecast_not_accurate }}
    {% endif %}
</script>

</div>
{% endblock %}