{% extends "layout.html" %}

{% block head %}
<script>
var socket = new WebSocket("ws://" + location.host + "/v2/projects/{{project.id}}/notifications/ws");
socket.onopen = function (event) {
    document.getElementById("notifications").innerText = "Connected";
};

socket.onmessage = function (event) {
    document.getElementById("notifications").innerText = event.data + "\n" + document.getElementById("notifications").innerText;
};

</script>
{% endblock %}


{% block body %}
<h1>
    {{project.name}} 
</h1>
The purpose of this page is to help for GNS3 debug. This can be dropped
in futur GNS3 versions.

<h2>VMs</h2>
<table border="1">
    <tr>
        <th>Name</th>
        <th>ID</td>
        <th>Compute</th>
        <th>Console</th>
    </tr>
{% for vm in project.vms.values() %}
<tr>
    <td>{{vm.name}}</td>
    <td>{{vm.id}}</td>
    <td>{{vm.compute.id}}</td>
    <td><a href="{{vm.console_type}}://{{vm.host}}:{{vm.console}}">Console</a>
</tr>
{% endfor %}
</table>

<h2>Links</h2>
<table border="1">
    <tr>
        <th>ID</td>
        <th>Capture</td>
    </tr>
{% for link in project.links.values() %}
<tr>
    <td>{{link.id}}</td>
    <td>{{link.capturing}}</td>
</tr>
{% endfor %}
</table>

<h2>Notifications</h2>
<div id="notifications">
</div>
{%endblock%}