{% extends "base.html" %}

{% block content %}

  <h1 class="mt-4">Manage Card</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-6'>

            <div class='row row-shade rowpop'>
              <div class='col-4'> CardId </div>
              <div class='col-6'>
                <input id='manage_card:logical_card_id' type='text' class='form-control form-control-sm' placeholder=''>
              </div>
              <div class='col-2'> 
                <button id='manage_card:button_lookup_logical_card_id' type='button' class='btn btn-secondary btn-sm'>Find</button>
              </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 row-shade rowpop'>
              <div class='col-4'> MagStripe </div>
              <div class='col-6'>
                <input id='manage_card:mag_token' type='text' class='form-control form-control-sm' placeholder=''>
              </div>
              <div class='col-2' >
                <button id='manage_card:button_lookup_mag_token' type='button' class='btn btn-secondary btn-sm '>Find</button>
              </div>
            </div>

            <div class='row rowpop'>
              <div class='col-4'> RFID </div>
              <div class='col-6'>
                <input id='manage_card:rfid_token' type='text' class='form-control form-control-sm' placeholder=''>
              </div>
              <div class='col-2 '>
                <button id='manage_card:button_lookup_rfid_token' type='button' class='btn btn-secondary btn-sm'>Find</button>
              </div>
            </div>

            <div class='row row-shade rowpop'>
              <div class='col-4'> Active Pass </div>
              <div class='col-6'> ...  </div>
              <div class='col-2'>
                <button id='manage_card:button_lookup_pass' type='button' class='btn btn-secondary btn-sm'>Find</button>
              </div>
            </div>

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

            <div class='row row-shade rowpop'>
              <div class='col-4'> Other ID </div>
              <div class='col-6'>
                <input id='manage_card:other_id' type='text' class='form-control form-control-sm' placeholder=''>
              </div>
              <div class='col-2'>
                <button id='manage_card:button_other_find' type='button' class='btn btn-secondary btn-sm'>Find</button>
              </div>
            </div>

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

          </div>

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

          <!-- and the other half is devoted to user specific information (associated with the card) -->
          <div class='col-5'>

            <input id='manage_card:userid' type='hidden' >

            <div class='row row-shade rowpop'>
              <div class='col-5'> Username </div>
              <div id='manage_card:username' class='col-7'> </div>
            </div>

            <div class='row rowpop'>
              <div class='col-5'> First Name </div>
              <div id='manage_card:first_name' class='col-7'> </div>
            </div>


            <div class='row row-shade rowpop'>
              <div class='col-5'> Last Name </div>
              <div id='manage_card:last_name' class='col-7'> </div>
            </div>

            <div class='row rowpop'>
              <div class='col-5'> E-Mail </div>
              <div id='manage_card:email' class='col-7'> </div>
            </div>

            <div class='row row-shade rowpop'>
              <div class='col-5'> Phone </div>
              <div id='manage_card:phone' class='col-7'> </div>
            </div>

            <div class='row rowpop'>
              <div class='col-5'> Address </div>
              <div id='manage_card:address' class='col-7'> </div>
            </div>

            <div class='row row-shade rowpop'>
              <div class='col-5'> City </div>
              <div id='manage_card:city' class='col-7'> </div>
            </div>

            <div class='row rowpop'>
              <div class='col-5'> State </div>
              <div id='manage_card:state' class='col-7'> </div>
            </div>

            <div class='row row-shade rowpop'>
              <div class='col-5'> ZIP </div>
              <div id='manage_card:zip' class='col-7'> </div>
            </div>

            <div class='row rowpop'>
              <div class='col-5'> Group </div>
              <div id='manage_card:group' class='col-7'> </div>
            </div>

            <div class='row'>
              <div class='col-5'>
                <button id='manage_card:button_manage_user' type='button' class='btn btn-secondary btn-sm'>Manage User</button>
              </div>
            </div>

          </div>


        </div>

        <br>
        <br>
        <br>

        <!-- passes selection area where passes can be added to the card -->
        <div class='row'>

          <div class='col-3'>
            <h2> Passes </h2>
          </div>

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

          <div class='col-3'>
            <button id='manage_card:button_reissue' type='button' class='btn btn-secondary btn-sm'>Re-Issue Card</button>
          </div>

        </div>

        <div class='row row-shade rowpop'>
          <div class='col-2'> Multi-Ride </div>
          <div class='col-2'>

            <div class='input-group input-group-sm mb-3'>
              <select id='manage_card:pass_nride_type' class='custom-select'>
                <option value='NRIDE'>Adult</option>
                <option value='NRIDEH'>Half</option>
              </select>
            </div>

          </div>

          <div class='col-2'>

            <div class='input-group input-group-sm mb-3'>
              <select id='manage_card:pass_nride_region' class='custom-select'>
                <option value='ZON0'>Region 0</option>
                <option value='ZON1'>Region 1</option>
              </select>
            </div>

          </div>

          <div class='col-2'>

            <div class='input-group input-group-sm mb-3'>
              <select id='manage_card:pass_nride_orig' class='custom-select'>
                <option value='1'>1</option>
                <option value='2'>2</option>
                <option value='5'>5</option>
                <option value='10'>10</option>
                <option value='25'>25</option>
              </select>
            </div>


          </div>

          <div class='col-3'>
            <div class='input-group input-group-sm mb-3 custom-h'>
              <div class='input-group-prepend'>
                <span class='input-group-text'>Other</span>
              </div>
              <input id='manage_card:pass_nride_other' type='text' class='form-control form-control-sm' placeholder=''>
            </div>
          </div>

          <div class='col-1'>
            <button id='manage_card:button_add_pass_nride' type='button' class='btn btn-secondary btn-sm'>Add</button>
          </div>

        </div>

        <div class='row rowpop'>
          <div class='col-2'> Multi-Day </div>
          <div class='col-2'>

            <div class='input-group input-group-sm mb-3'>
              <select id='manage_card:pass_nday_type' class='custom-select'>
                <option value='NDAY'>Adult</option>
                <option value='NDAYH'>Half</option>
              </select>
            </div>

          </div>

          <div class='col-2'>

            <div class='input-group input-group-sm mb-3'>
              <select id='manage_card:pass_nday_region' class='custom-select'>
                <option value='ZON0'>Region 0</option>
                <option value='ZON1'>Region 1</option>
              </select>
            </div>

          </div>

          <div class='col-2'>

            <div class='input-group input-group-sm mb-3'>
              <select id='manage_card:pass_nday_orig' class='custom-select'>
                <option value='1'>1</option>
                <option value='2'>2</option>
                <option value='5'>5</option>
                <option value='10'>10</option>
                <option value='25'>25</option>
              </select>
            </div>

          </div>

          <div class='col-3'>
            <div class='input-group input-group-sm mb-3 custom-h'>
              <div class='input-group-prepend'>
                <span class='input-group-text'>Other</span>
              </div>
              <input id='manage_card:pass_nday_other' type='text' class='form-control form-control-sm' placeholder=''>
            </div>

          </div>

          <div class='col-1'>
            <button id='manage_card:button_add_pass_nday' type='button' class='btn btn-secondary btn-sm'>Add</button>
          </div>

        </div>

        <div class='row row-shade rowpop'>
          <div class='col-2'> Other </div>
          <div class='col-9'> 

            <div class='input-group input-group-sm mb-3'>
              <select id='manage_card:pass_other' class='custom-select'>
                {% for rc in cache["other_pass"] %}
                  <option id='{{ rc.rulename }}'>{{ rc.rulename }}</option>
                {% endfor %}
              </select>
            </div>

          </div>

          <div class='col-1'>
            <button id='manage_card:button_add_pass_other' type='button' class='btn btn-secondary btn-sm'>Add</button>
          </div>

        </div>

        <div class='row rowpop'>
          <hr>
        </div>

        <br>


        <!-- pre-existing pass management where they can be re-ordered and deleted -->
        <div class='row'>

          <div id='manage_card:list_passes_buttons' class='col-12'>
            <div class='row row-shade rowpop'>
              <div class='col-3'>
                <button type='button' class='btn btn-secondary btn-sm' id='manage_card:button_toggle_pass_all'>check / uncheck all</button>
              </div>
              <div class='col-7'> </div>
              <div class='col-2'> <button type='button' class='btn btn-secondary btn-sm' id='manage_card:button_delete_pass'>delete</button> </div>
            </div>
          </div>

          <div id='manage_card:list_passes' class='col-12'>

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

            <!--
            <div class='row rowpop' >
              <div class='col-1'> NRide </div>
              <div class='col-1'> 5 </div>
              <div class='col-1'> 3 </div>
              <div class='col-2'> -  </div>
              <div class='col-2'> 2020-01-20 </div>
              <div class='col-2'> 2020-01-20 </div>
              <div class='col-3'> 2020-01-25 13:10 </div>
            </div>

            <div class='row rowpop' >
              <div class='col-1'> NDay </div>
              <div class='col-1'> 10 </div>
              <div class='col-1'> 2 </div>
              <div class='col-2'> 2020-04-01 </div>
              <div class='col-2'> 2020-01-20 </div>
              <div class='col-2'> 2020-01-20 </div>
              <div class='col-3'> 2020-01-25 13:10 </div>
            </div>
            -->

          </div>

        <!-- end of col-12 -->
        </div>

      <!-- side padding -->
      <div class='col-2'> </div>

    <!-- end of encasing container row -->
    </div>

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

{% endblock %}