<html>
  <head>
    <title>sketch-view-mode-select demo</title>
    <link rel="stylesheet" href="demo.css" />

    <script type="module" src="../sketch-view-mode-select.ts"
    ></script>

    <script>
      document.addEventListener("DOMContentLoaded", () => {
        const viewModeSelect = document.querySelector(
          "sketch-view-mode-select",
        );
        const msgDiv = document.querySelector("#selected-mode");
        msgDiv.innerText = `selected mode: ${viewModeSelect.activeMode}`;

        console.log("viewModeSelect: ", viewModeSelect);
        viewModeSelect.addEventListener("view-mode-select", (evt) => {
          console.log("view mode change event: ", evt);
          const msgDiv = document.querySelector("#selected-mode");
          msgDiv.innerText = `selected mode: ${evt.detail.mode}`;
          viewModeSelect.activeMode = evt.detail.mode;
        });
      });
    </script>
  </head>
  <body>
    <h1>sketch-view-mode-select demo</h1>

    <sketch-view-mode-select></sketch-view-mode-select>
    <div id="selected-mode"></div>
  </body>
</html>