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

{% set included = True %}

{% block content %}



  <section class="row">


    <form class="form mt-2 col-3">

      <h4>Init</h4>

      <fieldset>
        
        <h5>Telescope status</h5>
        
        <div class="mt-2 row">
          <label for="dome" class="col-2 col-form-label">Switch</label>
          <div class="btn-group col">
            <button type="button" class="btn btn-outline-primary col-2">
              Off
            </button>
            <button type="button" class="btn btn-outline-secondary col-2">
              On
            </button>
          </div>
        </div>
        
        <div class="mt-2 row">
          <label for="dome" class="col-2 col-form-label">Status</label>
          <div class="btn-group col">
            <button type="button" class="btn btn-outline-primary col-2">
              Unpark
            </button>
            <button type="button" class="btn btn-outline-secondary col-2">
              Park
            </button>
          </div>
        </div>

        <div class="mt-2 row">  
          <label for="cover" class="col-2 col-form-label">Cover</label>
          <div class="btn-group col">
            <button type="button" class="btn btn-outline-primary col-2">
              Open
            </button>
            <button type="button" class="btn btn-outline-secondary col-2">
              Close
            </button>
          </div>
        </div>

        <div class="row">
          <small class="col-2 form-text"></small>
          <small class="col text-success">status: <var>unparked</var></small>
          <small class="col text-danger">cover: <var>error</var></small>
        </div>

        <div class="mt-2 row">  
          <label for="error" class="col-2 col-form-label">Error</label>
          <div class="btn-group col">
            <button type="button" class="btn btn-outline-primary">
              Clear
            </button>
          </div>
        </div>
        
        <h5 class="mt-2">Telescope offsets</h5>
        
        <div class="row mt-2">
          <label for="zdoffset" class="col-1 col-form-label">ZD</label>
          <label for="azoffset" class="col-1 col-form-label">Alt</label>
          <div class="form-group col">
            <div class="input-group">
              <input class="form-control" name="zdoffset"
                     id="zdoffset" placeholder="0.00" min="-300.00" max="300.00" type="number" >
              <input class="form-control" name="azoffset"
                     id="azoffset" placeholder="0.00" min="-300.00" max="300.00" type="number" >
              <span class="input-group-text">
                ''
              </span>
            </div>
          </div>
        </div>
        
        <div class="row mt-2">          
          <label for="derot" class="col-2 col-form-label">Rot</label>
          <div class="form-group col">
            <div class="input-group">
              <input id="derot" type="text" class="form-control" name="derot"
                     placeholder="0.00" min="0.00" max="359.99"
                     type="number">
              <span class="input-group-text">
                °
              </span>
            </div>
          </div>
        </div>

        <div class="row">
          <small class="col-2 form-text"></small>
          <small class="col text-success">zd: <var>0.0</var></small>
          <small class="col text-success">az: <var>0.0</var></small>
          <small class="col text-success">rot: <var>0</var></small>
        </div>

        
        <h5>Dome</h5>


        <div class="mt-2 row">
          <label for="dome" class="col-2 col-form-label">Az</label>
          <div class="form-group col">
            <div class="input-group">
              <input id="dome" type="text" class="form-control"
                     placeholder="0.00" min="0.00" max="359.99" type="number" >
              <span class="input-group-text">
                °
              </span>
            </div>          
          </div>
          <div class="btn-group col">
            <button type="button" class="btn btn-outline-primary">
              Sync
            </button>
            <button type="button" class="btn btn-outline-primary">
              Park
            </button>
          </div>
        </div>
          
        <div class="mt-2 row">
          <label for="shutter" class="col-2 col-form-label">Shutter</label>
          <div class="btn-group col">
            <button type="button" class="btn btn-outline-primary">
              Open
            </button>
            <button type="button" class="btn btn-outline-secondary">
              Close
            </button>
          </div>
        </div>

        <div class="row">
          <small class="col-2 form-text"></small>
          <small class="col text-success">az: <var>0.0</var></small>
          <small class="col text-success">open: <var>False</var></small>
        </div>
        
        <h5>Camera</h5>
        
        <div class="mt-2 row">
          <label for="dome" class="col-2 col-form-label">Switch</label>
          <div class="btn-group col">
            <button type="button" class="btn btn-outline-primary col-2">
              Off
            </button>
            <button type="button" class="btn btn-outline-secondary col-2">
              On
            </button>
          </div>
        </div>

        <div class="mt-2 row">
          <label for="temperature" class="col-2 col-form-label">Cool</label>        
          <div class="form-group col">
            <div class="input-group">
              <span class="input-group-text">
                <input class="form-check-input mt-0" type="checkbox">
              </span>
              <input class="form-control" type="number" id="temperature" value="-20.0" max="0">
              <span class="input-group-text">
                C
              </span>
            </div>
          </div>
          <div class="btn-group col-3">
            <button type="button" class="btn btn-outline-secondary">
              Warm
            </button>
          </div>
        </div>

        <div class="row">
          <small class="col-2 text-secondary"></small>
          <!-- <small class="col text-success">cool: <var>On</var></small> -->
          <small class="col text-success">fan: <var>50%</var></small>
          <small class="col text-success">T: <var>-21.1</var></small>
          <small class="col text-success">amb: <var>11.0</var></small>
        </div>



        
      </fieldset>
      
    </form>

    <!-- <\!-- ************************************************************************************************************* -\-> -->
    
    <form class="form mt-2 col-4">
      
      <h4>Control panel</h4>

      <fieldset>
        <h5>Telescope</h5>

        <nav>
          <ul class="nav nav-tabs" role="tablist">
            <li class="nav-item" role="presentation">
              <button class="nav-link active" data-bs-toggle="tab"
                      data-bs-target="#radec_tab" type="button" role="tab">Ra Dec</button>
            </li>
            <li class="nav-item" role="presentation">
              <button class="nav-link" data-bs-toggle="tab"
                      data-bs-target="#altaz_tab" type="button"
                      role="tab">Alt Az</button>
            </li>
            <li class="nav-item" role="presentation">
              <button class="nav-link" data-bs-toggle="tab"
                      data-bs-target="#byname_tab" type="button"
                      role="tab">By name</button>
            </li>
            <!-- <li class="nav-item" role="presentation"> -->
            <!--   <button class="nav-link" data-bs-toggle="tab" -->
            <!--           data-bs-target="#offset_tab" type="button" -->
            <!--           role="tab">Offset</button> -->
            <!-- </li> -->
          </ul>
        </nav>

        <div class="tab-content">

          <div class="tab-pane show active" id="radec_tab" role="tabpanel">

            <div class="row mt-2">
              <label for="alpha" class="col-1 col-form-label">&alpha;</label>
              <label for="delta" class="col-1 col-form-label">&delta;</label>
              <div class="col input-group">
                <input class="form-control" name="alpha"
                       id="alpha" placeholder="00 00 00.0" >
                <input class="form-control" name="delta"
                       id="delta" placeholder="+00 00 00.0" >
                <span class="input-group-text">
                  hms
                  dms
                </span>
              </div>
            </div>

          </div>

          <div class="tab-pane" id="altaz_tab" role="tabpanel">

            <div class="row mt-2">
              <label for="altitude" class="col-1 col-form-label">Alt</label>
              <label for="azimuth" class="col-1 col-form-label">Az</label>
              <div class="col input-group">
                <input class="form-control" name="altitude"
                       id="altitude" placeholder="45.00" min="10.00" max="85.00" type="number" >
                <input class="form-control" name="azimuth"
                       id="azimuth" placeholder="0.00" min="0.00" max="359.99" type="number" >
                <span class="input-group-text">
                  °
                </span>
              </div>
            </div>

          </div>

          <div class="tab-pane" id="byname_tab" role="tabpanel">

            <div class="row mt-2">
              <label for="identifier" class="col-2 col-form-label">Identifier</label>
              <div class="col input-group">
                <input class="form-control" name="altitude"
                       id="identifier" placeholder="Polaris" type="text" >
                <span class="input-group-text">
                  simbad
                </span>
              </div>
            </div>

          </div>
          
        </div>

        
        <div class="row mt-2">
          <small class="col-2 form-text text-secondary"></small>
          <div class="btn-group col" role="group">
            <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off">
            <label class="btn btn btn-outline-primary" for="btnradio1">Check</label>

            <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
            <label class="btn btn btn-outline-primary" for="btnradio2">Slew</label>

            <input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
            <label class="btn btn btn-outline-secondary" for="btnradio3">Stop</label>
          </div>
        </div>


        <div class="row">
          <small class="col-2 form-text text-secondary"></small>
          <small class="col form-text text-success">&alpha;: <var>00 00 00.0</var></small>
          <small class="col form-text text-success">&delta;: <var>+00 00 00.0</var></small>
          <small class="col form-text text-success">ha: <var>+00 00 00.0</var></small>
        </div>
        <div class="row">
          <small class="col-2 form-text text-secondary"></small>
          <small class="col form-text text-success">alt: <var>45.00</var></small>
          <small class="col form-text text-success">az: <var>50.00</var></small>
          <small class="col form-text text-secondary">lst: <var>00 00 00.0</var></small>
        </div>



        <div class="mt-2 row">
          <label for="dome" class="col-2 col-form-label">Dome</label>
          <div class="form-group col-4">
            <div class="input-group">
              <span class="input-group-text">
                <input class="form-check-input mt-0" type="checkbox">
              </span>
              <input id="dome" type="text" class="form-control"
                     placeholder="0.00" min="0.00" max="359.99" type="number" >
              <span class="input-group-text">
                °
              </span>
            </div>          
          </div>          
          <div class="btn-group col">
            <button type="button" class="btn btn-outline-primary">
              Park
            </button>
              <button type="button" id="btnGroupDrop1" class="btn btn-outline-primary">
                Open
              </button>
            <button type="button" class="btn btn-outline-secondary">
              Close
            </button>
          </div>
        </div>
        
        <div class="row">
          <small class="col-2 text-secondary"></small>
          <small class="col text-success">slaved: <var>False</var></small>
          <small class="col text-success">az: <var>50.00</var></small>
          <small class="col text-success">open: <var>False</var></small>
        </div>

        <div class="row mt-2">
          <label for="focus" class="col-2 col-form-label">Focus</label>
          <div class="form-group col-4">
            <div class="input-group">
              <input id="focus" type="text" class="form-control"
                     placeholder="19500" min="15000" max="25000">
              <span class="input-group-text">
                µm
              </span>
            </div>
          </div>
          <div class="btn-group col">
            <button type="button" class="btn btn-outline-primary col">Lamp</button>
            <button type="button" class="btn btn-outline-primary col">Light</button>
          </div>
        </div>

        <div class="row">
          <small class="col-2 text-secondary"></small>
          <small class="col text-success">position: <var>19500</var></small>
          <small class="col text-success">lamp: <var>Off</var></small>
          <small class="col text-success">light: <var>Off</var></small>
        </div>

      </fieldset>

    </form>

    <!-- ************************************************************************************************************* -->

    <form class="form mt-2 col-4">


      <fieldset>

        <h5>Camera</h5>


        <div class="row mt-2">
          <label for="frametyp" class="col-form-label col-2">Frame</label>
          <div class="btn-group col-4" role="group" aria-label="First group">
            <button type="button" class="btn btn-outline-primary">Full</button>
            <button type="button" class="btn btn-outline-primary">Half</button>
            <button type="button" class="btn btn-outline-primary">2'</button>
          </div>
          <label for="binning" class="col-2 col-form-label">Binning</label>
          <div class="col">
            <select class="form-control" id="binning">
              <option value="1">1×1</option>
              <option value="2" selected>2×2</option>
              <option value="3">3×3</option>
              <option value="3">4×4</option>
            </select>
          </div>
          <!-- <div class="form-group col-4"> -->
            <!--   <div class="btn-group col" role="group" aria-label="First group"> -->
              <!--     <button type="button" class="btn btn-outline-primary">1</button> -->
              <!--     <button type="button" class="btn btn-outline-primary">2</button> -->
              <!--     <button type="button" class="btn btn-outline-primary">3</button> -->
              <!--   </div> -->
            <!-- </div> -->
        </div>

        <div class="row mt-2">
          <label for="x0" class="col-1 col-form-label">X<sub>0</sub></label>
          <label for="y0" class="col-1 col-form-label">Y<sub>0</sub></label>
          <div class="col input-group input-group">
            <input class="form-control" type="number"
                   id="x0" value="123" max="1">
            <input class="form-control" type="number"
                   id="y0" value="234" max="1">
            <span class="input-group-text">px</span>
          </div>
        </div>

        <div class="row mt-2">
          <label for="xf" class="col-1 col-form-label">Y<sub>f</sub></label>
          <label for="yf" class="col-1 col-form-label">Y<sub>f</sub></label>
          <div class="col input-group input-group">
            <input class="form-control" type="number"
                   id="xf" value="678" min="2">
            <input class="form-control" type="number"
                   id="yf" value="789" min="2">
            <span class="input-group-text">px</span>
          </div>
        </div>

        <!-- <div class="row"> -->
          <!--   <strong class="col-2">Info:</strong> -->
          <!--   <small class="text-muted">Max: <var>1024</var>×<var>1024</var> px</small> -->
          <!--   <small class="text-muted">Width: <var>800</var> px</small> -->
          <!--   <small class="text-muted">Height: <var>600</var> px</small> -->
          <!-- </div> -->

      </fieldset>

      <fieldset>

        <!-- <h4>Object</h4> -->

        <div class="row mt-2">
          <label for="imagetyp" class="col-form-label col-2">Type</label>
          <div class="col input-group">
            <select id="imagetyp" name="imagetyp" class="form-control">
              <option value="1">Science</option>
              <option value="2">Bias</option>
              <option value="3">Flat</option>
              <option value="0">Dark</option>
            </select>
          </div>
          <label for="filter" class="col-form-label col-2">Filter</label>
          <div class="col input-group">
            <select id="imagetyp" name="filter" class="form-control">
              <option value="1">U</option>
              <option value="2">B</option>
              <option value="3">V</option>
              <option value="4">R</option>
              <option value="5">I</option>
              <option value="6">H&alpha;</option>
              <option value="7">Free</option>
            </select>
          </div>
        </div>

        <div class="row mt-2">
          <label class="col-2 col-form-label" for="exptime" >Exptime</label>
          <div class="input-group col">
            <input class="form-control" type="number" id="exptime" value="120">
            <span class="input-group-text">s</span>
          </div>
          <label for="repeat" class="col-2 col-form-label">Repeat</label>
          <div class="input-group col">
            <input class="form-control" type="number" id="repeat" value="1" min="1" max="300">
            <span class="input-group-text">#</span>
          </div>
        </div>

        <!-- <div class="row mt-2"> -->
          <!--   <label for="filter" class="col-form-label col-2">Filter</label> -->
          <!--   <div class="btn-group col" role="group" aria-label="First group"> -->
            <!--     <button type="button" class="btn btn-outline-primary">U</button> -->
            <!--     <button type="button" class="btn btn-outline-primary">B</button> -->
            <!--     <button type="button" class="btn btn-outline-primary">V</button> -->
            <!--     <button type="button" class="btn btn-outline-primary">R</button> -->
            <!--     <button type="button" class="btn btn-outline-primary">I</button> -->
            <!--     <button type="button" class="btn btn-outline-primary">H&alpha;</button> -->
            <!--     <button type="button" class="btn btn-outline-primary">Free</button> -->
            <!--   </div> -->
          <!-- </div> -->

        <div class="row mt-2">
          <label for="object" class="col-form-label col-2">Object</label>
          <div class="col">
            <input type="text" placeholder="Test" id="object"
                   name="object" class="form-control" value="Test">
          </div>
        </div>


        <div class="row mt-2">
          <small class="col-2 text-secondary"></small>
          <div class="btn-group col" role="group">
            <input type="radio" class="btn-check" name="btnradio" id="btnradio4" autocomplete="off">
            <label class="btn btn btn-outline-primary" for="btnradio4">Video</label>

            <input type="radio" class="btn-check" name="btnradio" id="btnradio5" autocomplete="off">
            <label class="btn btn btn-outline-primary" for="btnradio5">Expose</label>

            <input type="radio" class="btn-check" name="btnradio" id="btnradio6" autocomplete="off">
            <label class="btn btn btn-outline-secondary" for="btnradio6">Stop</label>
          </div>
        </div>


        <div class="row">
          <small class="col-2 text-secondary"></small>
          <small class="col text-warning">filt: <var>moving</var></small>
          <small class="col text-warning"><var>readout</var></small>
          <small class="col text-success"><var>300</var>/<var>300</var></small>
        </div>

        <div class="row">
          <small class="col-2 text-secondary"></small>
          <!-- <small class="col text-success">cool: <var>On</var></small> -->
          <small class="col text-success">fan: <var>50%</var></small>
          <small class="col text-success">T: <var>-21.1</var></small>
          <small class="col text-success">amb: <var>11.0</var></small>
        </div>
        
      </fieldset>
      
    </form>

  
    <!-- <\!-- ************************************************************************************************************* -\-> -->


    <form class="form mt-2 col">

    
      
      <!-- <article class="col-3"> -->
      
      <!-- <h4>Display</h4> -->
      
      <!-- <figure class="card"> -->
      <!--   <img class="card-img-top" src="..."> -->
      <!--   <figcaption class="card-body"> -->
      <!--     <h5 class="card-title">title</h5>     -->
          
      <!--     <p class="card-text"> -->
      <!--       <\!-- <span title="insmode"  class="badge bg-primary">fotometry</span> -\-> -->
      <!--       <span title="filter"   class="badge bg-info">Free</span> -->
      <!--       <span title="binning"  class="badge bg-info">2x2</span> -->
      <!--       <span title="imagetyp" class="badge bg-dark">bias</span> -->
      <!--       <span title="seeing"   class="badge bg-warning">no seeing</span> -->
      <!--       <span title="resolved" class="badge bg-warning">no wcs</span> -->
      <!--     </p> -->
          
      <!--     <dl data-var="cardList" class="card-text"> -->
      <!--     </dl> -->

      <!--   </figcaption> -->
      <!--   <aside class="card-footer"> -->
      <!--     <a href="#" class="card-link">png</a> -->
      <!--     <a href="#" class="card-link">fits</a> -->
      <!--     <a href="#" class="card-link">header</a> -->
      <!--     <a href="#" class="card-link">extra</a> -->
      <!--   </aside> -->
      <!-- </figure> -->

      <!-- </article> -->

      
    </form>




    
</section>

{% endblock content %}

{% block footer %}
  <footer class="">
  
  </footer>
{% endblock footer %}