<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>
  OARPAF
  {% block title %}
  {% endblock title %}
</title>
<script src="/static/js/jquery-3.6.0.min.js"></script>
<!-- <script src="/static/js/jquery-ui.min.js"></script> -->
<link href="/static/css/bootstrap.min.css" rel="stylesheet">
<script src="/static/js/bootstrap.bundle.min.js"></script>
<link rel="shortcut icon" href="/static/images/favicon.ico">

<script src="/static/ansi_up.js"></script>

<script src="/static/form-crud.js"></script>

{% block head %}
{% endblock head %}

<!-- <body class="container-fluid"> -->
<body class="container-fluid vh-100 d-flex flex-column">

  {% block header %}

  <header class="row align-items-center bg-light">

    <div class="col-1">
      <a href="/web/home/">
        <img class="img-fluid" src="/static/images/logo.jpg" alt="logo">
      </a>
    </div>

    <div class="col">
      <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>
      </nav>
    </div>

    <div class="col-auto">
      <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/other/display" >Display</a>
      </nav>
    </div>

    <div class="col-auto text-end">
        <h4>External Resources</h4>
        <nav class="col">
          <a class="btn btn-outline-primary mb-1" role="button" href="/api">API docs</a>
          <a class="btn btn-outline-primary mb-1" role="button" href="http://130.251.11.11/skycam/index.php">AllSky zap</a>
          <!-- <a class="btn btn-outline-primary mb-1" role="button" href="http://ipcam.orsa.unige.net">Webcam</a> -->
          </nav>
    </div>

  </header>

  {% endblock header %}

  <main>
    {% block content %}

    <div class="row">

      <div class="col">
        <h3>Resources status</h3>

        <dl class="row">
          {% for key, value in data[0].items() %}
          <dt class="col-3">{{key}}</dt>
          <dd class="col-9">
            <span class="badge w-50
                         {%if value==True %} bg-success
                         {% elif value==None %} bg-secondary
                         {% elif value==False %} bg-danger
                         {% else %} text-dark
                         {% endif %}">
              {{value}}
            </span>
          </dd>
          {% endfor %}
        </dl>
      </div>

      <div class="col">
        <h3>Ports status</h3>

        <dl class="row">
          {% for key, value in data[1].items() %}
          <dt class="col-3">{{key}}</dt>
          <dd class="col-9">
            <span class="badge w-50
                         {%if value==True %} bg-success
                         {% elif value==None %} bg-secondary
                         {% elif value==False %} bg-danger
                         {% else %} text-dark
                         {% endif %}">
              {{value}}
            </span>
          </dd>
          {% endfor %}
        </dl>
      </div>

      <div class="col">
        <h3>Request tests</h3>

        <dl class="row">
          {% for key, value in data[2].items() %}
          <dt class="col-3">{{key}}</dt>
          <dd class="col-9">
            <span class="badge w-50
                         {%if value==True %} bg-success
                         {% elif value==None %} bg-secondary
                         {% elif value==False %} bg-danger
                         {% else %} text-dark
                         {% endif %}">
              {{value}}
            </span>
          </dd>
          {% endfor %}
        </dl>
      </div>

    </div>

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


  {% block footer %}

  <footer class="fixed-bottom mb-3 mx-2 overflow-hidden" style="height:250px">
    <figure class="card h-100 border rounded bg-white">
      <figcaption class="card-header">
        Log
        <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 %}


<script>
      var source = new EventSource('/web/sequencer/stream'); // in templates.py
      var ansi_up = new AnsiUp;
      source.onmessage = function(e) {
          //console.log(e.data)
          var line = e.data
          $("#stream-output").prepend(
              '<div>'+ansi_up.ansi_to_html(line)+'</div>'
          );
      }
</script>
  
