{{ define "content" }}

    <p>
        The Mesh Configuration Protocol (MCP) server state for this process. MCP can serve multiple different types of snapshots to different clients.
    </p>

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

    .metadata-table {
        margin: 0;
        padding: 0;
    }

    .modal-dialog-content {
        background-color: #5a5a5a;
    }
    .modal-dialog-content-body {
        white-space: pre-wrap;
        width: 500px;
        word-break: break-all;
    }
    .unsync_error {
        background-color: red;
    }
    </style>

    <nav class="navbar navbar-expand-lg navbar-dark">
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                {{ range $value := .Groups }}
                    <li class="nav-item" id="nav-{{$value}}">
                        <a class="nav-link" href="#" onclick="refreshRecentRequests('{{$value}}')">{{$value}}</a>
                    </li>
                {{end}}
            </ul>
        </div>
    </nav>

    <div class="modal fade" id="mcpResourceModal" tabindex="-1" role="dialog" aria-labelledby="mcpResourceModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content modal-dialog-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="mcpResourceModalLabel"></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body modal-dialog-content-body" id="mcpResourceBody">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <div>
        <table id="recent-requests-table">
            <thead>
            <tr>
                <th>Collection</th>
                <th>Version</th>
                <th>Resources</th>
                <th>Connections</th>
            </tr>
            </thead>

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

<script>
    "use strict";

    var defaultGroup = '{{index .Groups 0}}';

    function resetActiveTab(tabId) {
        var tabs = document.getElementsByClassName("nav-item");
        tabId = "nav-" + tabId;
        for (var i = 0; i < tabs.length; i++) {
            if (tabs[i].id === tabId) {
                tabs[i].className = "nav-item active";
            } else {
                tabs[i].className = "nav-item";
            }
        }
    }

    function refreshRecentRequests(group) {
        //reset the default group to ensure refresh the desired data
        defaultGroup = group

        //reset the selected tab
        resetActiveTab(group)

        var url = window.location.protocol + "//" + window.location.host + "/configj?group="+group;

        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");

                if (null != data.Snapshots) {
                    for (var i = 0; i < data.Snapshots.length; i++) {
                        var row = document.createElement("tr");

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

                        var c2 = document.createElement("td");
                        c2.innerText = data.Snapshots[i].Version;
                        row.appendChild(c2);

                        var c3 = document.createElement("td");
                        var c3_ul = document.createElement("ul");
                        for (var j = 0; j < data.Snapshots[i].Names.length; j++) {
                            var c3_li = document.createElement("li");
                            var c3_li_a = document.createElement("a");
                            c3_li_a.dataId = data.Snapshots[i].Collection;
                            c3_li_a.href = "#";
                            c3_li_a.onclick = function(e) {
                                popupResource(group, this.dataId, this.innerText);
                                e.preventDefault();
                            }
                            c3_li_a.innerText =  data.Snapshots[i].Names[j];
                            c3_li.appendChild(c3_li_a);
                            c3_ul.appendChild(c3_li);
                        }
                        c3.appendChild(c3_ul)
                        row.appendChild(c3);

                        var c4 = document.createElement("td");
                        var c4_ul = document.createElement("ul");
                        for (var addr in data.Snapshots[i].Synced) {
                            var c4_li = document.createElement("li");
                            c4_li.innerText =  addr + " " + (data.Snapshots[i].Synced[addr] ? "Synced": "Unsynced");
                            if (!data.Snapshots[i].Synced[addr]) {
                                c4_li.className = "unsync_error";
                            } 
                            c4_ul.appendChild(c4_li);
                        }
                        c4.appendChild(c4_ul)
                        row.appendChild(c4);

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

                updateRefreshTime();
            }
        }

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

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

    function popupResource(group, collection, name) {

        var url = window.location.protocol + "//" + window.location.host + "/configj/resource?group="+group+"&collection="+collection+"&name="+name;

        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);

                document.getElementById("mcpResourceModalLabel").innerText = name;
                document.getElementById("mcpResourceBody").innerText = JSON.stringify(data, null, 4);
                $("#mcpResourceModal").modal()
            }
        }

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

</script>

{{ end }}
