{% extends "base.html" %}

{% block content %}

  <div class='row'>
    <div class='col-6'>
      <h1 class="mt-4">Process Pending Card</h1>
    </div>

    <div class='col-6'>
      <h2 class="mt-4" id='ui.pending.message'>..</h2>
    </div>
  </div>

  <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' id='ui.pending.queue_id'> ...  </div>
            </div>

            <div class='row rowpop'>
              <div class='col-4'> MagStripe </div>
              <div class='col-8'> <input type='text' id='ui.pending.mag_token' 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='' id='ui.pending.rf_site'>
              </div>

              <div class='col-5'>
                <input type='text' class='form-control form-control-sm' placeholder='' id='ui.pending.rf_id'>
              </div>

            </div>

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

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

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

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

            <div class='row rowpop'>
              <div class='col-4'> Phone </div>
              <div class='col-8' id='ui.pending.phone'> ...  </div>
            </div>

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

            <div class='row rowpop'>
              <div class='col-4'> City </div>
              <div class='col-8' id='ui.pending.city'> ...  </div>
            </div>

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

            <div class='row rowpop'>
              <div class='col-4'> ZIP </div>
              <div class='col-8' id='ui.pending.zip'> ...  </div>
            </div>

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

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

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

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

            <div class='row rowpop row-shade'>
              <div class='col-4'> Shipping ZIP </div>
              <div class='col-8' id='ui.pending.shipping_zip'> ...  </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' id='ui.pending.group'>
                    {% for g in groups %}
                    <option id='{{ g.group_id }}'>{{ g.group_name }}</option>
                    {% endfor %}
                  </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='col-12'>

              <div class='row rowpop row-shade'>
                <div class='col-4'>Type</div>
                <div class='col-4'>Value</div>
                <div class='col-4'>Rule</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>


          </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'>
          <div class='col-12' id='ui.pending.cards'>


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

          </div>
        </div>


        <br>
        <br>


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

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

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

{% endblock %}