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

{% macro extract_orders(order_list, sim_or_real) -%}
    {% for order in order_list %}
        {{ m_tables.order_tr(order, convert_type(order.get_order_type()), convert_timestamp(order.get_creation_time()), sim_or_real) }}
    {% endfor %}
{%- endmacro %}

{% block body %}
<br>
<div class="card">
    <div class="card-header"><h1>Market status</h1></div>
    <div class="card-body">
        <br>
        <div class="card-deck">
            {% for pair, status in pairs_with_status.items() %}
                {{ m_cards.pair_status_card(pair, status, watched_symbols) }}
            {% endfor %}

            <!-- Add new pair Card -->
            <div class="card mb-4 small-size unique-color-dark">

                <!--Title-->
                <div class="card-header unique-color-dark">
                    <a class="text-white" href="{{ url_for('config')+'#panelCurrency' }}">New trading pair</a>
                </div>

                <!--Card image-->
                <div class="view overlay animated img-fluid text-center unique-color-dark h-100">
                  <a href="{{ url_for('config')+'#panelCurrency' }}">
                    <i class="fas fa-8x fa-plus-circle fa-3x"></i>
                  </a>
                </div>


                <!--Card content-->
                <div class="card-footer unique-color-dark">
                    <a class="text-white" href="{{ url_for('config')+'#panelCurrency' }}"> Add a new pair</a>
                </div>

            </div>
        </div>
    </div>
</div>
<br>
<div class="card">
    <div class="card-header">
        <h1>Open orders
            <button type="button" class="btn btn-outline-danger waves-effect float-right" id="cancel_all_orders" update-url="{{ url_for('api.orders', action='cancel_orders') }}"
                    {{ "disabled" if not(real_open_orders or simulated_open_orders) }}>
                <i id="cancel_all_icon" class="fas fa-ban"></i> Cancel all
            </button>
        </h1>
    </div>
    <div class="card-body">
        <div class='progress mb-1' id='cancel_progress_bar' style='display: none;'>
            <div 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 id="openOrderTable">
          <table id="open_orders_datatable" class="table table-striped table-bordered table-hover">
            <caption>List of open orders</caption>
          <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">Date</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-center" scope="col">Cancel</th>
            </tr>
          </thead>
          <tbody>
            {{ extract_orders(real_open_orders, "Real") }}
            {{ extract_orders(simulated_open_orders, "Simulated") }}
          </tbody>
          </table>
        </div>
    </div>
</div>

<div class="card-footer text-center">
    <a href="{{ url_for('trades') }}" class="btn btn-outline-info btn-lg waves-effect"><i class="fa fa-tasks"></i> Trades history</a>
</div>

<div class="modal" id="CancelAllOrdersModal" tabindex="-1" role="dialog" aria-labelledby="#CancelAllOrdersModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content modal-text">
      <div class="modal-header primary-text">
        <h5 class="modal-title" id="#CancelAllOrdersModalLabel">Confirm action</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body text-center">
          <h4>Cancel all <strong id="ordersCount"></strong> displayed orders ?</h4>
      </div>
      <div class="modal-footer">
        <button type="button" id="confirmCancelAllOrders" class="btn btn-danger" data-dismiss="modal"><i class="fas fa-ban"></i> Cancel orders</button>
        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<div class="modal" id="CancelOrderModal" tabindex="-1" role="dialog" aria-labelledby="#CancelOrderModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content modal-text">
      <div class="modal-header primary-text">
        <h5 class="modal-title" id="#CancelOrderModalLabel">Confirm action</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body text-center">
          <h4>Cancel order ?</h4>
      </div>
      <div class="modal-footer">
        <button type="button" id="confirmCancelOrder" class="btn btn-danger"><i class="fas fa-ban"></i> Cancel order</button>
        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

{% endblock %}

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