<!DOCTYPE html>
<html lang="en" data-bs-theme="dark">
<meta charset="utf-8">

<title>
  OARPAF 
  {% block title %}
  {% endblock title %}
</title>

<!-- external resources -->
<script src="/static/js/socket.io.min.js"></script>
<script src="/static/js/jquery-3.6.0.min.js"></script>
<!-- <script src="/static/js/jquery-ui.min.js"></script> -->
<script src="/static/js/bootstrap.bundle.min.js"></script>
<link href="/static/css/bootstrap.min.css" rel="stylesheet">

<!-- internal resources -->
<script  type="text/javascript" >
  var api_base_url = "{{ api_base_url|safe }}"
</script>
<script src="/static/js/ansi_up.js"></script>
<script src="/static/form-crud.js"></script>
<script src="/static/status-streams.js"></script>
<link href="/static/css/custom.css" rel="stylesheet">

<!-- favicon for all devices -->
<link rel="shortcut icon" href="/static/favicon/favicon.ico">
<!-- <link rel="apple-touch-icon" sizes="76x76" href="/static/favicon/apple-touch-icon.png"> -->
<!-- <link rel="icon" type="image/png" sizes="32x32" href="/static/favicon/favicon-32x32.png"> -->
<!-- <link rel="icon" type="image/png" sizes="16x16" href="/static/favicon/favicon-16x16.png"> -->
<!-- <link rel="manifest" href="/static/favicon/site.webmanifest"> -->
<!-- <meta name="msapplication-TileColor" content="#da532c"> -->
<!-- <meta name="msapplication-config" content="/static/favicon/browserconfig.xml"> -->
<!-- <meta name="theme-color" content="#cccccc"> -->



{% block head %}
<!-- add single page head scripts or link tags -->
{% endblock head %}


