(function () {
  "use strict";

  window.CO_ServerDetails = {
    render: function (root, state) {
      var activePane = root.querySelector('.co-tab-pane[data-pane="' + state.activeTab + '"]');
      var el = activePane && activePane.querySelector(".co-preview-area");
      if (!el) return;

      var server = state.servers[state.selectedServerIndex];
      if (!server || !server.previewImage) {
        el.innerHTML = "";
        el.classList.add("co-preview-hidden");
        return;
      }

      el.classList.remove("co-preview-hidden");

      var stats = [
        server.worldspace,
        server.mode,
        server.players + "/" + server.maxPlayers,
        server.ping + " ms"
      ].filter(Boolean).join(" \u00b7 ");

      el.innerHTML =
        '<div class="co-preview"><img src="' + escapeAttr(server.previewImage) + '" alt="Preview"></div>' +
        '<div class="co-preview-caption">' +
        '<div class="co-preview-name">' + escapeHtml(server.name) + "</div>" +
        '<div class="co-preview-stats">' + escapeHtml(stats) + "</div>" +
        "</div>";
    }
  };

  function escapeHtml(value) {
    return String(value)
      .replace(/&/g, "&amp;")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;");
  }

  function escapeAttr(value) {
    return String(value).replace(/"/g, "&quot;");
  }
})();