{% extends "base.html" %}

{% block content %}

  <div class='row'>
    <div class='col-6'>
      <h1 class="mt-4">Manage User</h1>
    </div>

    <div>
      <h2 class='mt-4' id='ui.manage_user.message'>...</h2>
    </div>
  </div>

  <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='ui.manage_user.userid' type='text' class='form-control form-control-sm' placeholder=''> </div>
              <div class='col-2'> <button id='ui.manage_user.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='ui.manage_user.username' type='text' class='form-control form-control-sm' placeholder=''> </div>
              <div class='col-2'> <button id='ui.manage_user.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='ui.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='ui.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='ui.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='ui.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='ui.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='ui.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='ui.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='ui.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='ui.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='ui.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='ui.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='ui.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='ui.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='ui.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='ui.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'>
                    {% for g in groups %}
                    <option id='{{ g.group_id }}'>{{ g.group_name }}</option>
                    {% endfor %}
                  </select>
                </div>
              </div>
              <div class='col-2'> </div>
            </div>
            -->

            <div class='row rowpop'>

              <div class='col-4'>
                <button type='button' class='btn btn-secondary btn-sm' id='ui.manage_user.update_user'>Update User</button>
              </div>
              <div class='col-8'></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' id='ui.manage_user.reset_password'>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' style='height:10vh;'>
              <div class='col-6'> <h3> Add Card to User </h3> </div>
              <div class='col-6'> <small>Fill out only one field to associate <br> a card to a user</small></div>
            </div>

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


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

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

            <!--
            <div class='row rowpop row'>
              <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='ui.manage_user.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='ui.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 %}