{% extends "base.html" %}

{% block content %}

  <div class='row'>

    <div class='col-6'>
      <h1 class="mt-4">Search</h1>
    </div>

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

  </div>

  <div class='container'>

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

      <!-- col-10 to give a padding on the side -->
      <div class='col-10'>

        <br>

        <!-- -->
        <div class='row rowpop row-shade'>

          <div class='col-2'>Search Cards</div>
          <div class='col-8'>
            <input type='text' class='form-control form-control-sm' placeholder='' id='ui.search.card'>
          </div>
          <div class='col-2'>
            <button type='button' class='btn btn-secondary btn-sm' id='ui.search.find_card'>Find</button>
          </div>

        </div>

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

          <div class='col-2'>Search Users</div>
          <div class='col-8'>
            <input type='text' class='form-control form-control-sm' placeholder='' id='ui.search.user'>
          </div>
          <div class='col-2'>
            <button type='button' class='btn btn-secondary btn-sm' id='ui.search.find_user'>Find</button>
          </div>

        </div>

        <!-- -->
        <div class='row rowpop row-shade'>

          <div class='col-2'>Search Admins</div>
          <div class='col-8'>
            <input type='text' class='form-control form-control-sm' placeholder='' id='ui.search.admin'>
          </div>
          <div class='col-2'>
            <button type='button' class='btn btn-secondary btn-sm' id='ui.search.find_admin'>Find</button>
          </div>

        </div>

      </div>



      <!-- user managed cards block -->
      <div class='col-12' id='ui.search.results'>

          <!--
          <div id='ui.search.results' class='col-10'>
          <div class='row rowpop'>
            <div class='col-6'> <h3> User Owned Cards </h3> </div>
            <div class='col-6'></div>
          </div>

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

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

      </div>


    </div>
  </div>


{% endblock %}