<!doctype html>
<html lang="en" data-bs-theme="dark">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
          integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
          rel="stylesheet" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
            crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
            crossorigin="anonymous"></script>
    <script src="/static/form-crud.js"></script>



    <section class="form mt-2 row">

      <article class="col-5 ms-3">

        <h4>Technical camera and DM quick look</h4>

        {% include "webgl.html" %}
        
        <!-- <div id="webgl" class="form mt-2 row"> -->

        <!--   <div class="col"> -->
        <!--     <figure class="card"> -->

        <!--       <canvas id="cred-canvas" class="card-img-top" -->
        <!--               data-status="canvas-webgl"> -->
        <!--       </canvas> -->

        <!--       <figcaption class="card-body"> -->
        <!--         <h5 class="card-title">CRED</h5> -->

        <!--         <fieldset class="row mt-2"> -->

        <!--           <div class="col-3 col-form-label"> -->
        <!--             <span>Color</span> -->
        <!--             <label for="min-cred">min</label> -->
        <!--             <span>,</span> -->
        <!--             <label for="max-cred">max</label> -->
        <!--           </div> -->
        <!--           <div class="col"> -->
        <!--             <div class="input-group"> -->
        <!--               <input id="min-cred" type="number" class="form-control" value="2000"> -->
        <!--               <input id="max-cred" type="number" class="form-control" value="4000"> -->
        <!--             </div> -->
        <!--           </div> -->

        <!--         </fieldset> -->

        <!--         <fieldset class="row mt-2"> -->

        <!--           <div class="col-3 col-form-label"> -->
        <!--             <label for="scale-cred">scale</label> -->
        <!--             <span>,</span> -->
        <!--             <label for="min-cred">x0</label> -->
        <!--             <span>,</span> -->
        <!--             <label for="max-cred">y0</label> -->
        <!--           </div> -->
        <!--           <div class="col"> -->
        <!--             <div class="input-group"> -->
        <!--               <input id="scale-cred" type="number" class="form-control" value="1"> -->
        <!--               <input id="x0-cred" type="number" class="form-control" value="0"> -->
        <!--               <input id="y0-cred" type="number" class="form-control" value="0"> -->
        <!--             </div> -->
        <!--           </div> -->

        <!--         </fieldset> -->

        <!--         <aside class="row mt-2"> -->
        <!--         </aside> -->

        <!--       </figcaption> -->
        <!--     </figure> -->

        <!--   </div> -->

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

        <!--   <div class="col"> -->
        <!--     <figure class="card"> -->

        <!--       <canvas id="dm-canvas" class="card-img-top" -->
        <!--               data-status="canvas-webgl"> -->
        <!--       </canvas> -->

        <!--       <figcaption class="card-body"> -->
        <!--         <h5 class="card-title">DM</h5> -->

        <!--         <fieldset class="row mt-2"> -->

        <!--           <div class="col-3 col-form-label"> -->
        <!--             <span>Color</span> -->
        <!--             <label for="min-dm">min</label> -->
        <!--             <span>,</span> -->
        <!--             <label for="max-dm">max</label> -->
        <!--           </div> -->
        <!--           <div class="col"> -->
        <!--             <div class="input-group"> -->
        <!--               <input id="min-dm" type="number" class="form-control" value="2000"> -->
        <!--               <input id="max-dm" type="number" class="form-control" value="4000"> -->
        <!--             </div> -->
        <!--           </div> -->

        <!--         </fieldset> -->

        <!--         <fieldset class="row mt-2"> -->

        <!--           <div class="col-3 col-form-label"> -->
        <!--             <label for="scale-dm">scale</label> -->
        <!--             <span>,</span> -->
        <!--             <label for="min-dm">x0</label> -->
        <!--             <span>,</span> -->
        <!--             <label for="max-dm">y0</label> -->
        <!--           </div> -->
        <!--           <div class="col"> -->
        <!--             <div class="input-group"> -->
        <!--               <input id="scale-dm" type="number" class="form-control" value="1"> -->
        <!--               <input id="x0-dm" type="number" class="form-control" value="0"> -->
        <!--               <input id="y0-dm" type="number" class="form-control" value="0"> -->
        <!--             </div> -->
        <!--           </div> -->

        <!--         </fieldset> -->

        <!--         <aside class="row mt-2"> -->
        <!--         </aside> -->

        <!--       </figcaption> -->
        <!--     </figure> -->

        <!--   </div> -->


        </div>

        <!-- ************************************************ -->
        
        <h4>TelescopeSetup</h4>


        <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="#tel_tab" type="button"
                      role="tab">Preset</button>
            </li>
            
            <li class="nav-item" role="presentation">
              <button class="nav-link" data-bs-toggle="tab"
                      data-bs-target="#off_tab" type="button"
                      role="tab">Offset</button>
            </li>
            
            <li class="nav-item" role="presentation">
              <button class="nav-link" data-bs-toggle="tab"
                      data-bs-target="#other_tab" type="button"
                      role="tab">Other</button>
            </li>
            
          </ul>
        </nav>

        
        <div class="tab-content">


          <!-- ************************************************ -->
          <div class="tab-pane mt-3 show active" id="tel_tab" role="tabpanel">
            
            
            <form class="form" id="tel-setup">

              <fieldset class="mb-3">
                <h5>Preset</h5>

                <div class="row mt-2">
                  <label for="OBJECTNAME" class="col-2 col-form-label">OBJECTNAME</label>
                  <div class="col input-group">
                    <input class="form-control" name="OBJECTNAME"
                           id="OBJECTNAME" placeholder="Polaris" type="text">
                    <span class="input-group-text">
                      @ Simbad
                      <!-- hms ±dms / id -->
                    </span>
                  </div>
                </div>

                <div class="row mt-2">
                  <small class="col-2 form-text text-secondary"></small>
                  <div class="btn-group col" role="group">
                    <button type="button" class="btn btn btn-primary" id="coordinates-check">Check</button>
                  </div>
                </div>

              </fieldset>

              <fieldset class="mb-3">
                <h5>Result</h5>

                <!-- Coordinate System -->
                <div class="row mt-2">
                  <label for="CoordinateSystem" class="col-2 col-form-label">System</label>
                  <div class="col input-group">
                    <input class="col form-control" name="CoordinateSystem" id="CoordinateSystem" value="RADEC" disabled>
                  </div>
                  <!-- </div> -->
                <!-- <\!-- Epoch -\-> -->
                  <!-- <div class="row mt-2"> -->
                    <label for="Epoch" class="col-2 col-form-label">Epoch</label>
                    <div class="col-3">
                      <div class="input-group">
                        <input class="col form-control" name="Epoch" id="Epoch" value="2000" disabled>
                      </div>
                    </div>
                  </div>


                  <!-- <\!-- OBJECTNAME -\-> -->
                    <!-- <div class="row mt-2"> -->
                      <!--   <label for="OBJECTNAME" class="col-2 col-form-label">OBJECTNAME</label> -->
                      <!--   <div class="col input-group"> -->
                        <!--     <input class="col form-control" name="OBJECTNAME" id="OBJECTNAME"> -->
                        <!--   </div> -->
                      <!-- </div> -->

                    <!-- OBJRA -->
                    <div class="row mt-2">
                      <label for="OBJRA" class="col-2 col-form-label">OBJRA</label>
                      <div class="col input-group">
                        <input class="col form-control" name="OBJRA" id="RA">
                      </div>
                      <label for="PMRA" class="col-2 col-form-label">PMRA</label>
                      <div class="col-3">
                        <div class="input-group">
                          <input class="col form-control" name="PMRA" id="PMRA">
                          <span class="input-group-text">mas/yr</span>
                        </div>
                      </div>
                    </div>

                    <!-- OBJDEC -->
                    <div class="row mt-2">
                      <label for="OBJDEC" class="col-2 col-form-label">OBJDEC</label>
                      <div class="col input-group">
                        <input class="col form-control" name="OBJDEC" id="DEC">
                      </div>
                      <label for="PMDEC" class="col-2 col-form-label">PMDEC</label>
                      <div class="col-3">
                        <div class="input-group">
                          <input class="col form-control" name="PMDEC" id="PMDEC">
                          <span class="input-group-text">mas/yr</span>
                        </div>
                      </div>
                    </div>

                    <!-- <\!-- OBJEQUIN -\-> -->
                      <!-- <div class="row mt-2"> -->
                        <!--   <label for="OBJEQUIN" class="col-2 col-form-label">OBJEQUIN</label> -->
                        <!--   <div class="col input-group"> -->
                          <!--     <input class="col form-control" name="OBJEQUIN" id="OBJEQUIN" value="2000"> -->
                          <!--   </div> -->
                        <!-- </div> -->

                      <!-- <\!-- Equinox -\-> -->
                        <!-- <div class="row mt-2"> -->
                          <!--   <label for="Equinox" class="col-2 col-form-label">Equinox</label> -->
                          <!--   <div class="col input-group"> -->
                            <!--     <input class="col form-control" name="Equinox" id="Equinox" value="2000.0"> -->
                            <!--   </div> -->
                          <!-- </div> -->

                        <!-- GSRA -->
                        <div class="row mt-2">
                          <label for="GSRA" class="col-2 col-form-label">GSRA</label>
                          <div class="col input-group">
                            <input class="col form-control" name="GSRA" id="GSRA">
                          </div>
                          <label for="PMGSRA" class="col-2 col-form-label">PMGSRA</label>
                          <div class="col-3">
                            <div class="input-group">
                              <input class="col form-control" name="PMGSRA" id="PMGSRA">
                              <span class="input-group-text">mas/yr</span>
                            </div>
                          </div>
                        </div>

                        <!-- GSDEC -->
                        <div class="row mt-2">
                          <label for="GSDEC" class="col-2 col-form-label">GSDEC</label>
                          <div class="col input-group">
                            <input class="col form-control" name="GSDEC" id="GSDEC">
                          </div>
                          <label for="PMGSDEC" class="col-2 col-form-label">PMGSDEC</label>
                          <div class="col-3">
                            <div class="input-group">
                              <input class="col form-control" name="PMGSDEC" id="PMGSDEC">
                              <span class="input-group-text">mas/yr</span>
                            </div>
                          </div>
                        </div>

                        <!-- AORA -->
                        <div class="row mt-2">
                          <label for="AORA" class="col-2 col-form-label">AORA</label>
                          <div class="col input-group">
                            <input class="col form-control" name="AORA" id="AORA">
                          </div>
                          <label for="PMAORA" class="col-2 col-form-label">PMAORA</label>
                          <div class="col-3">
                            <div class="input-group">
                              <input class="col form-control" name="PMAORA" id="PMAORA">
                              <span class="input-group-text">mas/yr</span>
                            </div>
                          </div>
                        </div>

                        <!-- AODEC -->
                        <div class="row mt-2">
                          <label for="AODEC" class="col-2 col-form-label">AODEC</label>
                          <div class="col input-group">
                            <input class="col form-control" name="AODEC" id="AODEC">
                          </div>
                          <label for="PMAODEC" class="col-2 col-form-label">PMAODEC</label>
                          <div class="col-3">
                            <div class="input-group">
                              <input class="col form-control" name="PMAODEC" id="PMAODEC">
                              <span class="input-group-text">mas/yr</span>
                            </div>
                          </div>
                        </div>

                        <!-- AOMODE -->
                        <div class="row mt-2">
                          <label for="AOMODE" class="col-2 col-form-label">AOMODE</label>
                          <div class="col input-group">
                            <select class="col form-control" name="AOMODE" id="AOMODE">
                              <option value="NORMAL">NORMAL</option>
                              <option value="REPOINT">REPOINT</option>
                            </select>
                          </div>
                          <!-- BinocularFlag -->
                          <label for="BinocularFlag" class="col-2 col-form-label">BinocularFlag</label>
                          <div class="col-3">
                            <div class="input-group">
                              <select class="col form-control" name="BinocularFlag" id="BinocularFlag">
                                <option value="OFF">OFF</option>
                                <option value="SYNCPRESET">SYNCPRESET</option>
                              </select>
                            </div>
                          </div>
                        </div>

                        <!-- TelescopeMode -->
                        <div class="row mt-2">
                          <label for="TelescopeMode" class="col-2 col-form-label">TelescopeMode</label>
                          <div class="col input-group">
                            <select class="col form-control" name="TelescopeMode" id="TelescopeMode">
                              <option value="ADAPTIVEACE_TRACK">ADAPTIVEACE_TRACK</option>
                              <option value="TRACK">TRACK</option>
                            </select>
                          </div>
                          <!-- TelescopeSide -->
                          <label for="TelescopeSide" class="col-2 col-form-label">TelescopeSide</label>
                          <div class="col-3">
                            <div class="input-group">
                              <select class="col form-control" name="TelescopeSide" id="TelescopeSide">
                                <option value="LEFT">LEFT</option>
                                <option value="BOTH">BOTH</option>
                              </select>
                            </div>
                          </div>
                        </div>

                        <div class="row mt-2">
                          <small class="col-2 form-text text-secondary"></small>
                          <div class="btn-group col" role="group">
                            <button type="button" class="btn btn btn-primary" id="coordinates-slew">1. SHARKNIR_gen_Preset</button>
                          </div>
                        </div>

              </fieldset>

            </form>

          </div>

          <!-- ************************************************ -->
          <div class="tab-pane mt-3" id="off_tab" role="tabpanel">

            <h5>Telescope Offset</h5>
            
            <!-- OFFSETX -->
            <div class="row mt-2">
              <label for="OFFSETX" class="col-2 col-form-label">OFFSETX</label>
              <div class="col input-group">
                <input class="col form-control" name="OFFSETX" id="OFFSETX" type="text" value="0.0">
              </div>
            </div>

            <!-- OFFSETY -->
            <div class="row mt-2">
              <label for="OFFSETY" class="col-2 col-form-label">OFFSETY</label>
              <div class="col input-group">
                <input class="col form-control" name="OFFSETY" id="OFFSETY" type="text" value="-0.008726646">
              </div>
            </div>

            <!-- CoordinateSystem -->
            <div class="row mt-2">
              <label for="CoordinateSystem" class="col-2 col-form-label">CoordinateSystem</label>
              <div class="col input-group">
                <input class="col form-control" name="CoordinateSystem" id="CoordinateSystem"
                       type="text" value="ALTAZ" disabled>
              </div>
            </div>

            <!-- MoveType -->
            <div class="row mt-2">
              <label for="MoveType" class="col-2 col-form-label">MoveType</label>
              <div class="col input-group">
                <select class="col form-control" name="MoveType" id="MoveType" type="text" value="ABS">
                  <option value="ABS">ABS</option>
                  <option value="ABSCS">ABSCS</option>
                  <option value="REL">REL</option>
                  <option value="RELCS">RELCS</option>
                </select>
              </div>
            </div>

            <!-- BinocularFlag -->
            <div class="row mt-2">
              <label for="BinocularFlag" class="col-2 col-form-label">BinocularFlag</label>
              <div class="col input-group">
                <div class="input-group">
                  <select class="col form-control" name="BinocularFlag" id="BinocularFlag">
                    <option value="OFF">OFF</option>
                    <option value="SYNCPRESET">SYNCPRESET</option>
                  </select>
                </div>
              </div>
            </div>


            <div class="row mt-2">
              <small class="col-2 form-text text-secondary"></small>
              <div class="btn-group col" role="group">
                <button type="button" class="btn btn btn-primary" id="coordinates-slew">0. testOB_tcs_OffsetPointing</button>
              </div>
            </div>

            
          </div>

          <!-- ************************************************ -->
          <div class="tab-pane  mt-3" id="other_tab" role="tabpanel">
            <h5>Other stuff</h5>
            
          </div>
          
          
      </article>

      <article class="col-2">


        <form class="form mb-3" id="info-setup">

          <h4>InfoSetup</h4>

          <!-- <\!-- IMAGETYP -\-> -->
            <!-- <div class="row mt-2"> -->
              <!--   <label for="IMAGETYP" class="col-2 col-form-label">IMAGETYP</label> -->
              <!--   <div class="col input-group"> -->
                <!--     <input class="col form-control" name="IMAGETYP" id="IMAGETYP" type="text" value="" > -->
                <!--   </div> -->
              <!-- </div> -->
            
            <!-- OBJECT -->
            <div class="row mt-2">
              <label for="OBJECT" class="col-3 col-form-label">OBJECT</label>
              <div class="col input-group">
                <input class="col form-control" name="OBJECT" id="OBJECT" type="text" value="" >
              </div>
            </div>

            <!-- COMMENT -->
            <div class="row mt-2">
              <label for="COMMENT" class="col-3 col-form-label">COMMENT</label>
              <div class="col">
                <div class="input-group">
                  <input class="col form-control" name="COMMENT" id="COMMENT" type="text" value="" >
                </div>
              </div>
            </div>
            
            <!-- OBSERVER -->
            <div class="row mt-2">
              <label for="OBSERVER" class="col-3 col-form-label">OBSERVER</label>
              <div class="col input-group">
                <input class="col form-control" name="OBSERVER" id="OBSERVER" type="text" value="" >
              </div>
            </div>

            <!-- PARTNER -->
            <div class="row mt-2">
              <label for="PARTNER" class="col-3 col-form-label">PARTNER</label>
              <div class="col">
                <div class="input-group">
                  <input class="col form-control" name="PARTNER" id="PARTNER" type="text" value="" >
                </div>
              </div>
            </div>

            <!-- PI_COI -->
            <div class="row mt-2">
              <label for="PI_COI" class="col-3 col-form-label">PI_COI</label>
              <div class="col input-group">
                <input class="col form-control" name="PI_COI" id="PI_COI" type="text" value="" >
              </div>
            </div>

            <!-- PROPID -->
            <div class="row mt-2">
              <label for="PROPID" class="col-3 col-form-label">PROPID</label>
              <div class="col">
                <div class="input-group">
                  <input class="col form-control" name="PROPID" id="PROPID" type="text" value="" >
                </div>
              </div>
            </div>

            <div class="row mt-2">
              <small class="col-3 form-text text-secondary"></small>
              <div class="btn-group col" role="group">
                <button type="button" class="btn btn btn-secondary" id="set-info">Set Info</button>
              </div>
            </div>

        </form>

        <!-- ************************************************ -->
        
        <h4>Query details</h4>
        <aside id="query-details">
        </aside>
        
      </article>


      <article class="col me-3">
        
        <h4>Scientific camera quick look</h4>


