<!-- htmlhint doctype-first:false -->
<div class="space-y-6">
  <!-- Application Overview Card (Similar to System Summary) -->
  <div
    class="bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg shadow-lg p-6 text-white"
  >
    <h2 class="text-2xl font-bold mb-4 flex items-center">
      <svg
        class="h-8 w-8 mr-3"
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
        aria-hidden="true"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"
        />
      </svg>
      Application Information
    </h2>

    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
      <div class="text-center">
        <div class="text-2xl font-bold">{{ payload.app.name }}</div>
        <div class="text-blue-100 text-sm">Application</div>
      </div>
      <div class="text-center">
        <div class="text-2xl font-bold">{{ payload.host }}</div>
        <div class="text-blue-100 text-sm">Host</div>
      </div>
      <div class="text-center">
        <div class="text-2xl font-bold">
          {{ payload.app.mcp_protocol_version }}
        </div>
        <div class="text-blue-100 text-sm">MCP Protocol</div>
      </div>
      <div class="text-center">
        <div class="text-2xl font-bold">{{ payload.uptime_seconds }}s</div>
        <div class="text-blue-100 text-sm">Uptime</div>
      </div>
    </div>

    {% if payload.app.version %}
    <div class="mt-4 pt-4 border-t border-blue-300">
      <div class="text-center">
        <div class="text-lg font-medium">Version</div>
        <div class="text-blue-100 font-mono text-sm">
          {{ payload.app.version }}
        </div>
      </div>
    </div>
    {% endif %}
  </div>

  <!-- Platform & Runtime Card -->
  <div class="bg-white rounded-lg shadow p-6 dark:bg-gray-800">
    <h3 class="text-lg font-medium mb-4 dark:text-gray-200 flex items-center">
      <svg
        class="h-6 w-6 mr-2 text-indigo-600"
        fill="none"
        stroke="currentColor"
        viewBox="0 0 24 24"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"
        ></path>
      </svg>
      Platform &amp; Runtime
    </h3>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
      <div class="bg-gray-50 rounded p-4 dark:bg-gray-700">
        <div class="text-sm font-medium text-gray-500 dark:text-gray-400">
          Python Version
        </div>
        <div class="text-lg font-semibold text-gray-900 dark:text-gray-100">
          {{ payload.platform.python }}
        </div>
      </div>
      <div class="bg-gray-50 rounded p-4 dark:bg-gray-700">
        <div class="text-sm font-medium text-gray-500 dark:text-gray-400">
          FastAPI Version
        </div>
        <div class="text-lg font-semibold text-gray-900 dark:text-gray-100">
          {{ payload.platform.fastapi }}
        </div>
      </div>
      <div class="bg-gray-50 rounded p-4 dark:bg-gray-700">
        <div class="text-sm font-medium text-gray-500 dark:text-gray-400">
          Operating System
        </div>
        <div class="text-lg font-semibold text-gray-900 dark:text-gray-100">
          {{ payload.platform.os }}
        </div>
      </div>
    </div>
  </div>

  <!-- Services Status Card -->
  <div class="bg-white rounded-lg shadow p-6 dark:bg-gray-800">
    <h3 class="text-lg font-medium mb-4 dark:text-gray-200 flex items-center">
      <svg
        class="h-6 w-6 mr-2 text-indigo-600"
        fill="none"
        stroke="currentColor"
        viewBox="0 0 24 24"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01"
        ></path>
      </svg>
      Services Status
    </h3>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
      <!-- Database Status -->
      <div
        class="border rounded-lg p-4 {% if payload.database.reachable %}border-green-200 bg-green-50 dark:border-green-700 dark:bg-green-900/20{% else %}border-red-200 bg-red-50 dark:border-red-700 dark:bg-red-900/20{% endif %}"
      >
        <div class="flex items-center justify-between">
          <div>
            <h4
              class="font-medium {% if payload.database.reachable %}text-green-800 dark:text-green-300{% else %}text-red-800 dark:text-red-300{% endif %}"
            >
              Database
            </h4>
            <p
              class="text-sm {% if payload.database.reachable %}text-green-600 dark:text-green-400{% else %}text-red-600 dark:text-red-400{% endif %}"
            >
              {{ payload.database.dialect }}
            </p>
          </div>
          <div class="flex items-center">
            {% if payload.database.reachable %}
            <svg
              class="h-8 w-8 text-green-500"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
              ></path>
            </svg>
            {% else %}
            <svg
              class="h-8 w-8 text-red-500"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
              ></path>
            </svg>
            {% endif %}
          </div>
        </div>
        <div class="mt-2">
          <span
            class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {% if payload.database.reachable %}bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-200{% else %}bg-red-100 text-red-800 dark:bg-red-800 dark:text-red-200{% endif %}"
          >
            {% if payload.database.reachable %}✅ Reachable{% else %}❌
            Unreachable{% endif %}
          </span>
        </div>
      </div>

      <!-- Redis Status -->
      <div
        class="border rounded-lg p-4 {% if payload.redis.available %}border-green-200 bg-green-50 dark:border-green-700 dark:bg-green-900/20{% else %}border-red-200 bg-red-50 dark:border-red-700 dark:bg-red-900/20{% endif %}"
      >
        <div class="flex items-center justify-between">
          <div>
            <h4
              class="font-medium {% if payload.redis.available %}text-green-800 dark:text-green-300{% else %}text-red-800 dark:text-red-300{% endif %}"
            >
              Redis
            </h4>
            <p
              class="text-sm {% if payload.redis.available %}text-green-600 dark:text-green-400{% else %}text-red-600 dark:text-red-400{% endif %}"
            >
              Cache Service
            </p>
          </div>
          <div class="flex items-center">
            {% if payload.redis.available %}
            <svg
              class="h-8 w-8 text-green-500"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
              ></path>
            </svg>
            {% else %}
            <svg
              class="h-8 w-8 text-red-500"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
              ></path>
            </svg>
            {% endif %}
          </div>
        </div>
        <div class="mt-2">
          <span
            class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {% if payload.redis.available %}bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-200{% else %}bg-red-100 text-red-800 dark:bg-red-800 dark:text-red-200{% endif %}"
          >
            {% if payload.redis.available %}✅ Available{% else %}❌ Not
            Available{% endif %}
          </span>
        </div>
      </div>
    </div>
  </div>

  <!-- System Resources Card -->
  <div class="bg-white rounded-lg shadow p-6 dark:bg-gray-800">
    <h3 class="text-lg font-medium mb-4 dark:text-gray-200 flex items-center">
      <svg
        class="h-6 w-6 mr-2 text-indigo-600"
        fill="none"
        stroke="currentColor"
        viewBox="0 0 24 24"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
        ></path>
      </svg>
      System Resources
    </h3>
    <div class="space-y-4">
      <!-- CPU Info -->
      <div
        class="flex justify-between items-center p-3 bg-gray-50 rounded dark:bg-gray-700"
      >
        <span class="text-gray-600 dark:text-gray-400">CPU:</span>
        <span class="font-medium dark:text-gray-200"
          >{{ payload.system.cpu_count }} × {{ payload.system.cpu_freq_mhz }}
          MHz</span
        >
      </div>

      <!-- Memory Info -->
      <div
        class="flex justify-between items-center p-3 bg-gray-50 rounded dark:bg-gray-700"
      >
        <span class="text-gray-600 dark:text-gray-400">Memory:</span>
        <span class="font-medium dark:text-gray-200"
          >{{ "{:.1f}".format(payload.system.mem_used_mb) }} / {{
          payload.system.mem_total_mb }} MB</span
        >
      </div>

      <!-- Disk Info -->
      <div
        class="flex justify-between items-center p-3 bg-gray-50 rounded dark:bg-gray-700"
      >
        <span class="text-gray-600 dark:text-gray-400">Disk:</span>
        <span class="font-medium dark:text-gray-200"
          >{{ "{:.1f}".format(payload.system.disk_used_gb) }} / {{
          "{:.1f}".format(payload.system.disk_total_gb) }} GB</span
        >
      </div>

      <!-- Boot Time -->
      <div
        class="flex justify-between items-center p-3 bg-gray-50 rounded dark:bg-gray-700"
      >
        <span class="text-gray-600 dark:text-gray-400">Boot Time:</span>
        <span class="font-medium dark:text-gray-200"
          >{{ payload.system.boot_time }}</span
        >
      </div>
    </div>
  </div>

  <!-- Raw JSON Data Card: hide for now -->
  <!-- <div class="bg-white rounded-lg shadow p-6 dark:bg-gray-800">
    <div class="flex justify-between items-center mb-4">
      <h3 class="text-lg font-medium dark:text-gray-200 flex items-center">
        <svg class="h-6 w-6 mr-2 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
        </svg>
        Raw JSON Data
      </h3>
      <button
        class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 transition-colors"
        onclick="copyJsonToClipboard('json-data')">
        <svg class="h-4 w-4 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
        </svg>
        Copy JSON
      </button>
    </div>

    <div class="bg-gray-100 dark:bg-gray-900 rounded-md overflow-hidden">
      <div class="max-h-80 overflow-auto">
        <pre id="json-data" class="p-4 text-sm text-gray-800 dark:text-gray-300 whitespace-pre-wrap break-words font-mono">{{ payload | tojson(indent=2) }}</pre>
      </div>
    </div>
  </div> -->
