{% extends "exchange/base.html" %}
{% block content %}
<div style="display: flex; flex-direction: column; align-items: center; padding-top: 2rem;"> <!--This is the container for the form-->
  <div style="border: 1px solid #cccccc; border-radius: 15px; box-sizing: border-box; padding: 1rem 0rem 0rem;">
    <form method="POST" action="/exchange/submit_order">
      {{ form.hidden_tag() }}
      <div class="card z-depth-0">
        <div class="card-content"> <!--Form input elements-->
          <div class="card-title" style="margin-bottom: 1.5rem;"><span style="font-size: 2.5rem;">Place order</span></div>
          <div style="margin-bottom: 1rem; display: flex; align-items: center;"> <!-- First row: I am buying/selling -->
            <div style="margin: 0px 1rem 0px 0px;"><span style="font-size: 1.5rem;">I am</span></div>
            <div>{{ form.side(class="browser-default", style="font-size: 1.5rem; border: 1px solid #cccccc; border-radius: 10px;") }}</div>
          </div>
          <div style="display: flex; align-items: center; margin-bottom: 1rem;"> <!-- Second row: XXXX shares of XXXX stock -->
            <div class="input-field" >
              {{ form.size(placeholder="how many") }}
              <label for="size">Number of shares</label>
              {% if form.size.errors %}
                <span class="helper-text" style="color: red;">{{ form.size.errors.0 }}</span>
              {% endif %}
            </div>
            <div style="margin: 0px 1rem;"><span style="font-size: 1.5rem; padding-bottom: 0.5rem;"> shares of </span></div>
            <div class="input-field">
              {{ form.security_symbol(placeholder='TSLA cause why not') }}
              <label for="security_symbol">Choice of stock</label>
              {% if form.security_symbol.errors %}
                <span class="helper-text" style="color: red;">{{ form.security_symvol.errors.0 }}</span>
              {% endif %}
            </div>
          </div>
          <div style="display: flex; align-items: center; margin-bottom: 1rem;"> <!-- Third row: Priced at $XXX.XX or better -->
            <div style="margin: 0px 1rem 0px 0px;"><span style="font-size: 1.5rem;">priced at</span></div>
            <div class="input-field" style="flex: 1 1 auto;">
              {{ form.price(placeholder='any price available') }}
              <label for="price">Target price</label>
              {% if form.price.errors %}
                <span class="helper-text" style="color: red;">{{ form.price.errors.0 }}</span>
              {% endif %}
            </div>
          </div>
          <div style="display: flex; align-items: center; margin-bottom: 1rem;"> <!-- Fourth row: All or nothing-->
            <div>
              <label>
                {{ form.all_or_none(class="filled-in checkbox-mdc-primary") }}
                <span style="color: black;">All or none: Fulfill all of my order, or none of it</span>
              </label>
            </div>
          </div>
          <div style="display: flex; align-items: center; margin-bottom: 1rem;"> <!-- Fourth row: All or nothing-->
            <div>
              <label>
                {{ form.immediate_or_cancel(class="filled-in checkbox-mdc-primary") }}
                <span style="color: black;">Immediate or cancel: Fulfill my order as much as possible, and cancel the rest</span>
              </label>
            </div>
          </div>
          <div style="display: flex; align-items: center; margin-bottom: 1rem;">
            <span style="color: #cccccc;">Leave target price empty for market orders. <br>
              All market orders are automatically immediate-or-canel</span>
          </div>
        </div>
        <div class="card-action" style="display: flex; justify-content: flex-end;"> <!--Form submit button-->
          {{ form.submit(class="waves-effect waves-light btn") }}
        </div>
      </div>
    </form>
  </div>
</div>
{% endblock content %}