{% extends "layout.html" %}
{% set active_page = "home" %}
{% block body %}
    <div update-url="{{ url_for('api.announcements') }}" class="alert alert-danger text-center d-none" role="alert" id="annoncementsAlert"></div>
    <br>
    <div class="card">
        <div class="card-header"><h1>Profitability</h1></div>
        <div class="card-body card-text" id="profitability_graph" update-url="{{ url_for('profitability') }}">
            <div id="graph-profitability-description"></div>
            <canvas id="graph-profitability" height="30%"></canvas>
        </div>
    </div>
    <br>
    <div class="card">
        <div class="card-header"><h1>Watched markets</h1></div>
        <div class="card-body d-none text-center" id="loadingMarketsDiv">
            <h2>
                OctoBot is starting, markets will be refreshed when available.
            </h2>
        </div>
        <div class="card-body text-center" name="loadingSpinner">
            <h2>
                <i class="fa fa-spinner fa-spin"></i>
            </h2>
        </div>
        {% if backtesting_mode %}
            <div class="card-body" id="first_symbol_graph" update-url="{{ url_for('first_symbol') }}" backtesting_mode={{backtesting_mode}}>
                <div id="graph-symbol-price"></div>
            </div>
        {% else %}
            {% for pair in watched_symbols %}
                <div class="card-body" id="{{pair}}_graph" backtesting_mode={{backtesting_mode}}>
                    <div class="watched-symbol-graph" id="{{pair}}_graph-symbol-price" symbol="{{pair}}"></div>
                </div>
            {% endfor %}
            {% if not watched_symbols %}
                <div class="card-body" id="first_symbol_graph" update-url="{{ url_for('first_symbol') }}" backtesting_mode={{backtesting_mode}}>
                    <div id="graph-symbol-price"></div>
                </div>
                <div class="card-footer">No watched markets: using a default one. You can add <a href="#"><i class="far fa-star"></i></a> watched markets in the <a href="{{ url_for('trading') }}">trading section</a>.</div>
            {% endif %}
        {% 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/common/candlesticks.js') }}"></script>
    <script src="{{ url_for('static', filename='js/components/dashboard.js') }}"></script>
{% endblock additional_scripts %}