{% extends "exchange/base.html" %}
{% block content %}
<div style="display: flex; flex-direction: column; align-items: center; margin-top: 2rem;"> <!--This is the container for the view-->
  <div style="flex: 1 1 auto; border: 1px solid #cccccc; border-radius: 15px; box-sizing: border-box; padding: 2rem; width: 650px;"> <!-- Actual content -->
    {% if orders|length < 1 %}
    <div><span style="font-size: 2rem;">No recent orders</span></div>
    {% else %}
    <div><span style="font-size: 2rem;">Recent orders</span></div> <!-- Title: recent orders -->
    <div style="height: 400px; overflow-y: scroll;"> <!-- Collection of recent orders-->
      <ul class="collection">
        {% for order in orders %}
        <li class="collection-item" style="display: flex; flex-direction: column; align-items: flex-start; padding: 1rem;">
          <div style="display: flex; align-items: center; width: 100%; margin-bottom: 1rem;"> <!--Row one: Buy XXX shares of YYY-->
            <div style="flex: 1 1 auto; display: flex; flex-direction: column;">
              <span style="font-size: 1.5rem; margin-bottom: 0.5rem;">{{ order.side_display }} {{ order.size }} shares of {{ order.security_symbol }}</span>
              <span style="font-size: 1.5rem;">at {{ order.price_display }}</span>
            </div>
            <div style="flex: 0 1 auto; justify-self: flex-end; display: flex; flex-direction: column;">
              <span style="font-size: 1rem; color: grey">Submitted at</span>
              <span style="font-size: 1rem; color: grey">{{ order.create_dttm_display }} UTC</span>
            </div>
          </div>
          <div style="display: flex; align-items: center;"> <!-- Row two: tags! AON, IOC, Active, Cancelled-->
            {% if order.all_or_none %}
              <div class="chip">All-or-none</div>
            {% endif %}
            {% if order.immediate_or_cancel %}
              <div class="chip">Immediate-or-cancel</div>
            {% endif %}
            {% if order.active %}
              <div class="chip">Active</div>
            {% endif %}
            {% if order.cancelled_dttm is not none %}
              <div class="chip">Cancelled</div>
            {% endif %}
          </div>
        </li>
        {% endfor %}
      </ul>
    </div>
    {% endif %}
  </div>
</div>
{% endblock content %}