{% extends "layout.html" %}
{% set active_page = "config" %}

{% import 'macros/tentacles.html' as m_tentacles %}
{% import 'components/config/evaluator_card.html' as m_config_evaluator_card %}

{% block body %}
<br>
{% if tentacle_desc %}
    <div class="card">
        <div class="card-header">
            <h1 id='{{ name }}' config-type="evaluator_config"
                default-elements="{{tentacle_desc['advanced_class']['default-config'] if tentacle_desc['advanced_class'] and tentacle_desc['advanced_class']['default-config'] else tentacle_desc['default-config']}}"
            >{{ name }}
                <a href="{{ url_for('config') if tentacle_type in ["trading mode", "strategy"] else url_for('advanced.evaluator_config') }}">
                    {% if tentacle_desc["activation"] %}
                        <span class="badge badge-primary float-right waves-effect">Activated</span>
                    {% else %}
                        <span class="badge badge-warning float-right waves-effect">Deactivated</span>
                    {% endif %}
                </a>
            </h1>
        </div>
        <div class="card-body" id='defaultConfigDiv' update-url="{{ url_for('config') }}">
          {{ m_tentacles.tentacle_horizontal_description(tentacle_desc, tentacle_type=="strategy") }}
        </div>
    </div>
    <br>
    <div class="card">
        <div class="card-header">
            <h1>Configuration
                <a class="float-right text-danger" target="_blank" rel="noopener noreferrer" href="https://github.com/Drakkar-Software/OctoBot/wiki/Configuration#specific-evaluator-configuration">
                    <i class="fa fa-question"></i>
                </a>
            </h1>
        </div>
        <div class="card-body" id="configEditorBody" schema="{{ tentacle_class.get_specific_config_schema(False) }}" config="{{ tentacle_class.get_specific_config(False, True) }}">
            <div id="configEditor"></div>
            <div id="noConfigMessage" style='display: none;'>
                This {{ tentacle_type }} can't be configured.
            </div>
        </div>
        <div class="card-footer" id='saveConfigFooter' style='display: none;'>
            <button class="btn btn-outline-success waves-effect" id='saveConfig' update-url="{{ url_for('config_tentacle', name=name, action='update') }}">Save configuration and restart later</button>
            <button class="btn btn-outline-warning waves-effect float-right" id='factoryResetConfig' update-url="{{ url_for('config_tentacle', name=name, action='factory_reset') }}"><i class="fas fa-recycle"></i> Reset configuration to default values</button>
        </div>
    </div>
    <br>
    {% if (tentacle_type == "trading mode" and tentacle_desc['requirements']|length > 1) or tentacle_desc['requirements'] == ["*"] %}
        <div class="card" id="super-container">
            <div class="card-header">
                <h1>Compatible {{"strategies" if tentacle_type == "trading mode" else "evaluators"}}</h1>
            </div>
            <div class="card-body" id="activatedElementsBody">
                {% if tentacle_type == "trading mode" %}
                    {% for evaluator_name, info in strategy_config["strategies"].items() %}
                        {% if evaluator_name in tentacle_desc['requirements'] %}
                            {{ m_config_evaluator_card.tentacle_evaluator_card(evaluator_startup_config, evaluator_name, info, "evaluator_config") }}
                        {% endif %}
                    {% endfor %}
                {% else %}
                    <h2>Technical analysis</h2>
                    <div>
                        <div class="row config-container" id="ta-evaluator-config-root">
                            {% for evaluator_name, info in evaluator_config["ta"].items() %}
                                {% if info["evaluation_format"] == "float" %}
                                    {{ m_config_evaluator_card.tentacle_evaluator_card(evaluator_startup_config, evaluator_name, info, "evaluator_config") }}
                                {% endif %}
                            {% endfor %}
                        </div>
                    </div>
                    <br>
                    <h2>Social analysis</h2>
                    <div>
                        <div class="row config-container" id="social-evaluator-config-root">
                            {% for evaluator_name, info in evaluator_config["social"].items() %}
                                {% if info["evaluation_format"] == "float" %}
                                    {{ m_config_evaluator_card.tentacle_evaluator_card(evaluator_startup_config, evaluator_name, info, "evaluator_config") }}
                                {% endif %}
                            {% endfor %}
                        </div>
                    </div>
                    <br>
                    <h2>Real time analysis</h2>
                    <div>
                        <div class="row config-container" id="rt-evaluator-config-root">
                            {% for evaluator_name, info in evaluator_config["real-time"].items() %}
                                {% if info["evaluation_format"] == "float" %}
                                    {{ m_config_evaluator_card.tentacle_evaluator_card(evaluator_startup_config, evaluator_name, info, "evaluator_config") }}
                                {% endif %}
                            {% endfor %}
                        </div>
                    </div>
                {% endif %}
            </div>
            <div class="card-footer" id='saveConfigFooter'>
                <button class="btn btn-outline-success waves-effect" id='saveActivationConfig' update-url="{{ url_for('advanced.evaluator_config' if tentacle_type == "strategy" else 'config') }}">Save activation and restart later</button>
            </div>
        </div>
        <br>
    {% endif %}
    <div class="card" id="backtestingInputPart">
        <div class="card-header" id="backtestingPage" update-url="{{ url_for('backtesting', update_type='backtesting_status') }}">
            <h1>Test configuration
                {% if tentacle_desc["activation"] %}
                    <span class="badge badge-primary text-center waves-effect">Ready to test</span>
                {% else %}
                    <a id="reloadBacktestingPart">
                        <span class="badge badge-warning text-center waves-effect">Activation required <i class="fas fa-sync-alt"></i></span>
                    </a>
                {% endif %}
                <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">
            <div class="row">
                {% if activated_trading_mode.is_backtestable() %}
                    <div class="col-6">
                       <select class="selectpicker w-100" data-live-search="true" data-width="auto" data-window-padding="25" id="dataFileSelect"
                               {{ "disabled" if not tentacle_desc["activation"] }}>
                        {% for file, description in data_files.items() %}
                         <option value={{file}}
                            {% if loop.first %}
                                selected="selected"
                            {% endif %}>
                           {{file}} : {{description.candles}}
                         </option>
                         {% endfor %}
                       </select>
                    </div>
                    <div class="col-2">
                        {% if tentacle_desc["activation"] %}
                            <button type="button" id="startBacktesting" class="btn btn-primary waves-effect"
                                    start-url="{{ url_for('backtesting', action_type='start_backtesting', source='config_tentacle', reset_tentacle_config=True) }}">
                                Start backtesting
                            </button>
                        {% else %}
                            <a href="{{ url_for('config') if tentacle_type in ["trading mode", "strategy"] else url_for('advanced.evaluator_config') }}"
                                role="button" id="startBacktesting" class="btn btn-outline-primary waves-effect">
                                Activate this {{ tentacle_type }} to test it
                            </a>
                        {% endif %}
                    </div>
                {% else %}
                    <div class="col-8 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 class="col-2 offset-md-2">
                    <a href="{{ url_for('data_collector', from=url_for(request.endpoint, name=name)) }}" class="btn btn-outline-info waves-effect"> <i class="fa fa-cloud-download-alt"></i> Get historical data</a>
                </div>
            </div>

            <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>
        </div>
    </div>

    <span  id="backtestingReport" update-url="{{ url_for('backtesting', update_type='backtesting_report', source='config_tentacle') }}" 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>
{% else %}
    <div class="card">
        <div class="card-header">
            <h1>{{ name }}</h1>
        </div>
        <div class="card-body">
          Can't find any tentacle named {{ name }}
        </div>
    </div>
{% endif %}
{% 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/config_tentacle.js') }}"></script>
{% endblock additional_scripts %}