<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Sketch Diff Viewer Demo</title>
    <link
      rel="stylesheet"
      href="../../../node_modules/diff2html/bundles/css/diff2html.min.css"
    />
    <script
      type="module" src="../sketch-diff-view.ts"
    ></script>
    <style>
      body {
        font-family:
          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
          Arial, sans-serif;
        max-width: 1200px;
        margin: 0 auto;
        padding: 2rem;
      }

      h1 {
        color: #333;
        margin-bottom: 2rem;
      }

      .control-panel {
        margin-bottom: 2rem;
        padding: 1rem;
        background-color: #f0f0f0;
        border-radius: 4px;
      }

      input {
        padding: 0.5rem;
        border-radius: 4px;
        border: 1px solid #ccc;
        width: 300px;
      }

      button {
        padding: 0.5rem 1rem;
        background-color: #2196f3;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        margin-left: 1rem;
      }

      button:hover {
        background-color: #0d8bf2;
      }
    </style>

    <script>
      document.addEventListener("DOMContentLoaded", () => {
        const diffViewer = document.getElementById("diffViewer");
        const commitHashInput = document.getElementById("commitHash");
        const viewDiffButton = document.getElementById("viewDiff");
        let commit = false;
        viewDiffButton.addEventListener("click", () => {
          let diffContent = `diff --git a/sample.txt b/sample.txt
index 1111111..2222222 100644
--- a/sample.txt
+++ b/sample.txt
@@ -1,5 +1,5 @@
 This is a sample file
-This line will be removed
+This line is added as a replacement
 This line stays the same
-Another line to remove
+A completely new line
 The last line is unchanged`;
          if (commit) {
            // For demo purposes, generate fake diff based on commit hash
            diffContent = `diff --git a/file-${commit.substring(0, 5)}.txt b/file-${commit.substring(0, 5)}.txt
index 3333333..4444444 100644
--- a/file-${commit.substring(0, 5)}.txt
+++ b/file-${commit.substring(0, 5)}.txt
@@ -1,4 +1,6 @@
 File with commit: ${commit}
+This line was added in commit ${commit}
 This line exists in both versions
-This line was removed in commit ${commit}
+This line replaced the removed line
+Another new line added in this commit
 Last line of the file`;
          }
          diffViewer.diffText = diffContent;
          diffViewer.commitHash = commitHashInput.value.trim();
        });
      });
    </script>
  </head>
  <body>
    <h1>Sketch Diff Viewer Demo</h1>

    <div class="control-panel">
      <label for="commitHash"
        >Commit Hash (leave empty for unstaged changes):</label
      >
      <input type="text" id="commitHash" placeholder="Enter commit hash" />
      <button id="viewDiff">View Diff</button>
    </div>

    <sketch-diff-view id="diffViewer"></sketch-diff-view>
  </body>
</html>