{% extends "layout.html" %}
{% set active_page = "portfolio" %}
{% import 'macros/cards.html' as m_cards %}
{% block body %}
<style>
.card-deck .card{
    max-width: 230px;
}
</style>
<br>
<div class="card" id="portfoliosCard" update-url="{{ url_for('portfolio_holdings') }}" reference_market="{{reference_unit}}">
    {% if has_real_trader %}
        <div class="card-header"><h1>Real portfolio: {{real_total_value}} {{reference_unit}}</h1></div>
        <div class="card-body">
            {% if real_portfolio %}
                <div>
                    <canvas id="real_portfolio_doughnutChart" height="70%" ></canvas>
                </div>
                <div class="card-subtitle text-muted"><h2>Full portfolio</h2></div>
                <div class="card-deck">
                    {% for currency in real_portfolio %}
                        {{ m_cards.currency_card(currency, real_portfolio) }}
                    {% endfor %}
                </div>
            {% else %}
                <div class="card-subtitle text-muted"><h2>Nothing there.</h2></div>
            {% endif %}
        </div>
    {% endif %}
    {% if has_simulated_trader %}
        {% if has_real_trader %}
</div>
<br>
<div class="card">
        {% endif %}
        <div class="card-header"><h1>Simulated portfolio: {{simulated_total_value}} {{reference_unit}}</h1></div>
        <div class="card-body">
            {% if simulated_portfolio %}
                <div>
                    <canvas id="simulated_portfolio_doughnutChart" height="70%"></canvas>
                </div>
                <div class="card-subtitle text-muted"><h2>Full portfolio</h2></div>
                <div class="card-deck">
                    {% for currency in simulated_portfolio %}
                        {{ m_cards.currency_card(currency, simulated_portfolio) }}
                    {% endfor %}
                </div>
            {% else %}
                <div class="card-subtitle text-muted"><h2>Nothing there.</h2></div>
            {% endif %}
        </div>
    {% endif %}
</div>
<br>
{% endblock %}

{% block additional_scripts %}
<script src="{{ url_for('static', filename='js/common/custom_elements.js') }}"></script>
<script src="{{ url_for('static', filename='js/components/portfolio.js') }}"></script>
{% endblock additional_scripts %}