<!doctype html>
<html>
  <head>
    <title>Sketch System Prompt Debug</title>
    <style>
      body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        margin: 40px;
      }
      h1 {
        color: #333;
      }
      .prompt-container {
        background: #f8f9fa;
        border: 1px solid #e9ecef;
        border-radius: 6px;
        padding: 20px;
        margin: 20px 0;
      }
      .prompt-content {
        background: #ffffff;
        border: 1px solid #d0d7de;
        border-radius: 4px;
        padding: 16px;
        font-family: "SF Mono", Monaco, monospace;
        font-size: 13px;
        line-height: 1.5;
        white-space: pre-wrap;
        word-wrap: break-word;
        max-height: 70vh;
        overflow-y: auto;
      }
      .summary {
        background: #e6f3ff;
        border-left: 4px solid #0366d6;
        padding: 16px;
        margin-bottom: 30px;
      }
      .copy-button {
        background: #0366d6;
        color: white;
        border: none;
        padding: 8px 16px;
        border-radius: 4px;
        cursor: pointer;
        margin-bottom: 10px;
        font-size: 12px;
      }
      .copy-button:hover {
        background: #0250a3;
      }
      .stats {
        font-size: 0.9em;
        color: #656d76;
        margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <h1>Sketch System Prompt Debug</h1>
    <div class="stats">
      <strong>Length:</strong> {{.Length}} characters |
      <strong>Lines:</strong> {{.Lines}}
    </div>
    <div class="prompt-container">
      <button class="copy-button" onclick="copyToClipboard()">
        Copy to Clipboard
      </button>
      <div class="prompt-content" id="prompt-content">{{.SystemPrompt}}</div>
    </div>
    <script>
      function copyToClipboard() {
        const content = document.getElementById("prompt-content").textContent;
        navigator.clipboard
          .writeText(content)
          .then(() => {
            const button = document.querySelector(".copy-button");
            const originalText = button.textContent;
            button.textContent = "Copied!";
            setTimeout(() => {
              button.textContent = originalText;
            }, 2000);
          })
          .catch((err) => {
            alert("Failed to copy to clipboard");
          });
      }
    </script>
  </body>
</html>