{% extends "base.html" %}

{% block content %}

  <h1 class="mt-4">Recycle Card</h1>
  <p>... </p>

  <div class='container'>

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

      <div class='col-10'>

        <!-- recycle card lookup -->
        <div class='row'>

          <div class='col-10'>

            <div class='row row-shade'>
              <div class='col-6'>MagStripe</div>
              <div class='col-6'>.. </div>
            </div>

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

            <div class='row row-shade'>
              <div class='col-6'>Source Group</div>
              <div class='col-6'>.. </div>
            </div>

            <div class='row'>
              <div class='col-6'>Destination Group</div>
              <div class='col-6'>.. </div>
            </div>

          </div>

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

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

        <br>

        <div class='row '>
          <div class='col-6'>
            <button type='button' class='btn btn-secondary btn-sm'>Recycle Card</button>
          </div>
          <div class='col-6'></div>
        </div>

        <br>
        <br>
        <br>

        <!-- initial pass -->
        <div class='row'>

          <div class='col-10'>
            <h3>Initial Pass</h3>
          </div>
          <div class='col-2'></div>

        </div>

        <div class='row'>

          <div class='col-10'>


            <!-- none -->
            <div class='row row-shade'>
              <div class='col-1'>
                <input type='radio' aria-label='pass-none'>
              </div>
              <div class='col-2'>None</div>
              <div class='col-3'></div>
              <div class='col-3'></div>
              <div class='col-3'></div>
            </div>

            <!-- multi ride -->
            <div class='row '>
              <div class='col-1'>
                <input type='radio' aria-label='initial-pass-multi-ride'>
              </div>
              <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>

            <!-- multi day -->
            <div class='row row-shade'>

              <div class='col-1'>
                <input type='radio' aria-label='initial-pass-multi-day'>
              </div>
              <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>

            <div class='row '>
              <div class='col-1'>
                <input type='radio' aria-label='initial-pass-other'>
              </div>
              <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>
          </div>

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

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

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

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

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


{% endblock %}