{% 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 transactions|length < 1 %}
    <div><span style="font-size: 2rem;">No recent transactions</span></div>
    {% else %}
    <div><span style="font-size: 2rem;">Recent transactions</span></div> <!-- Title: recent orders -->
    <div style="height: 400px; overflow-y: scroll;"> <!-- Collection of recent orders-->
      <ul class="collection">
        {% for t in transactions %}
        <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;">{{ t.side_display }} {{ t.size }} shares of {{ t.security_symbol }}</span>
              <span style="font-size: 1.5rem;">at ${{ "%.2f"|format(t.price) }}</span>
            </div>
            <div style="flex: 0 1 auto; justify-self: flex-end; display: flex; flex-direction: column;">
              <span style="font-size: 1rem; color: grey">Transaction time</span>
              <span style="font-size: 1rem; color: grey">{{ t.dttm_display }} UTC</span>
            </div>
          </div>
        </li>
        {% endfor %}
      </ul>
    </div>
    {% endif %}
  </div>
</div>
{% endblock content %}