{{ define "content" }}

    <p>
        The Mesh Configuration Protocol (MCP) client state for this process.
    </p>

    <style>
    .metadata-table-cell {
        margin: 0;
        padding: 0;
    }

    .metadata-table {
        margin: 0;
        padding: 0;
    }
    </style>

    <div>
        <table>
            <thead>
            <tr>
                <th colspan="2">Client Info</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>ID</td>
                <td>{{.ID}}</td>
            </tr>
            <tr>
                <td>Metadata</td>
                <td class="metadata-table-cell">
                    <table class="metadata-table">
                    {{ range $key, $value := .Metadata }}
                    <tr>
                        <td>{{$key}}</td>
                        <td>{{$value}}</td>
                    {{end}}
                    </table>
                </td>
            </tr>
            </tbody>
        </table>
    </div>

    <div>
        <table>
            <thead>
            <tr>
                <th>Supported Collections</th>
            </tr>
            </thead>
            <tbody>
            {{ range $value := .Collections }}
            <tr>
                <td>{{$value}}</td>
            {{end}}
            </tbody>
        </table>
    </div>

    <div>
        <table id="recent-requests-table">
            <thead>
            <tr>
                <th colspan="4">Recent Requests</th>
            </tr>
            <tr>
                <th>Time</th>
                <th>Collection</th>
                <th>Acked</th>
                <th>Nonce</th>
            </tr>
            </thead>

            <tbody>

            </tbody>
        </table>
    </div>
{{ template "last-refresh" .}}

<script>
    "use strict";

    function refreshRecentRequests() {
        var url = window.location.protocol + "//" + window.location.host + "/configj/";

        var ajax = new XMLHttpRequest();
        ajax.onload = onload;
        ajax.onerror = onerror;
        ajax.open("GET", url, true);
        ajax.send();

        function onload() {
            if (this.status == 200) { // request succeeded
                var data = JSON.parse(this.responseText);

                var table = document.getElementById("recent-requests-table");

                var tbody = document.createElement("tbody");
                for (var i = 0; i < data.LatestRequests.length; i++) {
                    var row = document.createElement("tr");

                    var c1 = document.createElement("td");
                    c1.innerText = data.LatestRequests[i].Time;
                    row.appendChild(c1);

                    var c2 = document.createElement("td");
                    c2.innerText = data.LatestRequests[i].Request.Collection;
                    row.appendChild(c2);


                    var c3 = document.createElement("td");
                    if (data.LatestRequests[i].Request.ErrorDetail === null) {
                        c3.innerText = "true"
                    } else {
                        c3.innerText = "false"
                    }
                    row.appendChild(c3);

                    var c4 = document.createElement("td");
                    c4.innerText = data.LatestRequests[i].Request.ResponseNonce;
                    row.appendChild(c4);

                    tbody.appendChild(row)
                }
                table.removeChild(table.tBodies[0]);
                table.appendChild(tbody);

                updateRefreshTime();
            }
        }

        function onerror(e) {
            console.error(e);
        }
    }

    refreshRecentRequests();
    window.setInterval(refreshRecentRequests, 1000);

</script>

{{ end }}
