{% extends 'account_layout.html' %}
{% load static %}
{% load i18n %}

{% block title %}WireGuard{% endblock %}
{% block account_content %}
    <h2>WireGuard</h2>

    <p>
        {% blocktrans trimmed %}
        This page lets you manage WireGuard peers.
        Each can only have one concurrent connection.
        {% endblocktrans %}
    </p>

    <div class="page-wg-title">
        <h3>
            {% trans "Your Devices" %} <span>{{ keys|length }}/{{ config.WIREGUARD_MAX_PEERS }}</span>
        </h3>
        <p>
            <a href="{% url 'lambdainst:wireguard_new' %}" class="pure-button pure-button-primary"
                    {% if not can_create_key %}disabled{% endif %}
            >{% trans "New Device" %}</a>
        </p>

    </div>

    {% if keys %}
    <table class="pure-table pure-table-bordered page-wg-table">
        <thead>
            <tr>
                <td>{% trans "Key" %}</td>
                <td>{% trans "Name" %}</td>
                <td colspan="4">{% trans "Actions" %}</td>
            </tr>
        </thead>
        {% for peer in keys %}
            <tr>
                <td>
                    <span class="wireguard-key">{{ peer.public_key }}</span>
                </td>
                <td class="page-wg-table__name">
                    {{peer.name}}
                </td>
                <td class="page-wg-table__action">
                    <a href="{% url 'django_lcore:wireguard_dl' %}?id={{peer.id}}" title="{% trans 'Download' %}">
                        <i class="fa fa-download"></i>
                    </a>
                </td>
                <td class="page-wg-table__action page-wg-table__action--more">
                    <a href="#" onclick="showWgCode(event, '{% url 'django_lcore:wireguard_dl' %}?id={{peer.id}}');" title="{% trans 'Show QR Code' %}">
                        <i class="fa fa-qrcode"></i>
                    </a>
                </td>
                <td class="page-wg-table__action page-wg-table__action--more">
                    <a href="#" onclick="toggleWgEdit(event, {{ peer.id }});" title="{% trans 'Edit' %}">
                        <i class="fa fa-pencil"></i>
                    </a>
                </td>
                <td class="page-wg-table__action page-wg-table__action--more">
                    <form action="?" method="post">
                        {% csrf_token %}
                        <input type="hidden" name="action" value="delete_key" />
                        <input type="hidden" name="peer_id" value="{{ peer.id }}" />
                        <a href="#" onclick="deleteWgKey(event);" title="{% trans 'Delete' %}">
                            <i class="fa fa-trash"></i>
                        </a>
                    </form>
                </td>
            </tr>
        {% endfor %}
    </table>
    {% endif %}

<script src="{% static 'js/qrcode.min.js' %}"></script>
<script>
    function showWgCode(event, url) {
        event.preventDefault();

        var req = new XMLHttpRequest();

        var bg = document.createElement("div");
        bg.classList.add("page-wg-shadow");
        bg.onclick = function() {
            req.abort();
            bg.remove();
        };
        document.body.appendChild(bg);

        var spinner = document.createElement("div");
        spinner.classList.add("page-wg-shadow__loading");
        bg.appendChild(spinner);

        var el = document.getElementById("qrcode");

        req.addEventListener("load", function(e) {
            spinner.remove();
            console.log(req.response);
            new QRCode(bg, {
                text: req.response,
                width: 256,
                height: 256,
                colorDark: "#000000",
                colorLight: "#ffffff",
            });
        });
        req.open("GET", url);
        req.send();
    }
    function deleteWgKey(event) {
        event.preventDefault();
        event.target.parentNode.parentNode.submit();
    }
    function toggleWgEdit(event, peer_id) {
        event.preventDefault();

        const edit_class = 'page-wg-table__name--edit';

        const tr = event.target.parentNode.parentNode.parentNode;
        const nameTd = tr.querySelector(".page-wg-table__name");

        // press again to save (trigger form submit)
        if (tr.classList.contains(edit_class)) {
            const nameForm = nameTd.querySelector("form");
            if (nameForm) {
                nameForm.submit();
            }
            return;
        }

        function addField(form, key, value) {
            const f = document.createElement("input");
            f.type = "hidden";
            f.name = key;
            f.value = value;
            form.appendChild(f);
        }

        const currentName = nameTd.innerText;
        nameTd.innerHTML = "";

        const nameForm = document.createElement("form");
        nameForm.method = "post";

        addField(nameForm, "peer_id", peer_id);
        addField(nameForm, "action", "set_name");
        addField(nameForm, "csrfmiddlewaretoken", "{{ csrf_token }}");

        const nameInput = document.createElement("input");
        nameInput.type = "text";
        nameInput.name = "name";
        nameInput.value = currentName;
        nameInput.maxLength = 21;
        nameForm.appendChild(nameInput);

        const nameSubmit = document.createElement("input");
        nameSubmit.type = "submit";
        nameSubmit.value = "{% trans "Save" %}";
        nameForm.appendChild(nameSubmit);

        nameTd.appendChild(nameForm);
    }
    function saveWgName(tr, name) {

    }
</script>

{% endblock %}