<!DOCTYPE html>
<meta charset="utf-8">
<title>Flask</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/favicon.ico">

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

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

  {% block content %}

  {% endblock content %}
              
  {% block footer %}
  <footer class="fixed-bottom text-muted bg-light">
    <small class="row m-2">
      <pre class="col" >
        <code id="stream-output" class="overflow-scroll"
               style="height:100px; display: flex; flex-direction:column-reverse;">
          Log messages
        </code></pre>
      <div class="col-1">
        <button class="btn btn-primary" onclick="$('#output').html('')">Clear</button>
      </div>
    </small>
  </footer>
  {% endblock footer %}
     
<script>

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

</script>
