{% 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 type='text' class='form-control form-control-sm' placeholder=''>
              </div>
              <div class='col-2'> 
                <!-- <button type='button' class='btn btn-secondary btn-sm justify-content-end'>Find</button> -->
                <button 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'>
                    <option>Org A</option>
                    <option>Org B</option>
                    <option>Org C</option>
                  </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 type='text' class='form-control form-control-sm' placeholder=''>
              </div>
              <div class='col-2' >
                <button 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 type='text' class='form-control form-control-sm' placeholder=''>
              </div>
              <div class='col-2 '>
                <button 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 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 type='text' class='form-control form-control-sm' placeholder=''>
              </div>
              <div class='col-2'>
                <button 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'>

            <div class='row row-shade rowpop'>
              <div class='col-5'> Username </div>
              <div class='col-7'> jdoey112 </div>
            </div>

            <div class='row rowpop'>
              <div class='col-5'> First Name </div>
              <div class='col-7'> J </div>
            </div>


            <div class='row row-shade rowpop'>
              <div class='col-5'> Last Name </div>
              <div class='col-7'> Doey </div>
            </div>

            <div class='row rowpop'>
              <div class='col-5'> E-Mail </div>
              <div class='col-7'> jdoey112@example.com </div>
            </div>

            <div class='row row-shade rowpop'>
              <div class='col-5'> Phone </div>
              <div class='col-7'> (607) 555-1212</div>
            </div>

            <div class='row rowpop'>
              <div class='col-5'> Address </div>
              <div class='col-7'> 15 Lane </div>
            </div>

            <div class='row row-shade rowpop'>
              <div class='col-5'> City </div>
              <div class='col-7'> Ithaca </div>
            </div>

            <div class='row rowpop'>
              <div class='col-5'> State </div>
              <div class='col-7'> NY </div>
            </div>

            <div class='row row-shade rowpop'>
              <div class='col-5'> ZIP </div>
              <div class='col-7'> 14850 </div>
            </div>

            <div class='row rowpop'>
              <div class='col-5'> Group </div>
              <div class='col-7'> General </div>
            </div>

          </div>

        </div>

        <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 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 class='custom-select'>
                <option>Adult</option>
                <option>Half</option>
              </select>
            </div>

          </div>

          <div class='col-2'>

            <div class='input-group input-group-sm mb-3'>
              <select class='custom-select'>
                <option>Region 0</option>
                <option>Region 1</option>
              </select>
            </div>

          </div>

          <div class='col-2'>

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


          </div>

          <div class='col-3'>
            <div class='input-group input-group-sm mb-3'>
              <div class='input-group-prepend'>
                <span class='input-group-text'>Other</span>
              </div>
              <input type='text' class='form-control form-control-sm' placeholder=''>
            </div>
          </div>

          <div class='col-1'>
            <button 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 class='custom-select'>
                <option>Adult</option>
                <option>Half</option>
              </select>
            </div>

          </div>

          <div class='col-2'>

            <div class='input-group input-group-sm mb-3'>
              <select class='custom-select'>
                <option>Region 0</option>
                <option>Region 1</option>
              </select>
            </div>

          </div>

          <div class='col-2'>

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

          </div>

          <div class='col-3'>
            <div class='input-group input-group-sm mb-3'>
              <div class='input-group-prepend'>
                <span class='input-group-text'>Other</span>
              </div>
              <input type='text' class='form-control form-control-sm' placeholder=''>
            </div>

          </div>

          <div class='col-1'>
            <button 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 class='custom-select'>
                <option>Custom Pass 0</option>
                <option>Custom Pass 1</option>
                <option>Custom Pass 2</option>
              </select>
            </div>

          </div>

          <div class='col-1'>
            <button 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 row-shade rowpop'>
          <div class='col-3'>
            <button type='button' class='btn btn-secondary btn-sm'>check / uncheck all</button>
          </div>
          <div class='col-7'> </div>
          <div class='col-2'> <button type='button' class='btn btn-secondary btn-sm'>delete</button> </div>
        </div>

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

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

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

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

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

{% endblock %}