{% extends "global/Page.html" %}
{% load otree static %}

{% block title %}
    Results of Round {{subsession.round_number}}/10
{% endblock %}

{% block content %}

<!-- Portfolio table -->
<div class="container">
    <h2>My Portfolio</h2>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-10"> <!-- You can adjust the column width by changing the number in col-md-* -->
                <table class="table table-striped mx-auto text-center" style="width: auto;">
                    <thead>
                    <tr>
                        <th>Cash</th>
                        <th>Assets Value</th>
                        <th>Total</th>
                        <th>Portfolio Gains or Losses</th>
                        <th>Portfolio Gains or Losses Percentage</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>${{cash}}</td>
                        <td>${{share_value}}</td>
                        <td>${{portfolio_value}}</td>
                        <td id="portfolio-profit">${{ portfolio_profit }}</td>
                        <td id="portfolio-profit-percentage"></td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>


    {% next_button %}
<script>
    document.addEventListener('DOMContentLoaded', (event) => {
        var profitElement = document.getElementById('portfolio-profit');
        var profitValueStr = '{{ portfolio_profit }}'.replace(/,/g, '');  // Remove commas
        var profitValue = parseFloat(profitValueStr);  // Parse as float
        if (profitValue >= 0) {
            profitElement.style.color = 'green';
        } else {
            profitElement.style.color = 'red';
        }
    });

    var portfolio_profit_str = '{{ portfolio_profit }}'.replace(/,/g, '');  // Remove commas
    var portfolio_profit = parseFloat(portfolio_profit_str);  // Parse as float

    // Calculate the profit percentage
    var profit_percentage = (portfolio_profit * 100 / 10000).toFixed(2);  // toFixed(2) will keep 2 decimal places

    // Get the td element
    var tdElement = document.getElementById('portfolio-profit-percentage');

    // Update the content of the td element
    tdElement.textContent = profit_percentage + '%';

    // Change the text color based on the value
    if (profit_percentage >= 0) {
        tdElement.style.color = 'green';
    } else {
        tdElement.style.color = 'red';
    }

</script>




{% endblock %}