{% extends "advanced_layout.html" %}
{% import 'components/config/evaluator_card.html' as m_config_evaluator_card %}

{% block additional_style %}
<style>
    li.nav-item {
        padding-right: 5px;
    }
</style>
{% endblock additional_style %}

{% block body %}
<div id="nav-config" class="sticky-top">
    <div class="card card-header">
        <h3>
            <span class="float-left">
                <a href="{{ url_for('config') }}">
                    <i class="fas fa-arrow-left"></i>
                </a>
            </span>
            &ensp;Activated strategies: {{ ', '.join(evaluator_config["activated_strategies"]) }}
        </h3>
    </div>
    <nav class="navbar nav-tabs navbar-dark primary-color">
        <span class="white-text"> Any configuration change will be applied after OctBot restarts.</span>
        <ul class="nav mx-auto">
            <li class="nav-item">
                <a class="nav-link btn green waves-effect" id='save-config' href="#" role="tab" update-url="{{ url_for('advanced.evaluator_config') }}">Save and restart later</a>
            </li>
            <li class="nav-item">
                <a class="nav-link btn orange waves-effect" id='reset-config' href="#" role="tab">Reset all</a>
            </li>
        </ul>
        <ul class="nav ml-auto">
            <li class="nav-item">
                <button route="{{ url_for('commands', cmd='restart') }}" type="button" class="nav-link btn red waves-effect">Restart Octobot</button>
            </li>
        </ul>
    </nav>
</div>
<div id="super-container">
    <div class="config-root" id="panelEvaluators"><br>
        <div class="card">
            <div class="card-header"><h2>Technical analysis</h2></div>
            <div class="card-body">
                <div class="row config-container" id="ta-evaluator-config-root">
                    {% for evaluator_name, info in evaluator_config["ta"].items() %}
                        {{ m_config_evaluator_card.config_evaluator_card(evaluator_startup_config, evaluator_name, info, "evaluator_config") }}
                    {% endfor %}
                </div>
            </div>
        </div>
        <br>
        <div class="card">
            <div class="card-header"><h2>Social analysis</h2></div>
            <div class="card-body">
                <div class="row config-container" id="social-evaluator-config-root">
                    {% for evaluator_name, info in evaluator_config["social"].items() %}
                        {{ m_config_evaluator_card.config_evaluator_card(evaluator_startup_config, evaluator_name, info, "evaluator_config") }}
                    {% endfor %}
                </div>
            </div>
        </div>
        <br>
        <div class="card">
            <div class="card-header"><h2 style="display:inline;">Real time analysis </h2> <h4 style="display:inline;">
                <i class="fas fa-exclamation-triangle"></i> Should only be used with exchanges supporting
                <a  target="_blank" rel="noopener noreferrer" href="https://github.com/Drakkar-Software/OctoBot/wiki/Exchanges#octobot-official-supported-exchanges" >websocket connection</a></h4>
            </div>
            <div class="card-body">
                <div class="row config-container" id="rt-evaluator-config-root">
                    {% for evaluator_name, info in evaluator_config["real-time"].items() %}
                        {{ m_config_evaluator_card.config_evaluator_card(evaluator_startup_config, evaluator_name, info, "evaluator_config") }}
                    {% endfor %}
                </div>
            </div>
            <div class="card-footer">
                <p class="mb-0">Back to <a class="btn btn-outline-white btn-md waves-effect" href="{{ url_for('config') }}">OctoBot standard configuration</a></p>
            </div>
        </div>
    </div>
</div>
<br>
{% endblock %}

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