{% extends "layout.html" %}
{% set active_page = "trading" %}
{% import 'macros/tables.html' as m_tables %}

{% macro extract_trades(trades_list, sim_or_real) -%}
    {% for trade in trades_list %}
        {{ m_tables.trades_tr(trade, convert_type(trade.order_type),convert_timestamp(trade.filled_time), sim_or_real) }}
    {% endfor %}
{%- endmacro %}

{% block body %}
<br>
<div class="card">
    <div class="card-header"><h1>
        <span class="float-left">
            <a href="{{ url_for('trading') }}">
                <i class="fas fa-arrow-left"></i>
            </a>
        </span>
        &ensp;Trades
    </h1></div>
    <div class="card-body">
      <table id="open_trades_datatable" class="table table-striped table-bordered table-hover">
        <caption>List of trades</caption>
      <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">Exchange</th>
            <th scope="col">Pair</th>
            <th class="text-center" scope="col">Type</th>
            <th scope="col">Price</th>
            <th scope="col">Quantity</th>
            <th class="text-right" scope="col">Total</th>
            <th class="text-right" scope="col">Fee</th>
            <th class="text-right" scope="col">Execution</th>
        </tr>
      </thead>
      <tbody>
      {{ extract_trades(real_trades_history, "Real") }}
      {{ extract_trades(simulated_trades_history, "Simulated") }}
      </tbody>
      </table>
    </div>
</div>

<br>
{% endblock %}

{% block additional_scripts %}
<script>
    $(document).ready(function () {
      $('#open_trades_datatable').DataTable({
         // "ajax": "{{ url_for('api.orders') }}"
      })
    });
</script>
{% endblock additional_scripts %}