<!-- 100% width body in all viewports-->
<body class="container-fluid">

  {% block header %}

  <header class="row align-items-center custom-header">

    <!-- logo -->
    <div class="col-6 col-sm-3 col-md-2 col-lg-2 col-xl-1 col-xxl-1">
      <a href="/web/home/">
        <img class="rounded d-block img-fluid" src="/static/images/logo.jpg" alt="logo">
      </a>
    </div>

    <div class="col col-sm-auto col-md-auto col-lg-auto col-xl col-xxl d-none d-sm-none d-md-none d-lg-none d-xl-block d-xxl-block">
      <h4>Stable</h4>
      <nav class="col">
        <a class="btn btn-primary mb-1" role="button" href="/web/init">Init panel</a>
        <a class="btn btn-primary mb-1" role="button" href="/web/control">Control panel</a>
        <a class="btn btn-primary mb-1" role="button" href="/web/blocks">OB editor</a>
        <a class="btn btn-primary mb-1" role="button" href="/web/sequencer">Sequencer</a>
        <a class="btn btn-primary mb-1" role="button" href="/web/display" >Display</a>
        <a class="btn btn-primary mb-1" role="button" href="/web/webcam" >Webcam</a>
      </nav>
    </div>
    
    <div class="col-2 d-none d-sm-none d-md-none d-lg-none d-xl-block d-xxl-block">
      <h4>Info</h4>
      <nav class="col">
        <small class="d-block" >Web-Client time diff</small>
        <var data-status="timestamp-diff">und</var>
      </nav>
    </div>

    <div class="col-auto d-none d-sm-none d-md-none d-lg-none d-xl-block d-xxl-block">
      <h4>Devel</h4>
      <nav class="col">
        <a class="btn btn-secondary mb-1" role="button" href="/web/environment/" >Meteo</a>
        <a class="btn btn-secondary mb-1" role="button" href="/web/other/button" >Buttons</a>
        <a class="btn btn-secondary mb-1" role="button" href="/web/webgl" >WebGL</a>
      </nav>
    </div>
    
    <div class="col-auto d-none d-sm-none d-md-none d-lg-none d-xl-block d-xxl-block">
        <h4>External Resources</h4>
        <nav class="col">
          <a class="btn btn-outline-primary mb-1" role="button" target="_blank" href="/api">API docs</a>
          <a class="btn btn-outline-primary mb-1" role="button" target="_blank" href="http://skycam:Antola@130.251.11.11/skycam/index.php">AllSky zap</a>
          <a class="btn btn-outline-primary mb-1" role="button" target="_blank" href="http://admin:BigBang2021@ipcam.orsa.unige.net:80">Ipcam</a>
          </nav>
    </div>

    <div class="col col-sm col-md col-lg col-xl-2 col-xxl-1 text-end d-block d-sm-block d-md-block d-lg-block d-xl-none d-xxl-none">
      <button class="btn btn-secondary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvas" aria-controls="offcanvas" style="margin-right:15px; padding:25px;">
        MENU
      </button>
    </div>

    <!-- offcanvas menu for mobile and tablet -->
    <div class="offcanvas offcanvas-start zindex-tooltip" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasLabel">Menu</h5>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
      </div>
      
      <div class="offcanvas-body">
        <h4>Stable</h4>
        <nav class="col">
          <a class="btn btn-primary mb-1" role="button" href="/web/init">Init panel</a>
          <a class="btn btn-primary mb-1" role="button" href="/web/control">Control panel</a>
          <a class="btn btn-primary mb-1" role="button" href="/web/blocks">OB editor</a>
          <a class="btn btn-primary mb-1" role="button" href="/web/sequencer">Sequencer</a>
          <a class="btn btn-primary mb-1" role="button" href="/web/display" >Display</a>
          <a class="btn btn-primary mb-1" role="button" href="/web/webcam" >Webcam</a>
        </nav>
        
        <h4>Devel</h4>
        <nav class="col">
          <a class="btn btn-secondary mb-1" role="button" href="/web/environment/" >Meteo</a>
          <a class="btn btn-secondary mb-1" role="button" href="/web/other/button" >Buttons</a>
          <a class="btn btn-secondary mb-1" role="button" href="/web/webgl" >WebGL</a>
        </nav>
        
        <h4>External Resources</h4>
        <nav class="col">
          <a class="btn btn-outline-primary mb-1" role="button" target="_blank" href="/api">API docs</a>
          <a class="btn btn-outline-primary mb-1" role="button" target="_blank" href="http://skycam:Antola@130.251.11.11/skycam/index.php">AllSky zap</a>
          <a class="btn btn-outline-primary mb-1" role="button" target="_blank" href="http://admin:BigBang2021@ipcam.orsa.unige.net:80">Ipcam</a>
        </nav>
      </div>
    </div>
    
  </header>

  {% endblock header %}

  <main>
    {% block content %}

    <div class="row">
      
    </div>
    {% endblock content%}
    <hr style="height:50px;visibility:hidden">
  </main>

  {% block footer %}

  <footer id="footer" class="fixed-bottom mx-2 overflow-hidden logbar">
    <div class="expand-button" id="dragbar"></div>
    <figure class="card h-100 border rounded">
      <figcaption class="card-header">
        <div class="log-level-checkbox">
          <label for="DEBUG"><input type="checkbox" id="DEBUG" value="DEBUG">DEBUG</label>
        </div>
        <div class="log-level-checkbox">
          <label for="INFO"><input type="checkbox" id="INFO" value="INFO">INFO</label>
        </div>
        <div class="log-level-checkbox">
          <label for="WARNING"><input type="checkbox" id="WARNING" value="WARNING">WARNING</label>
        </div>
        <div class="log-level-checkbox">
          <label for="ERROR"><input type="checkbox" id="ERROR" value="ERROR">ERROR</label>
        </div>
        <button class="btn btn-primary btn-sm float-end" onclick="$('#stream-output').html('')">Clear</button>
      </figcaption>
      <div class="card-body p-0 m-0 overflow-hidden">
        <pre class="ms-3 me-3 list-group h-100 list-group-flush rounded-0">
          <code class="h-100 scrollable overflow-auto"
                id="stream-output"
                style="display:flex; flex-direction:column-reverse;">
                Log text
          </code>
        </pre>
      </div>
    </figure>
  </footer>

  {% endblock footer %}

  {% block stream %}
  

  <script>
    
    var level_checkboxes = $('#DEBUG, #INFO, #WARNING, #ERROR');
    level_checkboxes.prop('checked', true);
    
    level_checkboxes.change(function(){
        var id = $(this).attr('id');
        var class_id = id + '-level-line';
        if(this.checked) {
            $('style').text($('style').text() + '.'+class_id+'{display:block;}');
        } else {
            $('style').text($('style').text() + '.'+class_id+'{display:none;}');
        }
    });
    
    $(document).ready(function() {
        var dragging = false;
        var footer = $('#footer');
        var handle = $('.expand-button');
        var startY, startHeight;
        
        handle.mousedown(function(e) {
            e.preventDefault();
            startY = e.pageY;
            startHeight = footer.height();
            dragging = true;
        });
        
        $(document).mouseup(function(e) {
            dragging = false;
        });
        
        $(document).mousemove(function(e) {
            if (dragging) {
                var newHeight = startHeight - (e.pageY - startY);
                footer.height(newHeight);
            }
        });
    });
    
  </script>
  
  {% endblock stream %}
  
<script src="/static/form-actions.js"></script>
