{% extends 'base.html' %}
{% block header %}
<style>
td > input {
    width: 100%;
}
</style>
{% endblock %}

{% block content %}
<p>
Urejate ključe WireGuard s posebnimi dostopi.

<table class="keys">
<thead>
<th><th>Ključ<th>IP<th>IPv6<th>Naprava<th>Omrežja
<tbody>
</table>

<section>
<h1>Nov ključ</h1>
<form id="request">
<p>
<label for="name">Ime naprave</label><br>
<input type="text" id="name" name="name" pattern="[-._A-Za-z0-9 ]*" maxlength="32" placeholder="A-Z a-z 0-9 . _ - " />
<p>
<label for="networks">Omrežja</label><br>
<select id="networks" name="networks" multiple style="width: 20em;">
{% for network in ipsets %}
<option>{{ network }}
{% endfor %}
</select>
<p>
<button id="submit" type="submit">Ustvari ključ</button>
</form>

<section id="settings" style="display: none;">
<p>
Nastavitve za povezavo so izpisane spodaj. Za nov ključ osvežite to stran.

<section style="display: flex; align-items: center;">
<pre style="flex-grow: 3; margin: 0;"><a id="download" href="" style="float: right; padding: 0.5em;">Prenesi</a><code id="config"></code></pre>
<div id="qr" style="flex-grow: 1; text-align: center;"></div>
</section>

</section>
</section>

<script type="text/javascript" src="{{ url_for('static', filename='qrcode.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='wireguard.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='vpn.js') }}"></script>
<script type="text/javascript">
const endpoint = 'list-custom';
function update(keys) {
    const keytab = document.querySelector('table.keys > tbody');
    keytab.innerHTML = ''
    for (const key of keys) {
        const row = keytab.insertRow();
        row.insertCell().innerHTML = '<button onclick="delKey(\'' + key.key + '\');">✖</button>';
        row.insertCell().innerHTML = '<code>' + key.key + '</code>';
        row.insertCell().innerHTML = key.ip;
        row.insertCell().innerHTML = key.ip6 || '';
        row.insertCell().innerHTML = key.name;
        row.insertCell().innerHTML = key.networks;
    }
}
</script>
{% endblock %}