{% extends 'admin/kmuhelper/base_site.html' %}

{% load static kmuhelper_tags %}

{% block title %}Build Info | KMUHelper{% endblock %}

{% block breadcrumbs %}
{% endblock %}

{% block branding %}
    {% kmuhelper_branding module_name='settings' %}
{% endblock %}

{% block content_title %}
    <h1>Build info</h1>
{% endblock %}

{% block content %}

    <style>
        table#result_list td {
            white-space: pre;
        }
    </style>

    <p style="margin-top: 1.5em; margin-bottom: 1.5em;">
        Note: This might take a while to load.
    </p>

    <div>
        <table>
            <thead>
            <tr>
                <th>Modul</th>
                <th>Current</th>
                <th>Latest</th>
                <th>UpToDate</th>
            </tr>
            </thead>
            <tbody id="versions-body">
            <tr id="versions-loading">
                <td colspan=4>Loading...</td>
            </tr>
            </tbody>
        </table>

        <script>
            const url_yes = "{% static 'admin/img/icon-yes.svg' %}";
            const url_no = "{% static 'admin/img/icon-no.svg' %}";
            const url_unknown = "{% static 'admin/img/icon-unknown.svg' %}";

            const vbody = document.getElementById("versions-body");
            const vloading = document.getElementById("versions-loading");

            try {
                fetch("{% url 'kmuhelper:api-versions' %}").then(res => {
                    res.json().then(json => {
                        for ([name, v] of Object.entries(json.versions)) {
                            const tr = document.createElement("tr");
                            const td1 = document.createElement("td");
                            const td2 = document.createElement("td");
                            const td3 = document.createElement("td");
                            const td4 = document.createElement("td");
                            const img = document.createElement("img");

                            td1.innerHTML = name;
                            td2.innerHTML = v.current;
                            td3.innerHTML = v.latest;
                            if (v.uptodate === null) {
                                img.src = url_unknown;
                            } else if (v.uptodate === false) {
                                img.src = url_no;
                            } else if (v.uptodate === true) {
                                img.src = url_yes;
                            }

                            vbody.appendChild(tr);
                            tr.appendChild(td1);
                            tr.appendChild(td2);
                            tr.appendChild(td3);
                            tr.appendChild(td4);
                            td4.appendChild(img);
                        }
                        vloading.remove();
                    });
                });
            } catch (e) {
                vloading.firstChild().innerHTML = "Error!"
            }
        </script>
    </div>

{% endblock %}