<div id="webgl" class="form mt-2 row">

  <div class="col">
    <figure class="card">

      <canvas id="cred-canvas" class="card-img-top"
              data-status="canvas-webgl">
      </canvas>

      <figcaption class="card-body">
        <h5 class="card-title">CRED</h5>

        <fieldset class="row mt-2">

          <div class="col-3 col-form-label">
            <span>Color</span>
            <label for="min-cred">min</label>
            <span>,</span>
            <label for="max-cred">max</label>
          </div>
          <div class="col">
            <div class="input-group">
              <input id="min-cred" type="number" class="form-control" value="2000">
              <input id="max-cred" type="number" class="form-control" value="4000">
            </div>
          </div>

        </fieldset>

        <fieldset class="row mt-2">

          <div class="col-3 col-form-label">
            <label for="scale-cred">scale</label>
            <span>,</span>
            <label for="min-cred">x0</label>
            <span>,</span>
            <label for="max-cred">y0</label>
          </div>
          <div class="col">
            <div class="input-group">
              <input id="scale-cred" type="number" class="form-control" value="1">
              <input id="x0-cred" type="number" class="form-control" value="0">
              <input id="y0-cred" type="number" class="form-control" value="0">
            </div>
          </div>

        </fieldset>

        <aside class="row mt-2">
        </aside>

      </figcaption>
    </figure>

  </div>

  </div>

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

        <h4>Observation type</h4>

        <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="#scicam_tab" type="button"
                      role="tab">Snapshot</button>
            </li>
            
            <li class="nav-item" role="presentation">
              <button class="nav-link" data-bs-toggle="tab"
                      data-bs-target="#ci_tab" type="button"
                      role="tab">Coronagraphy</button>
            </li>
            
            <li class="nav-item" role="presentation">
              <button class="nav-link" data-bs-toggle="tab"
                      data-bs-target="#di_tab" type="button"
                      role="tab">Direct Imaging</button>
            </li>
            
            <li class="nav-item" role="presentation">
              <button class="nav-link" data-bs-toggle="tab"
                      data-bs-target="#lss_tab" type="button"
                      role="tab">Spectroscopy</button>
            </li>
            
          </ul>
        </nav>

        <div class="tab-content">


          <!-- ************************************************ -->
          <div class="tab-pane show active" id="scicam_tab" role="tabpanel">
            <h5 class="mt-2">Simple Scicam snapshot</h5>            

            <form class="form" id="scicam-setup">
              
              <!-- DIT -->
              <div class="row mt-2">
                <label for="DIT" class="col-2 col-form-label">DIT</label>
                <div class="col input-group">
                  <input class="col form-control" name="DIT" id="DIT" type="text" value="">
                  <div class="col btn-group">
                    <input type="radio" class="btn-check" name="min_groups" id="full" autocomplete="off" checked>
                    <label class="btn btn-outline-secondary" for="full">Full</label>
                    
                    <input type="radio" class="btn-check" name="min_groups" id="empty" autocomplete="off">
                    <label class="btn btn-outline-secondary" for="empty">Empty</label>
                  </div>
                  
                  <!-- <button type="button" class="btn btn-secondary col-3" -->
                  <!--         data-control="set-scicam-params" data-status="full">Full</button> -->
                  <!-- <button type="button" class="btn btn-secondary col-3" data-control="set-scicam-params" -->
                  <!--         data-status="empty">Empty</button> -->
                </div>
              </div>

              <!-- NREADS, NDROPS, NGROUPS -->
              <div class="row mt-2">
                <label for="NREADS" class="col-2 col-form-label">Params</label>
                <div class="col input-group">
                  <input class="col form-control" name="NREADS" id="NREADS" type="text" value=""   placeholder="NREADS">
                  <input class="col form-control" name="NDROPS" id="NDROPS" type="text" value=""   placeholder="NDROPS">
                  <input class="col form-control" name="NGROUPS" id="NGROUPS" type="text" value="" placeholder="NGROUPS">
                </div>
              </div>


              <!-- NDIT -->
              <div class="row mt-2">
                <label for="NDIT" class="col-2 col-form-label">NDIT</label>
                <div class="col">
                  <input class="col form-control" name="NDIT" id="NDIT" type="text" value="1">
                </div>
                <!-- NCOADDS -->
                <label for="NCOADDS" class="col-2 col-form-label">NCOADDS</label>
                <div class="col">
                  <input class="col form-control" name="NCOADDS" id="NCOADDS" type="text" value="1">
                </div>
              </div>

              <!-- READOUT -->
              <div class="row mt-2">
                <label for="READOUT" class="col-2 col-form-label">READOUT</label>
                <div class="col input-group">
                  <select class="col form-select" name="READOUT" id="READOUT">
                    <option value="Full_Image">Full_Image</option>
                    <option value="Center">Center</option>
                    <option value="Bottom">Bottom</option>
                    <option value="Top">Top</option>
                    <option value="256x256">256x256</option>
                    <option value="128x128">128x128</option>
                    <option value="64x64">64x64</option>
                    <option value="32x32">32x32</option>
                    <option value="1000x1000">1000x1000</option>
                    <option value="coro_stripe">coro_stripe</option>
                    <option value="PD_wollaston_stripe_small">PD_wollaston_stripe_small</option>
                    <option value="PD_wollaston_stripe_large">PD_wollaston_stripe_large</option>
                    <option value="run2">run2</option>
                    <option value="obs_stripe_200px">obs_stripe_200px</option>
                    <option value="obs_stripe_512px">obs_stripe_512px</option>
                  </select>
                </div>
                <label for="SAVE" class="col-2 col-form-label">SAVE</label>
                <div class="col-md col-1 input-group">
                  <span class="input-group-text">
                    <input class="form-check-input mt-0" type="checkbox"
                           data-control="dome-slave" id="SAVE">
                  </span>
                  <button type="button" class="col btn btn-primary" id="expose-scicam">
                    Expose
                  </button>
                </div>
              </div>

            </form>
            
          </div>

          
          <!-- ************************************************ -->
          <div class="tab-pane" id="ci_tab" role="tabpanel">
            <h5 class="mt-2">Coronagrapy mode</h5>

            <!-- <div class="row mt-2"> -->
              <!--   <div class="col input-group"> -->
                <!--     <button class="btn btn-primary col-6" data-control="run-sequencer">1. SHARKNIR_gen_Preset</button> -->
                <!--     <input class="col form-control" name="boh" id="boh" type="text" value="com1-object-preset"> -->
                <!--     <button type="button" class="btn btn-outline-secondary" data-bs-placement="right" data-bs-content="Field acquisition and possible start of derotation" data-bs-container="body" data-bs-toggle="popover">?</button> -->
                <!--   </div> -->
              <!-- </div> -->

            <div class="row mt-2">
              <div class="col input-group">
                <button class="btn btn-primary col-6" data-control="run-sequencer">2. SHARKNIR_gen_tec_PupilApoAlignment</button>
                <input class="col form-control" name="boh" id="boh" type="text" value="com1-apo-alignment">
                <span class="btn btn-outline-secondary"><i class="bi bi-file-earmark-spreadsheet">edit</i></span>
                <button type="button" class="btn btn-outline-secondary" data-bs-placement="right" data-bs-content="Apodizer alignment" data-bs-container="body" data-bs-toggle="popover">?</button>
              </div>
            </div>

            <div class="row mt-2">
              <div class="col input-group">
                <button class="btn btn-primary col-6" data-control="run-sequencer">3. SHARKNIR_gen_tec_PupilLyotAlignment</button>
                <input class="col form-control" name="boh" id="boh" type="text" value="com1-lyot-alignment">
                <span class="btn btn-outline-secondary"><i class="bi bi-file-earmark-spreadsheet">edit</i></span>
                <button type="button" class="btn btn-outline-secondary" data-bs-placement="right" data-bs-content="Lyot mask alignment" data-bs-container="body" data-bs-toggle="popover">?</button>
              </div>
            </div>

            <div class="row mt-2">
              <div class="col input-group">
                <button class="btn btn-primary col-6" data-control="run-sequencer">4. SHARKNIR_gen_tec_PSFAlignment</button>
                <input class="col form-control" name="boh" id="boh" type="text" value="com1-psf-alignment">
                <span class="btn btn-outline-secondary"><i class="bi bi-file-earmark-spreadsheet">edit</i></span>
                <button type="button" class="btn btn-outline-secondary" data-bs-placement="right" data-bs-content="Alignment of the PSF behind the coronagraph" data-bs-container="body" data-bs-toggle="popover">?</button>
              </div>
            </div>

            <div class="row mt-2">
              <div class="col input-group">
                <button class="btn btn-primary col-6" data-control="run-sequencer">5. SHARKNIR_cal_Flux</button>
                <input class="col form-control" name="boh" id="boh" type="text" value="com1-flux-calibration">
                <span class="btn btn-outline-secondary"><i class="bi bi-file-earmark-spreadsheet">edit</i></span>
                <button type="button" class="btn btn-outline-secondary" data-bs-placement="right" data-bs-content="PSF shift out of coronagraph, observation outside coronagraph, PSF repositioning behind coronagraph" data-bs-container="body" data-bs-toggle="popover">?</button>
              </div>
            </div>

            <div class="row mt-2">
              <div class="col input-group">
                <button class="btn btn-primary col-6" data-control="run-sequencer">6. SHARKNIR_gen_cal_StarCenter</button>
                <input class="col form-control" name="boh" id="boh" type="text" value="com1-waffle">
                <span class="btn btn-outline-secondary"><i class="bi bi-file-earmark-spreadsheet">edit</i></span>
                <button type="button" class="btn btn-outline-secondary" data-bs-placement="right" data-bs-content="Waffle mode application + Image" data-bs-container="body" data-bs-toggle="popover">?</button>
              </div>
            </div>

            <div class="row mt-2">
              <div class="col input-group">
                <button class="btn btn-primary col-6" data-control="run-sequencer">7. SHARKNIR_ci_obs</button>
                <input class="col form-control" name="boh" id="boh" type="text" value="com1-object-observation">
                <span class="btn btn-outline-secondary"><i class="bi bi-file-earmark-spreadsheet">edit</i></span>
                <button type="button" class="btn btn-outline-secondary" data-bs-placement="right" data-bs-content="Coronagraphic observation" data-bs-container="body" data-bs-toggle="popover">?</button>
              </div>
            </div>

            <div class="row mt-2">
              <div class="col input-group">
                <button class="btn btn-primary col-6" data-control="run-sequencer">8. SHARKNIR_cal_Flux</button>
                <input class="col form-control" name="boh" id="boh" type="text" value="com1-flux-calibration">
                <span class="btn btn-outline-secondary"><i class="bi bi-file-earmark-spreadsheet">edit</i></span>
                <button type="button" class="btn btn-outline-secondary" data-bs-placement="right" data-bs-content="PSF shift out of coronagraph, observation outside coronagraph, PSF repositioning behind coronagraph" data-bs-container="body" data-bs-toggle="popover">?</button>
              </div>
            </div>

            <div class="row mt-2">
              <div class="col input-group">
                <button class="btn btn-primary col-6" data-control="run-sequencer">9. SHARKNIR_gen_cal_StarCenter</button>
                <input class="col form-control" name="boh" id="boh" type="text" value="com1-waffle">
                <span class="btn btn-outline-secondary"><i class="bi bi-file-earmark-spreadsheet">edit</i></span>
                <button type="button" class="btn btn-outline-secondary" data-bs-placement="right" data-bs-content="Waffle mode application + Image" data-bs-container="body" data-bs-toggle="popover">?</button>
              </div>
            </div>

          </div>
          <!-- ************************************************ -->

          <!-- ************************************************ -->
          <div class="tab-pane" id="di_tab" role="tabpanel">
            <h5 class="mt-2">Direct imaging mode</h5>

            <!-- <div class="row mt-2"> -->
              <!--   <div class="col input-group"> -->
                <!--     <button class="btn btn-primary col-6" data-control="run-sequencer">1. SHARKNIR_gen_Preset</button> -->
                <!--     <input class="col form-control" name="boh" id="boh" type="text" value="com1-object-preset"> -->
                <!--     <button type="button" class="btn btn-outline-secondary" data-bs-placement="right" data-bs-content="Field acquisition and possible start of derotation" data-bs-container="body" data-bs-toggle="popover">?</button> -->
                <!--   </div> -->
              <!-- </div> -->

            <div class="row mt-2">
              <div class="col input-group">
                <button class="btn btn-primary col-6" data-control="run-sequencer">2. SHARKNIR_gen_tec_PupilLyotAlignment</button>
                <input class="col form-control" name="boh" id="boh" type="text" value="com1-lyot-alignment">
                <span class="btn btn-outline-secondary"><i class="bi bi-file-earmark-spreadsheet">edit</i></span>
                <button type="button" class="btn btn-outline-secondary" data-bs-placement="right" data-bs-content="Alignment of the Lyot mask" data-bs-container="body" data-bs-toggle="popover">?</button>
              </div>
            </div>

            <div class="row mt-2">
              <div class="col input-group">
                <button class="btn btn-primary col-6" data-control="run-sequencer">3. SHARKNIR_gen_tec_PSFAlignment</button>
                <input class="col form-control" name="boh" id="boh" type="text" value="com1-psf-alignment">
                <span class="btn btn-outline-secondary"><i class="bi bi-file-earmark-spreadsheet">edit</i></span>
                <button type="button" class="btn btn-outline-secondary" data-bs-placement="right" data-bs-content="Alignment of the PSF behind the coronagraph" data-bs-container="body" data-bs-toggle="popover">?</button>
              </div>
            </div>

            <div class="row mt-2">
              <div class="col input-group">
                <button class="btn btn-primary col-6" data-control="run-sequencer">4. SHARKNIR_di_obs</button>
                <input class="col form-control" name="boh" id="boh" type="text" value="com1-object-observation">
                <span class="btn btn-outline-secondary"><i class="bi bi-file-earmark-spreadsheet">edit</i></span>
                <button type="button" class="btn btn-outline-secondary" data-bs-placement="right" data-bs-content="Direct image observation" data-bs-container="body" data-bs-toggle="popover">?</button>
              </div>
            </div>


          </div>
          <!-- ************************************************ -->

          <!-- ************************************************ -->
          <div class="tab-pane" id="lss_tab" role="tabpanel">
            <h5 class="mt-2">Long Slit Spectroscopy mode</h5>
          </div>
          <!-- ************************************************ -->


        </div>




      </article>



    </section>

    <script>

      $("#coordinates-check").on("click", function(e){
          var obj = $("#OBJECTNAME").val()
          //console.log(obj)
          $(this).crud("POST", "/simbad", obj).then(function(d){
              var aside = $("#query-details").text("")
              $.each(d, function(k,v){
                  //console.log(k,v)
                  $("#"+k).val(v)

                  var small_tag = $('<small>').text(k+": ");
                  var var_tag = $('<var>').addClass("text-success").attr("data-status", v).text(v);
                  small_tag.append(var_tag)
                  aside.append(small_tag).append("<br>")

              })

          })

      })

      $("#coordinates-slew").on("click", function(e){
          var data = $("#tel-setup").serializeArray()
          console.log(data)
      })

      $("#set-info").on("click", function(e){
          var data = $("#info-setup").serializeArray()
          console.log(data)
      })

      $("#expose-scicam").on("click", function(e){
          var data = $("#scicam-setup").serializeArray()
          console.log(data)
      })

      </script>