</div>

<script>
  /**
   * Copy the innerText of the element with id sourceId to the clipboard.
   * Uses the existing global function if available, otherwise defines a local one.
   */
  function copyJsonToClipboard(sourceId = "json-data") {
    // Try to use the global function if it exists
    if (window.copyJsonToClipboard && sourceId !== "json-data") {
      return window.copyJsonToClipboard(sourceId);
    }

    const el = document.getElementById(sourceId);
    if (!el) {
      console.warn('[copyJsonToClipboard] sourceId "%s" not found', sourceId);
      return;
    }

    navigator.clipboard
      .writeText(el.innerText)
      .then(() => {
        // Show success message using the existing function if available
        if (window.showSuccessMessage) {
          window.showSuccessMessage("JSON copied to clipboard!");
        } else {
          console.log("JSON copied to clipboard!");
          // Fallback visual feedback
          const button = document.querySelector(
            '[onclick*="copyJsonToClipboard"]',
          );
          if (button) {
            const originalText = button.innerHTML;
            button.innerHTML =
              '<svg class="h-4 w-4 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>Copied!';
            button.classList.add("bg-green-600");
            button.classList.remove("bg-indigo-600");
            setTimeout(() => {
              button.innerHTML = originalText;
              button.classList.remove("bg-green-600");
              button.classList.add("bg-indigo-600");
            }, 2000);
          }
        }
      })
      .catch((err) => {
        console.error("Failed to copy JSON:", err);
        if (window.showErrorMessage) {
          window.showErrorMessage("Failed to copy JSON: " + err.message);
        } else {
          alert("Failed to copy JSON: " + err);
        }
      });
  }

  // Only expose globally if not already defined
  if (!window.copyJsonToClipboard) {
    window.copyJsonToClipboard = copyJsonToClipboard;
  }
</script>
