{% extends "layout.html" %}
{% set active_page = "config" %}
{% import 'components/config/exchange_card.html' as m_config_exchange_card %}
{% import 'components/config/service_card.html' as m_config_service_card %}
{% import 'components/config/currency_card.html' as m_config_currency_card %}
{% import 'components/config/trader_card.html' as m_config_trader_card %}
{% import 'components/config/evaluator_card.html' as m_config_evaluator_card %}
{% import 'components/config/notification_config.html' as m_config_notification %}

{% set config_default_value = "Bitcoin" %}
{% set config_default_symbol = "btc" %}
{% set added_class = "new_element" %}


{% block additional_style %}
    <link rel="stylesheet" href="{{ url_for('static', filename='css/components/configuration.css') }}">
{% endblock additional_style %}

{% block body %}
<div id="nav-config" class="animated slideInDown sticky-top">
    <nav class="navbar nav-tabs navbar-dark primary-color-dark" data-toggle="affix">
        <!-- Nav tabs -->
         <ul class="nav mr-auto md-pills nav-justified">

            <li class="nav-item">
                <a class="nav-link active waves-effect" data-toggle="tab" href="#panelEvaluators" role="tab">Strategies</a>
            </li>
            <li class="nav-item">
                <a class="nav-link waves-effect" data-toggle="tab" href="#panelExchanges" role="tab">Exchanges</a>
            </li>
            <li class="nav-item">
                <a class="nav-link waves-effect" data-toggle="tab" href="#panelTrading" role="tab">Trading</a>
            </li>
            <li class="nav-item">
                <a class="nav-link waves-effect" data-toggle="tab" href="#panelNotifications" role="tab">Notifications</a>
            </li>
             <li class="nav-item">
                <a class="nav-link waves-effect" data-toggle="tab" href="#panelServices" role="tab">Interfaces</a>
            </li>
             <li class="nav-item">
                <a class="nav-link waves-effect" data-toggle="tab" href="#panelCurrency" role="tab">Currencies</a>
            </li>
        </ul>
    </nav>

    <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('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>
<!-- Tab panels -->
<div class="tab-content" id="super-container">

    <!--Panel Evaluators-->
    <div class="tab-pane fade in show active config-root" id="panelEvaluators" role="tabpanel"><br>
        <div class="card">
            <div class="card-header">
                <h2>Trading modes
                    <a class="float-right text-danger" target="_blank" rel="noopener noreferrer" href="https://github.com/Drakkar-Software/OctoBot/wiki/Customize-your-OctoBot">
                        <i class="fa fa-question"></i>
                    </a>
                </h2>
            </div>
            <div class="card-body">
                <div class="row config-container" id="trading-modes-config-root">
                    {% for trading_mode_name, info in strategy_config["trading-modes"].items() %}
                        {{ m_config_evaluator_card.config_evaluator_card(trading_startup_config, trading_mode_name, info, "trading_config") }}
                    {% endfor %}
                </div>
            </div>
        </div>
        <br>
        <div class="card">
            <div class="card-header"><h2>Compatible evaluation strategies</h2></div>
            <div class="card-body">
                <div class="row config-container" id="evaluator-config-root">
                    {% for evaluator_name, info in strategy_config["strategies"].items() %}
                        {{ m_config_evaluator_card.config_evaluator_card(evaluator_startup_config, evaluator_name, info, "evaluator_config", strategy=True) }}
                    {% endfor %}
                </div>
            </div>
            <div class="card-footer">
                <p class="mb-0">Strategy customization on <a class="btn btn-outline-white btn-md waves-effect" href="{{ url_for('advanced.evaluator_config') }}">OctoBot advanced configuration interface</a></p>
            </div>
        </div>
    </div>

    <!--Panel Exchanges-->
    <div class="tab-pane fade config-root" id="panelExchanges" role="tabpanel"><br>
        <div class="card">
            <div class="card-header">
                <h2>Exchanges
                    <a class="float-right text-danger" target="_blank" rel="noopener noreferrer" href="https://github.com/Drakkar-Software/OctoBot/wiki/Exchanges#exchanges">
                        <i class="fa fa-question"></i>
                    </a>
                </h2>
            </div>
            <div class="card-body deck-container">
                <div class="card">
                    <div class="card-body">Add a new exchange :
                        <select id="AddExchangeSelect" class="selectpicker" data-live-search="true">
                            <optgroup label="OctoBot fully tested">
                               {% for exchange in ccxt_tested_exchanges %}
                                    <option data-tokens="{{ exchange }}">{{ exchange }}</option>
                               {% endfor %}
                            </optgroup>
                            <optgroup label="OctoBot tested with simulated trading">
                               {% for exchange in ccxt_simulated_tested_exchanges %}
                                    <option data-tokens="{{ exchange }}">{{ exchange }}</option>
                               {% endfor %}
                            </optgroup>
                            <optgroup label="OctoBot untested">
                               {% for exchange in ccxt_other_exchanges %}
                                    <option data-tokens="{{ exchange }}">{{ exchange }}</option>
                               {% endfor %}
                            </optgroup>
                        </select>
                        <button type="button" id="AddExchange" class="btn btn-primary add-btn px-3 waves-effect"><i class="fa fa-plus pr-2" aria-hidden="true"></i> Add</button>
                    </div>
                </div>
                <br>
                <!-- Card deck -->
                <div class="card-deck config-container">
                    {% for exchange in config_exchanges %}
                        {{ m_config_exchange_card.config_exchange_card(config_exchanges, exchange) }}
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>

    <!--Panel Trading-->
    <div class="tab-pane fade config-root" id="panelTrading" role="tabpanel"><br>
        <div class="card">
            <div class="card-header">
                <h2>
                    Trading
                    <span class="float-right badge {{ 'badge-dark' if real_trader_activated else 'badge-primary' }} waves-effect">
                        {{ 'Real trader currently activated' if real_trader_activated else 'Trader simulator currently activated' }}
                    </span>
                </h2>
            </div>
            <div class="card-body deck-container">
                 <!-- Card deck -->
                <div class="card-deck config-container">
                    <span class="col-lg-12">
                        {{ m_config_trader_card.config_trader_card(config_trading, "trading", "Trading settings", link="https://github.com/Drakkar-Software/OctoBot/wiki/Trader#trading-settings",
                        action=(("Reset trading history", url_for("config_actions", action="reset_trading_history"))) if is_trading_persistence_activated else None) }}
                    </span>
                    {{ m_config_trader_card.config_trader_card(config_trader, "trader", "Trader", link="https://github.com/Drakkar-Software/OctoBot/wiki/Trader#trader") }}
                    {{ m_config_trader_card.config_trader_card(config_trader_simulator, "trader-simulator", "Trader simulator", link="https://github.com/Drakkar-Software/OctoBot/wiki/Simulator#simulator") }}
                </div>
            </div>
        </div>
    </div>

    <!--Panel Notifications-->
    <div class="tab-pane fade config-root" id="panelNotifications" role="tabpanel"><br>
        <div class="card">
            <div class="card-header">
                <h2>
                    Notifications
                    <a class="float-right text-danger" target="_blank" rel="noopener noreferrer" href="https://github.com/Drakkar-Software/OctoBot/wiki/Notifications#notifications">
                        <i class="fa fa-question"></i>
                    </a>
                </h2>
            </div>
            <div class="card-body deck-container">
                <!-- Card deck -->
                <div class="card-deck config-container">
                    {{ m_config_notification.config_notification(config_notifications, "notification", service_name_list) }}
                </div>
            </div>
        </div>
    </div>

    <!--Panel Services-->
    <div class="tab-pane fade config-root" id="panelServices" role="tabpanel"><br>
        <div class="card">
            <div class="card-header"><h2>Interfaces</h2></div>
            <div class="card-body deck-container">
                <div class="card">
                    <div class="card-body">Add a new interface :
                    <select id="AddServiceSelect" class="selectpicker" data-live-search="true">
                       {% for service in services_list | sort() %}
                            <option data-tokens="{{ service }}">{{ service }}</option>
                       {% endfor %}
                    </select>
                    <button type="button" id="AddService" class="btn btn-primary add-btn px-3 waves-effect"><i class="fa fa-plus pr-2" aria-hidden="true"></i> Add</button>
                    </div>
                </div>
                <br>
                <!-- Card deck -->
                <div class="card-deck config-container" update-url="{{ url_for('config') }}">
                    {% for service in services_list %}
                        {% if service in config_services %}
                            {{ m_config_service_card.config_service_card(config_services, service, services_list[service]) }}
                        {% endif %}
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>

    <!--Panel Currencies-->
    <div class="tab-pane fade config-root" id="panelCurrency" role="tabpanel"><br>
        <div class="card">
            <div class="card-header"><h2>Currencies</h2></div>
            <div class="card-body deck-container">
                {%  if in_backtesting %}
                <div class="alert alert-warning" role="alert">
                    OctoBot is currently running in backtesting analysis, information in this section may not be accurate and changes won't be saved.
                </div>
                {%  endif %}
                <div class="card">
                    <div class="card-body">
                        Add a new currency :
                        <select id="AddCurrencySelect" class="selectpicker" data-live-search="true" reference_market="{{ config_reference_market }}">
                           {% for currency in full_symbol_list | sort() %}
                                {% if currency not in config_symbols %}
                                    <option data-tokens="{{ currency }}" symbol="{{ full_symbol_list[currency] }}">{{ currency }}</option>
                                {% endif %}
                           {% endfor %}
                        </select>
                        <button type="button" id="AddCurrency" class="btn btn-primary add-btn px-3 waves-effect"><i class="fa fa-plus pr-2" aria-hidden="true"></i> Add</button>
                    </div>
                </div>
                <br>
                {%  if not symbol_list %}
                    <div class="alert alert-danger" role="alert">Can't find any symbol suggestion because no exchange were configured.</div>
                    <br>
                {% endif %}
                <!-- Card deck -->
                <div class="card-deck config-container" update-url="{{ url_for('config') }}">
                    {% for crypto_currency in config_symbols %}
                       {{ m_config_currency_card.config_currency_card(config_symbols, crypto_currency, symbol_list, full_symbol_list, symbol=config_symbols[crypto_currency]['pairs'][0].split('/')[0].lower() if config_symbols[crypto_currency]['pairs']) }}
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Default cards -->
<div class="d-none">
    <!-- Exchange -->
    <div id="AddExchange-template-default">
        {{ m_config_exchange_card.config_exchange_card( config=config_exchanges,
                                                        exchange=config_default_value,
                                                        add_class=added_class,
                                                        keys_value="NO KEY") }}
    </div>

    <!-- Services -->
    <div id="AddService-template-default">
        {% for service in services_list %}
            <div id="AddService-template-default-{{service}}">
            {{ m_config_service_card.config_service_card(  config_services,
                                                           service,
                                                           services_list[service],
                                                           add_class=added_class,
                                                           no_select=True,
                                                           default_values=True ) }}
            </div>
        {% endfor %}
    </div>

    <!-- Currencies -->
    <div id="AddCurrency-template-default">
        {{ m_config_currency_card.config_currency_card( config_symbols={config_default_value: {"pairs": [] } },
                                                        crypto_currency=config_default_value,
                                                        symbol_list=symbol_list,
                                                        full_symbol_list=full_symbol_list,
                                                        add_class=added_class,
                                                        no_select=True,
                                                        additional_classes="default",
                                                        symbol= config_default_symbol ) }}
    </div>
</div>
<br>
{% endblock %}

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