<!DOCTYPE html>
<html lang="en" data-bs-theme="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flask-SocketIO Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.4.0/socket.io.js"></script>    
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script> -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
            crossorigin="anonymous"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
          crossorigin="anonymous">
    
    <script>

      // // Connect to Socket.IO server // // var socket =
      io.connect('http://' + document.domain + ':' + location.port);
      // const socket = io.connect({ // transports: ['polling'], //
      });
      
      // // Event handlers
      // socket.on('connect', () => {
      //     console.log('Connected');
      // });
      
      // socket.on('disconnect', () => {
      //     console.log('Disconnected');
      // });
      
      // socket.on('message', (data) => {
      //     console.log('Received message:', data);
      // });
      
      
      // socket.on('matrix', function(matrix) {
      //     console.log('Received matrix:');
          
      //     try {
      //         parsedJson = JSON.parse(new TextDecoder().decode(matrix));
      //         console.log(parsedJson);
      //     } catch (e) {
      //         console.log(matrix);
      //     }
          
      // });
      
        // // Example: Sending a message
        // function sendMessage() {
        //     const message = document.getElementById('message').value;
        //     socket.emit('message', message);
        // }
    </script>
</head>
<body>

    <section class="form mt-2">
      
        <fieldset>
          <h5>Preset</h5>

          <!-- <nav> -->
          <!--   <ul class="nav nav-tabs" role="tablist"> -->
          <!--     <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 active" data-bs-toggle="tab" -->
          <!--               data-bs-target="#radec_tab" type="button" -->
          <!--               role="tab">Radec / ID</button> -->
          <!--     </li> -->
          <!--   </ul> -->
          <!-- </nav> -->

          <!-- <div class="tab-content"> -->

          <!--   <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" -->
            <!--              data-parameter="telescope-coordinates-altitude"> -->
            <!--       <input class="form-control" name="azimuth" -->
            <!--              id="azimuth" placeholder="0.00" min="0.00" max="359.99" type="number" -->
            <!--              data-parameter="telescope-coordinates-azimuth"> -->
            <!--       <span class="input-group-text"> -->
            <!--         ° -->
            <!--       </span> -->
            <!--     </div> -->
            <!--   </div> -->

            <!-- </div> -->

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

              <div class="row mt-2">
                <label for="identifier" class="col-2 col-form-label">&alpha;,&delta; / ID</label>
                <div class="col input-group">
                  <input class="form-control" name="altitude"
                         id="identifier" placeholder="Polaris" type="text"
                         data-parameter="telescope-coordinates-radec">
                  <span class="input-group-text">
                    hms ±dms / id
                  </span>
                </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="coordinates-radio" id="coordinates-check" >
              <label class="btn btn btn-outline-primary" for="coordinates-check">check</label>

              <input type="radio" class="btn-check" name="coordinates-radio" id="coordinates-slew" >
              <label class="btn btn btn-outline-primary" for="coordinates-slew">Slew</label>
            </div>
          </div>

        </fieldset>

        <aside class="row">
          <small class="col-md-2 col-auto text-muted">
          </small>
          <small class="col text-success">
            &alpha;:
            <var data-status="telescope-coordinates-ra"></var>
          </small>
          <small class="col text-success">
            &delta;:
            <var data-status="telescope-coordinates-dec"></var>
          </small>
          <small class="col text-success">
            ha:
            <var data-status="telescope-coordinates-ha"></var>
          </small>
        </aside>

        <aside class="row">
          <small class="col-md-2 col-auto text-muted">
          </small>
          <small class="col text-success">
            alt:
            <var data-status="telescope-coordinates-alt"></var>
          </small>
          <small class="col text-success">
            az:
            <var data-status="telescope-coordinates-az"></var>
          </small>
          <small class="col text-success">
            lst:
            <var data-status="telescope-coordinates-lst"></var>
          </small>
        </aside>
        
    </section>









</body>
</html>
