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

{% extends "base.html" %}

{% block content %}

  <h1 class="mt-4">Process Pending Card</h1>

  <div class='container'>

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

      <!-- col-10 -->
      <div class=$col-12'>

        <!-- two column row-->
        <div class='row'>

          <!-- left column -->
          <div class='col-6'>

            <div class='row rowpop'>
              <div class='col-12'><h3> Process Pending Card</h3></div>
            </div>


            <div class='row rowpop row-shade'>
              <div class='col-4'> Queue Id </div>
              <div class='col-8'> ...  </div>
            </div>

            <div class='row rowpop'>
              <div class='col-4'> MagStripe </div>
              <div class='col-8'> <input 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-3'>
                <input type='text' class='form-control form-control-sm' placeholder=''>
              </div>

              <div class='col-5'>
                <input type='text' class='form-control form-control-sm' placeholder=''>
              </div>

            </div>

            <div class='row rowpop'>
              <div class='col-4'> User Name </div>
              <div class='col-8'> ...  </div>
            </div>

            <div class='row rowpop row-shade'>
              <div class='col-4'> First Name </div>
              <div class='col-8'> ...  </div>
            </div>

            <div class='row rowpop'>
              <div class='col-4'> Last Name </div>
              <div class='col-8'> ...  </div>
            </div>

            <div class='row rowpop row-shade'>
              <div class='col-4'> E-Mail </div>
              <div class='col-8'> ...  </div>
            </div>

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

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

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

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

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

            <div class='row rowpop row-shade'>
              <div class='col-4'> Shipping Name </div>
              <div class='col-8'> ...  </div>
            </div>

            <div class='row rowpop'>
              <div class='col-4'> Shipping Address </div>
              <div class='col-8'> ...  </div>
            </div>

            <div class='row rowpop row-shade'>
              <div class='col-4'> Shipping City </div>
              <div class='col-8'> ...  </div>
            </div>

            <div class='row rowpop'>
              <div class='col-4'> Shipping State </div>
              <div class='col-8'> ...  </div>
            </div>

            <div class='row rowpop row-shade'>
              <div class='col-4'> Shipping ZIP </div>
              <div class='col-8'> ...  </div>
            </div>

            <div class='row rowpop'>
              <div class='col-4'> Group </div>
              <div class='col-8'>
                <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>

          </div>

<!--
          <div class='col-1'></div>
-->

          <!-- right column -->
          <div class='col-6'>

            <div class='row rowpop'>
              <div class='col-12'><h3> Passes on Card </h3></div>
            </div>

            <div class='row rowpop row-shade'>
              <div class='col-2'>Type</div>
              <div class='col-1'>Rem.</div>
              <div class='col-3'>Exp.</div>
              <div class='col-3'>Issued</div>
              <div class='col-3'>Last Used</div>
            </div>

            <div class='row rowpop'>
              <div class='col-2'>NRide</div>
              <div class='col-1'>2</div>
              <div class='col-3'> - </div>
              <div class='col-3'>2020-01-03</div>
              <div class='col-3'>2020-02-05</div>
            </div>

            <div class='row rowpop row-shade'>
              <div class='col-2'>NDay</div>
              <div class='col-1'>2</div>
              <div class='col-3'> - </div>
              <div class='col-3'>2020-01-03</div>
              <div class='col-3'> - </div>
            </div>

          </div>

        <!-- two column row end -->
        </div>

        <br>
        <br>

        <!-- pending card requests -->
        <div class='row'>
          <div class='col-12'> <h3> Pending Card Requests</h3> </div>
        </div>

        <div class='row rowpop row-shade'>
          <div class='col-2'> </div>
          <div class='col-2'> 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-2'>
            <button type='button' class='btn btn-secondary btn-sm'>Load</button>
          </div>
          <div class='col-2'> 1234 </div>
          <div class='col-4'> 12300000000000001 </div>
          <div class='col-2'> 35 </div>
          <div class='col-2'> 60535 </div>
        </div>


        <div class='row rowpop row-shade'>
          <div class='col-2'>
            <button type='button' class='btn btn-secondary btn-sm'>Load</button>
          </div>
          <div class='col-2'> 1234 </div>
          <div class='col-4'> 12300000000000001 </div>
          <div class='col-2'> 35 </div>
          <div class='col-2'> 60535 </div>
        </div>


        <br>
        <br>


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

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

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

{% endblock %}