{% if not included %}
{% extends 'index.html' %}
{% endif %}

{% set included = True %}

{% block content%}

<article>

  <h3>RTC control panel</h3>

  {% include "rtc_plots.html" %}
  
  <section class="form">
    <h5> Control </h5>
    
    <div class="row">
      
    <form id="f-centroid" class="col mt-1">
      <div class="row">
      <div class="col-4 col-form-label">
        <span>Centroid</span>
        <label for="cx">X</label>
        <span>,</span>
        <label for="cy">Y</label>
      </div>
      <div class="col">
        <div class="input-group" >          
          <input class="form-control" id="cx" value="30" name="cx" type="number" >
          <input class="form-control" id="cy" value="30" name="cy" type="number" >
          <button id="update-centroid" class="btn btn-outline-primary " type="submit" >Update</button>
        </div>
      </div>
      </div>
      <script>
      </script>
    </form>
      
    <form id="f-centroid" class="col-3 mt-1">
        <div class="">
          <div class="btn-group w-100" >
            <button id="u" class="btn btn-outline-primary " type="submit" >Flatten</button>
            <button id="u" class="btn btn-outline-primary " type="submit" >Open</button>
            <button id="u" class="btn btn-outline-primary " type="submit" >Close</button>
          </div>
        </div>
      <script>
      </script>
    </form>    

    <form id="f-centroid" class="col-3 mt-1">
        <div class="">
          <div class="btn-group w-100" >
            <button role="button" id="u" class="btn btn-outline-primary " type="submit" >500Hz</button>
            <button role="button" id="u" class="btn btn-outline-primary " type="submit" >1000Hz</button>
            <button role="button" id="u" class="btn btn-outline-primary " type="submit" >2000Hz</button>
          </div>
        </div>
      <script>
      </script>
    </form>
    
    </div>

    <form id="f-centroid" class="row mt-2">
        <div class="col-2 col-form-label">
          <label for="dark">Dark</label>
        </div>
        <div class="col">
          <button id="update-centroid" class="btn btn-outline-primary w-100" type="submit" >Create new + apply</button>
        </div>
        <div class="col-auto form-text mt-2">
          or
        </div>
        <div class="col-4">
          <div class="input-group">          
            <input class="form-control" list="datalistOptions" id="dark" placeholder="Type to search...">
            <datalist id="datalistOptions">
              <option value="San Francisco">
              <option value="New York">
              <option value="Seattle">
              <option value="Los Angeles">
              <option value="Chicago">
            </datalist>

            <button id="update-centroid" class="btn btn-outline-secondary" type="submit" >Load this</button>

          </div>
        </div>
        
      <script>
      </script>
    </form>

    <form id="f-centroid" class="row mt-1">
        <div class="col-2 col-form-label">
          <span>Centroid gain</span>
          <label for="cx">type</label>
          <span>,</span>
          <label for="cy">size</label>
        </div>
        <div class="col">
          <div class="input-group" >          
            <select class="form-select" aria-label="Default select example">
              <option value="1" selected>Point gain</option>
              <option value="2">Flat</option>
            </select>
            <input class="form-control" id="cy" type="number" value="2" name="cy" >
            <button id="update-centroid" class="btn btn-outline-primary " type="submit" >Create new + apply</button>
          </div>
        </div>
        <div class="col-auto form-text mt-2">
          or
        </div>
        <div class="col-4">
          <div class="input-group">          
            <input class="form-control" list="datalistOptions" id="bias" placeholder="Type to search...">
            <datalist id="datalistOptions">
              <option value="San Francisco">
              <option value="New York">
              <option value="Seattle">
              <option value="Los Angeles">
              <option value="Chicago">
            </datalist>

            <button id="update-centroid" class="btn btn-outline-secondary" type="submit" >Load this</button>

          </div>
        </div>
        
      <script>
      </script>
    </form>

    
  </section>

</article>
  
{% endblock content %}
