{% 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/start_company">
      {{ form.hidden_tag() }}
      <div class="card z-depth-0" style="width: 600px;">
        <div class="card-content"> <!--Form input elements-->
          <div class="card-title" style="margin-bottom: 1.5rem;"><span style="font-size: 2.5rem;">Start company</span></div>
          <div style="display: flex; align-items: center; margin-bottom: 1rem;"> <!--R1: company symbol-->
            <div style="margin: 0px 1rem 0px 0px;"><span style="font-size: 1.5rem;">Company symbol:</span></div>
            <div class="input-field" style="flex: 1 1 auto; margin-right: 1rem;">
              {{ form.company_symbol(placeholder='COMPANY') }}
              <label for="price">company symbol</label>
              {% if form.company_symbol.errors %}
                <span class="helper-text" style="color: red;">{{ form.company_symbol.errors.0 }}</span>
              {% else %}
              <span class="helper-text" style="color: #cccccc;">Between 1-10 uppercase alphanumerical characters</span>
              {% endif %}
            </div>
          </div>
          <div style="display: flex; align-items: center; margin-bottom: 1rem;"> <!--R2: company name-->
            <div style="margin: 0px 1rem 0px 0px;"><span style="font-size: 1.5rem;">Company name:</span></div>
            <div class="input-field" style="flex: 1 1 auto; margin-right: 1rem;">
              {{ form.company_name(placeholder='My company') }}
              <label for="price">company name</label>
              {% if form.company_name.errors %}
                <span class="helper-text" style="color: red;">{{ form.company_name.errors.0 }}</span>
              {% else %}
                <span class="helper-text" style="color: #cccccc;">Up to 50 characters</span>
              {% endif %}
            </div>
          </div>
          <div style="display: flex; align-items: center; margin-bottom: 1rem;"> <!--R3: initial investment-->
            <div style="margin: 0px 1rem 0px 0px;"><span style="font-size: 1.5rem;">Initial investment:</span></div>
            <div class="input-field" style="flex: 1 1 auto; margin-right: 1rem;">
              {{ form.input_cash(placeholder='$1000') }}
              <label for="price">initial investment</label>
              {% if form.input_cash.errors %}
                <span class="helper-text" style="color: red;">{{ form.input_cash.errors.0 }}</span>
              {% else %}
                <span class="helper-text" style="color: #cccccc;">Must be positive</span>
              {% endif %}
            </div>
          </div>
          <div style="display: flex; align-items: center; margin-bottom: 1rem;"> <!--R4: initial number of shares-->
            <div style="margin: 0px 1rem 0px 0px;"><span style="font-size: 1.5rem;">Number of shares:</span></div>
            <div class="input-field" style="flex: 1 1 auto; margin-right: 1rem;">
              {{ form.size(placeholder='10') }}
              <label for="price">initial share size</label>
              {% if form.size.errors %}
                <span class="helper-text" style="color: red;">{{ form.size.errors.0 }}</span>
              {% else %}
              <span class="helper-text" style="color: #cccccc;">Must be positive</span>
              {% endif %}
            </div>
          </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 %}