Popufare-Admin-Web-UI/main/app/templates/manage_user.html

{% extends "base.html" %}

{% block content %}

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

  <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-6'>

            <div class='row row-shade'>
              <div class='col-4'> User Id </div>
              <div class='col-6'> ...  </div>
              <div class='col-2'> Lookup </div>
            </div>

            <div class='row'>
              <div class='col-4'> User Name </div>
              <div class='col-6'> ...  </div>
              <div class='col-2'> Lookup </div>
            </div>

            <div class='row row-shade'>
              <div class='col-4'> First Name </div>
              <div class='col-6'> ...  </div>
              <div class='col-2'> </div>
            </div>

            <div class='row'>
              <div class='col-4'> Last Name </div>
              <div class='col-6'> ...  </div>
              <div class='col-2'> </div>
            </div>

            <div class='row row-shade'>
              <div class='col-4'> E-Mail </div>
              <div class='col-6'> ...  </div>
              <div class='col-2'> </div>
            </div>

            <div class='row'>
              <div class='col-4'> Phone </div>
              <div class='col-6'> ...  </div>
              <div class='col-2'> </div>
            </div>

            <div class='row row-shade'>
              <div class='col-4'> Address </div>
              <div class='col-6'> ...  </div>
              <div class='col-2'> </div>
            </div>

            <div class='row'>
              <div class='col-4'> City </div>
              <div class='col-6'> ...  </div>
              <div class='col-2'> </div>
            </div>

            <div class='row row-shade'>
              <div class='col-4'> State </div>
              <div class='col-6'> ...  </div>
              <div class='col-2'> </div>
            </div>

            <div class='row'>
              <div class='col-4'> ZIP </div>
              <div class='col-6'> ...  </div>
              <div class='col-2'> </div>
            </div>

            <div class='row row-shade'>
              <div class='col-4'> Shipping Name </div>
              <div class='col-6'> ...  </div>
              <div class='col-2'> </div>
            </div>

            <div class='row'>
              <div class='col-4'> Shipping Address </div>
              <div class='col-6'> ...  </div>
              <div class='col-2'> </div>
            </div>

            <div class='row row-shade'>
              <div class='col-4'> Shipping City </div>
              <div class='col-6'> ...  </div>
              <div class='col-2'> </div>
            </div>

            <div class='row'>
              <div class='col-4'> Shipping State </div>
              <div class='col-6'> ...  </div>
              <div class='col-2'> </div>
            </div>

            <div class='row row-shade'>
              <div class='col-4'> Shipping ZIP </div>
              <div class='col-6'> ...  </div>
              <div class='col-2'> </div>
            </div>

            <div class='row'>
              <div class='col-4'> Group </div>
              <div class='col-6'> ...  </div>
              <div class='col-2'> </div>
            </div>

          </div>

          <div class='col-6'>

            <div class='row row-shade'>
              <div class='col-4'> User Name </div>
              <div class='col-6'> ...  </div>
              <div class='col-2'> </div>
            </div>

            <div class='row '>
              <div class='col-4'> First Name </div>
              <div class='col-6'> ...  </div>
              <div class='col-2'> </div>
            </div>

            <div class='row row-shade'>
              <div class='col-4'> Last Name </div>
              <div class='col-6'> ...  </div>
              <div class='col-2'> </div>
            </div>

            <div class='row '>
              <div class='col-4'> E-Mail </div>
              <div class='col-6'> ...  </div>
              <div class='col-2'> </div>
            </div>

            <div class='row row-shade'>
              <div class='col-4'> Phone </div>
              <div class='col-6'> ...  </div>
              <div class='col-2'> </div>
            </div>

            <div class='row '>
              <div class='col-4'> Address </div>
              <div class='col-6'> ...  </div>
              <div class='col-2'> </div>
            </div>

            <div class='row row-shade'>
              <div class='col-4'> City </div>
              <div class='col-6'> ...  </div>
              <div class='col-2'> </div>
            </div>

            <div class='row '>
              <div class='col-4'> State </div>
              <div class='col-6'> ...  </div>
              <div class='col-2'> </div>
            </div>

            <div class='row row-shade'>
              <div class='col-4'> ZIP </div>
              <div class='col-6'> ...  </div>
              <div class='col-2'> </div>
            </div>

            <div class='row '>
              <div class='col-4'> Shipping Name </div>
              <div class='col-6'> ...  </div>
              <div class='col-2'> </div>
            </div>

            <div class='row row-shade'>
              <div class='col-4'> Shipping Address </div>
              <div class='col-6'> ...  </div>
              <div class='col-2'> </div>
            </div>

            <div class='row '>
              <div class='col-4'> Shipping City </div>
              <div class='col-6'> ...  </div>
              <div class='col-2'> </div>
            </div>

            <div class='row row-shade'>
              <div class='col-4'> Shipping State </div>
              <div class='col-6'> ...  </div>
              <div class='col-2'> </div>
            </div>

            <div class='row '>
              <div class='col-4'> Shipping ZIP </div>
              <div class='col-6'> ...  </div>
              <div class='col-2'> </div>
            </div>

            <div class='row row-shade'>
              <div class='col-4'> Password </div>
              <div class='col-6'> ...  </div>
              <div class='col-2'> </div>
            </div>

            <div class='row '>
              <div class='col-4'> Confirm Password </div>
              <div class='col-6'> ...  </div>
              <div class='col-2'> </div>
            </div>

            <div class='row'>
              <div class='col-4'> Group </div>
              <div class='col-6'> ...  </div>
              <div class='col-2'> </div>
            </div>

          </div>

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

        <br>
        <br>

        <!-- password reset block -->

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

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

            <div class='row row-shade'>
              <div class='col-4'> New Password </div>
              <div class='col-8'> ... </div>
            </div>

            <div class='row'>
              <div class='col-4'> Confirm Password </div>
              <div class='col-8'> ... </div>
            </div>

            <div class='row'>

              <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'>
              <div class='col-6'> <h3> Add Card to User </h3> </div>
              <div class='col-6'></div>
            </div>

            <div class='row row-shade'>
              <div class='col-4'> Mag Stripe </div>
              <div class='col-8'> ... </div>
            </div>

            <div class='row'>
              <div class='col-4'> RFID </div>
              <div class='col-8'> ... </div>
            </div>

            <div class='row row-shade'>
              <div class='col-4'> CardId </div>
              <div class='col-8'> ... </div>
            </div>

            <div class='row'>
              <div class='col-4'> Group </div>
              <div class='col-8'> ... </div>
            </div>

            <div class='row'>
              <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>

        <!-- user managed cards block -->
        <div class='row'>
          <div class='col-10'>

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

            <div class='row 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'>
              <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 %}