{% extends "layout.html" %}
{% set active_page = "backtesting" %}
{% block body %}
<br>
<div class="card">
    <div class="card-header" id="backtestingPage" update-url="{{ url_for('backtesting', update_type='backtesting_status') }}">
        <h1>Backtesting
            <a class="float-right text-danger" target="_blank" rel="noopener noreferrer" href="https://github.com/Drakkar-Software/OctoBot/wiki/Backtesting-and-strategy-optimization#backtesting">
                &nbsp <i class="fa fa-question"></i>
            </a>
            <a class="float-right badge badge-dark waves-effect" href="{{ url_for('config_tentacle', name=activated_trading_mode.get_name()) }}">
                Current trading mode: {{ activated_trading_mode.get_name() }}
            </a>
        </h1>
    </div>
    <div class="card-body">
        <table class="table table-striped table-bordered table-sm table-hover" id="dataFilesTable">
          <caption>Select data file(s) to use</caption>
          <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">File</th>
                <th scope="col">Symbol</th>
                <th scope="col">Date of recording</th>
                <th scope="col">Exchange</th>
                <th scope="col">Candles</th>
            </tr>
          </thead>
          <tbody>
            {% for file, description in data_files.items() %}
                <tr class="selectable_datafile">
                    <td><div class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input dataFileCheckbox" data-file="{{file}}" symbol="{{description.symbol}}">
                        <label class="custom-control-label"></label>
                    </div></td>
                    <td>{{file}}</td>
                    <td>{{description.symbol}}</td>
                    <td>{{description.date}}</td>
                    <td>{{description.exchange}}</td>
                    <td>{{description.candles}}</td>
                </tr>
            {% endfor %}
          </tbody>
        </table>
        <span id='backtesting_progress_bar' style='display: none;'>
            <div class="card-title">
                <h2>Backtesting in progress</h2>
            </div>

            <div class='progress'>
              <div id='progess_bar_anim'  class='progress-bar progress-bar-striped bg-danger progress-bar-animated' role='progressbar' aria-valuenow='100' aria-valuemin='0' aria-valuemax='100' style='width: 100%;'></div>
            </div>
        </span>
        {% if activated_trading_mode.is_backtestable() %}
            <button type="button" id="startBacktesting" class="btn btn-primary waves-effect" start-url="{{ url_for('backtesting', action_type='start_backtesting', source='backtesting') }}">Start backtesting</button>
        {% else %}
            <div class="alert alert-warning mt-1 text-center" role="alert">
                <a class="alert-link" href="{{ url_for('config_tentacle', name=activated_trading_mode.get_name()) }}">{{ activated_trading_mode.get_name() }}</a> is not compatible with the current backtesting engine.
            </div>
        {% endif %}
    </div>
</div>

<span  id="backtestingReport" update-url="{{ url_for('backtesting', update_type='backtesting_report', source='backtesting') }}" loading="false" style='display: none;'>
    <br>
    <div class="card">
        <div class="card-header">
            <h2>
                Backtesting results
                <a class="float-right badge badge-dark waves-effect" id="reportTradingModeNameLink" href="" base_href="{{ url_for('config_tentacle', name='') }}">
                    Trading mode: <span id="reportTradingModeName"></span>
                </a>
            </h2>
        </div>
        <div class="card-body">
            <div class="alert alert-danger" id="backtestingErrorsAlert" role="alert" style="display: none;">
              Errors occurred during backtesting, <a href="{{ url_for('logs') }}" class="alert-link">details in logs</a>.
            </div>
            <table class="table table-striped table-bordered table-sm table-hover">
              <tbody>
              <tr class="selectable_datafile">
                <td>% Bot profitability</td><td id="bProf"></td>
              </tr>
              <tr class="selectable_datafile">
                <td>% Market average profitability</td><td id="maProf"></td>
              </tr>
              <tr class="selectable_datafile">
                <td>% Symbol profitability</td><td id="sProf"></td>
              </tr>
              <tr class="selectable_datafile">
                <td>End portfolio</td><td id="ePort"></td>
              </tr>
              <tr class="selectable_datafile">
                <td>Starting portfolio</td><td id="sPort"></td>
              </tr>
              <tr class="selectable_datafile">
                <td>Reference market</td><td id="refM"></td>
              </tr>
              </tbody>
            </table>
        </div>
        <div class="card-footer">
            <i class="fa fa-info-circle"></i> Backtesting results depend heavily on starting conditions such as the current <a href="{{ url_for('config')+'#panelEvaluators' }}">evaluator configuration</a> and the <a href="{{ url_for('config')+'#panelTrading' }}">starting portfolio</a>.
        </div>

        <div class="card-footer">
            <div id="result-graphs">
            </div>
        </div>

    </div>
</span>

<div class="d-none">
    <!--Symbol graph template -->
    <div class="card result-graph" id="result-graph-Bitcoin">
        <div class="card-body text-center" name="loadingSpinner">
            <h2>
                <i class="fa fa-spinner fa-spin"></i>
            </h2>
        </div>
        <div class="card-body">
            <div id="graph-symbol-price-Bitcoin"></div>
        </div>
    </div>
</div>
<div class="card-footer text-right">
    <a href="{{ url_for('data_collector') }}" class="btn btn-outline-info btn-lg waves-effect"> <i class="fa fa-cloud-download-alt"></i> Get historical data</a>
</div>
{% endblock %}

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