@(
  title: String,
  jsFileLocation: String,
  presenceJsLocation: Option[String],
  pinboardJsLocation: Option[String],
  clientConfigJson: String,
  isHotReloading: Boolean,
  csrf: String,
)

@layout(title, isHotReloading, csrf) {
    <div id="react-mount" class="main">
        <h1>Loading...</h1>
    </div>

    <script type="application/json" id="config">
        @Html(clientConfigJson)
    </script>

    @presenceJsLocation.map { presenceJs =>
      <script src="@presenceJs"></script>
    }
    <script type="module">window.global = window</script>

    @if(isHotReloading) {
        <!-- Connect directly to Vite dev server in development -->
        <!-- See https://vitejs.dev/guide/backend-integration.html -->
      <script type="module">
        import RefreshRuntime from 'http://localhost:5173/@@react-refresh'

        RefreshRuntime.injectIntoGlobalHook(window)
        window.$RefreshReg$ = () => {
        }
        window.$RefreshSig$ = () => (type) => type
        window.__vite_plugin_react_preamble_installed__ = true
      </script>
      <script type="module" src="http://localhost:5173/@@vite/client"></script>
      <script type="module" src="http://localhost:5173/public/video-ui/src/app.jsx"></script>
    } else {
      <link rel="stylesheet" type="text/css" href="/build/app.css">
      <script type="module" src="@jsFileLocation"></script>
    }

    @pinboardJsLocation.map { pinboardJs =>
      <script async src="@pinboardJs" ></script>
    }

}