{% extends "base.html" %}

{% block content %}

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

  <div class='container'>


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

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

        <!-- row to contain both the card area and the user info area -->
        <div class='row'>

          <!-- half of the row is devoted to card specific operations -->
          <div class='col-10'>

            <div class='row row-shade rowpop'>
              <div class='col-4'> User Id </div>
              <div class='col-6'> <input id='manage_user:userid' type='text' class='form-control form-control-sm' placeholder=''> </div>
              <div class='col-2'> <button id='manage_user:button_lookup_userid' type='button' class='btn btn-secondary btn-sm'>Lookup</button> </div>
            </div>

            <div class='row rowpop'>
              <div class='col-4'> User Name </div>
              <div class='col-6'> <input id='manage_user:username' type='text' class='form-control form-control-sm' placeholder=''> </div>
              <div class='col-2'> <button id='manage_user:button_lookup_username' type='button' class='btn btn-secondary btn-sm'>Lookup</button> </div>
            </div>

            <div class='row rowpop row-shade'>
              <div class='col-4'> First Name </div>
              <div class='col-6'> <input id='manage_user:first_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'> Last Name </div>
              <div class='col-6'> <input id='manage_user:last_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'> E-Mail </div>
              <div class='col-6'> <input id='manage_user:email' type='text' class='form-control form-control-sm' placeholder=''> </div>
              <div class='col-2'> </div>
            </div>

            <div class='row rowpop'>
              <div class='col-4'> Phone </div>
              <div class='col-6'> <input id='manage_user:phone' 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'> Address </div>
              <div class='col-6'> <input id='manage_user: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'> City </div>
              <div class='col-6'> <input id='manage_user: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'> State </div>
              <div class='col-6'> <input id='manage_user: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'> ZIP </div>
              <div class='col-6'> <input id='manage_user: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'> Shipping Name </div>
              <div class='col-6'> <input id='manage_user:shipping_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 Address </div>
              <div class='col-6'> <input id='manage_user:shipping_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'> Shipping City </div>
              <div class='col-6'> <input id='manage_user:shipping_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'> Shipping State </div>
              <div class='col-6'> <input id='manage_user:shipping_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'> Country Code </div>
              <div class='col-6'> <input id='manage_user:shipping_country_code' type='text' class='form-control form-control-sm' placeholder=''> </div>
              <div class='col-2'> </div>
            </div>

            <div class='row rowpop'>
              <div class='col-4'> Country Name</div>
              <div class='col-6'> <input id='manage_user:shipping_country_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 ZIP </div>
              <div class='col-6'> <input id='manage_user:shipping_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'> Group </div>
              <div class='col-6'>
                <div class='input-group input-group-sm mb-3'>
                  <select class='custom-select'>
                    <option>Org A</option>
                    <option>Org B</option>
                    <option>Org C</option>
                  </select>
                </div>
              </div>
              <div class='col-2'> </div>
            </div>

          </div>

          <div class='col-6'>
          </div>

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

        <br>
        <br>

        <!-- password reset block -->

        <div class='row'>
          <div class='col-8'>

            <div class='row rowpop'>
              <div class='col-12'> <h3> Password Reset </h3> </div>
            </div>

            <div class='row rowpop row-shade'>
              <div class='col-4'> New Password </div>
              <div class='col-6'> <input type='text' class='form-control form-control-sm' placeholder=''> </div>
            </div>

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

            <div class='row rowpop'>

              <div class='col-4'>
                <button type='button' class='btn btn-secondary btn-sm'>Reset Password</button>
              </div>
              <div class='col-8'></div>

            </div>

          </div>

          <div class='col-4'></div>
        </div>


        <br>
        <br>

        <!-- add card to user block -->
        <div class='row'>
          <div class='col-8'>

            <div class='row rowpop'>
              <div class='col-6'> <h3> Add Card to User </h3> </div>
              <div class='col-6'></div>
            </div>

            <div class='row rowpop row-shade'>
              <div class='col-4'> Mag Stripe </div>
              <div class='col-6'> <input id='manage_user:mag_token' type='text' class='form-control form-control-sm' placeholder=''> </div>
            </div>

            <div class='row rowpop'>
              <div class='col-4'> RFID </div>
              <div class='col-6'> <input id='manage_user:rfid_token' type='text' class='form-control form-control-sm' placeholder=''> </div>
            </div>

            <div class='row rowpop row-shade'>
              <div class='col-4'> CardId </div>
              <div class='col-6'> <input id='manage_user:logical_card_id' type='text' class='form-control form-control-sm' placeholder=''> </div>
            </div>

            <div class='row rowpop'>
              <div class='col-4'> Group </div>
              <div class='col-6'> <input id='manage_user:group_id' type='text' class='form-control form-control-sm' placeholder=''> </div>
            </div>

            <div class='row rowpop'>
              <div class='col-4'>
                <button id='manage_user:button_associate_card' type='button' class='btn btn-secondary btn-sm'>Associate Card to User</button>
              </div>
              <div class='col-8'></div>
            </div>

          </div>

          <div class='col-4'></div>

        </div>

        <br>
        <br>

        <!-- user managed cards block -->
        <div class='row'>
          <div id='manage_user:list_cards' class='col-10'>

            <div class='row rowpop'>
              <div class='col-6'> <h3> User Owned Cards </h3> </div>
              <div class='col-6'></div>
            </div>

            <div class='row rowpop row-shade'>
              <div class='col-4'> Card Id </div>
              <div class='col-4'> Mag Stripe</div>
              <div class='col-2'> RF Site </div>
              <div class='col-2'> RFID </div>
            </div>

            <div class='row rowpop'>
              <div class='col-4'> 1234 </div>
              <div class='col-4'> 12300000000000001 </div>
              <div class='col-2'> 35 </div>
              <div class='col-2'> 60535 </div>
            </div>

          </div>

          <div class='col-4'></div>

        </div>

        <br>
        <br>


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

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

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

{% endblock %}