{% extends "layout.html" %}
{% set active_page = "backtesting" %}
{% block body %}
<br>
<div class="card">
    <div class="card-header"><h1>
        <span class="float-left">
            <a href="{{ origin_page if origin_page else url_for("backtesting")}}">
                <i class="fas fa-arrow-left"></i>
            </a>
        </span>
        &ensp;Available backtesting data files
    </h1></div>
    <div class="card-body" id="collector_data">
        <table class="table table-striped table-bordered table-sm table-hover" id="dataFilesTable" update-url="{{ url_for('data_collector', action_type='delete_data_file') }}">
          <thead>
            <tr>
                <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>
                <th scope="col">Action</th>
            </tr>
          </thead>
          <tbody>
            {% for file, description in data_files.items() %}
                <tr class="selectable_datafile">
                    <td>{{file}}</td>
                    <td>{{description.symbol}}</td>
                    <td>{{description.date}}</td>
                    <td>{{description.exchange}}</td>
                    <td>{{description.candles}}</td>
                    <td class="text-center">
                        <a class="btn fa fa-trash-alt delete_data_file waves-effect" data-file={{file}} data-toggle="tooltip" data-placement="right" title="Delete data file"></a>
                    </td>
                </tr>
            {% endfor %}
          </tbody>
        </table>
    </div>
</div>

<br>

<div class="card">
    <div class="card-header"><h2>Download exchange data</h2></div>
    <div class="card-body">
        <div class="row">
          <div class="col">
           Exchange :
           <select class="selectpicker" data-live-search="true" data-width="auto" data-window-padding="25" id="exchangeSelect">
             {% for exchange in ccxt_exchanges %}
             <option value={{exchange}}
                {% if exchange == current_exchange %}
                    selected="selected"
                {% endif %}>
               {{exchange}}
             </option>
             {% endfor %}
           </select>
          </div>
          <div class="col">
              Symbol :
              <select class="selectpicker" data-live-search="true" data-width="auto" data-window-padding="25" id="symbolSelect" update-url="{{ url_for('data_collector', action_type='symbol_list') }}">
                 {% for symbol in full_symbol_list %}
                 <option value={{symbol}}>
                   {{symbol}}
                 </option>
                 {% endfor %}
              </select>
          </div>
          <div class="col">
            <button id="collect_data" type="button" class="btn btn-primary waves-effect" update-url="{{ url_for('data_collector', action_type='start_collector') }}">Collect new data</button>
          </div>
        </div>
    </div>
    <div class='progress' id='collector_operation' style='display: none;'>
      <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>
</div>

<br>

<div class="card">
    <div class="card-header"><h2>Import from data file</h2></div>
    <div class="card-body">
        <form id="importForm" action = "{{ url_for('data_collector', action_type='import_data_file') }}" method = "POST"
         enctype = "multipart/form-data">
            <div class="custom-file">
                <input type="file" class="custom-file-input" id="inputFile" name="file" accept=".data">
                <label class="custom-file-label" for="inputFile" id="inputFileLabel">Choose data file</label>
            </div>
            <button class="btn btn-primary waves-effect" type="submit" id="importFileButton">Import data file</button>
        </form>
    </div>
</div>

<br>
{% endblock %}

{% block additional_scripts %}
<script src="{{ url_for('static', filename='js/components/data_collector.js') }}"></script>
{% if alert %}
<script>
    display_alert("{{alert["success"]}}", "{{alert["message"]}}");
</script>
{% endif %}
{% endblock additional_scripts %}
