{% extends "base.html" %}

{% block content %}

  <h1 class="mt-4">Create User</h1>

  <div class='container'>


    <!-- container row -->
    <div class='row'>

      <!-- col-10 to give a padding on the side -->
      <div class='col-10'>

            <div class='row rowpop row-shade'>
              <div class='col-4'> User Name </div>
              <div class='col-6'> <input id='create_user:username' type='text' class='form-control form-control-sm' placeholder=''> </div>
              <div class='col-2'> </div>
            </div>

            <div class='row rowpop '>
              <div class='col-4'> First Name </div>
              <div class='col-6'> <input id='create_user:first_name' type='text' class='form-control form-control-sm' placeholder=''> </div>
              <div class='col-2'> </div>
            </div>

            <div class='row rowpop row-shade'>
              <div class='col-4'> Last Name </div>
              <div class='col-6'> <input id='create_user:last_name' type='text' class='form-control form-control-sm' placeholder=''> </div>
              <div class='col-2'> </div>
            </div>

            <div class='row rowpop '>
              <div class='col-4'> E-Mail </div>
              <div class='col-6'> <input id='create_user:email' type='text' class='form-control form-control-sm' placeholder=''> </div>
              <div class='col-2'> </div>
            </div>

            <div class='row rowpop row-shade'>
              <div class='col-4'> Phone </div>
              <div class='col-6'> <input id='create_user:phone' type='text' class='form-control form-control-sm' placeholder=''> </div>
              <div class='col-2'> </div>
            </div>

            <div class='row rowpop '>
              <div class='col-4'> Address </div>
              <div class='col-6'> <input id='create_user:address' type='text' class='form-control form-control-sm' placeholder=''> </div>
              <div class='col-2'> </div>
            </div>

            <div class='row rowpop row-shade'>
              <div class='col-4'> City </div>
              <div class='col-6'> <input id='create_user:city' type='text' class='form-control form-control-sm' placeholder=''> </div>
              <div class='col-2'> </div>
            </div>

            <div class='row rowpop '>
              <div class='col-4'> State </div>
              <div class='col-6'> <input id='create_user:state' type='text' class='form-control form-control-sm' placeholder=''> </div>
              <div class='col-2'> </div>
            </div>

            <div class='row rowpop row-shade'>
              <div class='col-4'> ZIP </div>
              <div class='col-6'> <input id='create_user:zip' type='text' class='form-control form-control-sm' placeholder=''> </div>
              <div class='col-2'> </div>
            </div>

            <div class='row rowpop '>
              <div class='col-4'> Shipping Name </div>
              <div class='col-6'> <input id='create_user:shipping_name' type='text' class='form-control form-control-sm' placeholder=''> </div>
              <div class='col-2'> </div>
            </div>

            <div class='row rowpop row-shade'>
              <div class='col-4'> Shipping Address </div>
              <div class='col-6'> <input id='create_user:shipping_address' type='text' class='form-control form-control-sm' placeholder=''> </div>
              <div class='col-2'> </div>
            </div>

            <div class='row rowpop '>
              <div class='col-4'> Shipping City </div>
              <div class='col-6'> <input id='create_user:shipping_city' type='text' class='form-control form-control-sm' placeholder=''> </div>
              <div class='col-2'> </div>
            </div>

            <div class='row rowpop row-shade'>
              <div class='col-4'> Shipping State </div>
              <div class='col-6'> <input id='create_user:shipping_state' type='text' class='form-control form-control-sm' placeholder=''> </div>
              <div class='col-2'> </div>
            </div>

            <div class='row rowpop '>
              <div class='col-4'> Shipping Country Code</div>
              <div class='col-6'> <input id='create_user:shipping_country_code' type='text' class='form-control form-control-sm' placeholder=''> </div>
              <div class='col-2'> </div>
            </div>

            <div class='row rowpop row-shade'>
              <div class='col-4'> Shipping Country </div>
              <div class='col-6'> <input id='create_user:shipping_country_name' type='text' class='form-control form-control-sm' placeholder=''> </div>
              <div class='col-2'> </div>
            </div>

            <div class='row rowpop '>
              <div class='col-4'> Shipping ZIP </div>
              <div class='col-6'> <input id='create_user:shipping_zip' type='text' class='form-control form-control-sm' placeholder=''> </div>
              <div class='col-2'> </div>
            </div>

            <div class='row rowpop row-shade'>
              <div class='col-4'> Password </div>
              <div class='col-6'> <input id='create_user:password' type='text' class='form-control form-control-sm' placeholder=''> </div>
              <div class='col-2'> </div>
            </div>

            <div class='row rowpop '>
              <div class='col-4'> Confirm Password </div>
              <div class='col-6'> <input id='create_user:password_confirm' type='text' class='form-control form-control-sm' placeholder=''> </div>
              <div class='col-2'> </div>
            </div>

            <div class='row rowpop row-shade'>
              <div class='col-4'> Group </div>
              <div class='col-6'>
                <div class='input-group input-group-sm mb-3'>
                  <select class='custom-select'>
                    {% for g in groups %}
                    <option id='{{ g.group_id }}'>{{ g.group_name }}</option>
                    {% endfor %}
                  </select>
                </div>
              </div>
              <div class='col-2'> </div>
            </div>

          </div>

        <!-- row -->
        </div>


        <br>
        <br>

        <div class='row rowpop'>
          <div class='col-4'>
            <button id='create_user:button_create' type='button' class='btn btn-secondary btn-sm'>Create New User</button>
          </div>
          <div class='col-8'></div>
        </div>

      <!-- col-10 -->
      </div>

    <!-- container row -->
    </div>

  <!-- container -->
  </div>

{% endblock %}