{% extends 'base.html' %}
{% block title %}Event Log{% endblock %}
{% block styles %}
{{super()}}
<!-- Logs CSS -->
<link rel="stylesheet" href="{{url_for('web.static', filename='css/log.css')}}">
{% endblock %}

{% block content %}
<table class="table table-sm border border-light sticky-header">
    <thead class="bg-light">
        <tr>
            <th class="w-15" scope="col">time</th>
            <th class="w-15" scope="col">event id</th>
            <th class="w-15" scope="col">node</th>
            <th class="w-15" scope="col">sensor</th>
            <th class="w-40" scope="col" colspan=2>
                <div class="d-flex justify-content-between">
                    <div>changes</div>
                    <div class="font-weight-light">
                        <form>
                            <input type="checkbox" id="followLogs" checked /> follow
                            <!-- <label class="font-weight-light nopadding" for="followLogs">Follow</label> -->
                        </form>
                    </div>
                </div>
            </th>
        </tr>
    </thead>
    <tbody id="log">
        <tr>
            <td class="text-center" colspan="6">
                <div class="spinner-border mt-5 mr-1" role="status">
                    <span class="sr-only">spinner</span>
                </div>
                loading...
            </td>
        </tr>
    </tbody>
</table>

<span id="log-end"></span>

{% endblock %}

{% block script %}
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/3.0.1/socket.io.min.js"></script>
<script type="text/javascript" charset="utf-8" src="{{ url_for('web.static', filename='js/shared.js') }}"> </script>
<script type="text/javascript" charset="utf-8" src="{{ url_for('web.static', filename='js/events.js') }}"> </script>
{% endblock %}