{% extends "base_page.html" %}
{% block content %}

<style>
    #ws_actions {
        margin: 30px;
        border: 1px white solid;
        padding: 10px;
    }

    #ws_log {
        margin: 30px;
        border: 1px white solid;
        padding: 10px;
    }

    #ws_log .message {
        display: flex;
        margin-bottom: 10px;
    }

    #ws_log .message .type {
        font-style: italic;
        margin-right: 10px;
    }
</style>


<h2>WS Debug</h2>

<div id="ws_actions">
    <button onclick="connect()">Reconnect</button>
    <button onclick="disconnect()">Disconnect</button>
    <button onclick="clearLogs()">Clear logs</button>
    <span>State: <span id="state">DISCONNECTED</span></span>
</div>

<div id="ws_log">
    <div class="message">
        <div class="type">INFO</div>
        <div>Welcome!</div>
    </div>
</div>

<script src="/assets/ws_debug.js"></script>
{% endblock content %}