<!doctype html>
<html data-theme="light" class="snap-proximity">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, viewport-fit=cover"
    />
    <title>Browsertrix</title>
    <base href="/" />

    <script
      src="https://browser.sentry-cdn.com/5.5.0/bundle.min.js"
      crossorigin="anonymous"
    ></script>
    <meta name="theme-color" content="#ffffff" />
    <link rel="icon" href="/favicon.ico" sizes="32x32" />
    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
    <link rel="manifest" href="/manifest.webmanifest" />
    <script src="/extra.js"></script>
  </head>
  <body>
    <script>
      // Fetch API settings in parallel with dynamically loaded components
      window
        .fetch("/api/settings", {
          headers: { "Content-Type": "application/json" },
        })
        .then((resp) => resp.json())
        .then((settings) => {
          const app = document.querySelector("browsertrix-app");

          if (app && settings) {
            app.settings = settings;
          }
        })
        .catch(console.debug);
    </script>

    <browsertrix-app
      version="v<%= version %>-<%= commitHash %>"
      docsUrl="<%= docsUrl %>"
    ></browsertrix-app>

    <script>
      const isDev = "<%= environment %>" === "development";
      const dsn = "<%= glitchtip_dsn %>";

      if (isDev && dsn) {
        Sentry.init({
          dsn: dsn,
          release: "<%= gitBranch %> (<%= commitHash %>) v<%= version %>",
          environment: "<%= environment %>",
          debug: isDev,
          autoSessionTracking: false, // Turn off unsupported page/session tracking
        });
      }
    </script>
    <script>
      customElements.whenDefined("browsertrix-app").then(() => {
        // Load replay UI after browsertrix app is defined to prevent issues
        // with re-defining shoelace components
        const script = document.createElement("script");
        script.src = "/replay/ui.js";
        document.body.appendChild(script);
      });
    </script>
  </body>
</html>
