<html lang="en">
  <head>
    <title>Price Tracker</title>
    <link rel="stylesheet" href="{{url_for('static', filename='style.css')}}" />
  </head>
  <body>
    <div>
      <div id="config-form"></div>
      <hr />
      <div id="products-form"></div>
      <hr />
      <button onclick="shutdownServer()">Shutdown Server</button>
    </div>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script
      src="https://unpkg.com/react@17/umd/react.production.min.js"
      crossorigin
    ></script>
    <script
      src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"
      crossorigin
    ></script>
    <script
      type="text/babel"
      src="{{url_for('static', filename='global.js')}}"
    ></script>
    <script
      type="text/babel"
      src="{{url_for('static', filename='config-form.js')}}"
    ></script>
    <script
      type="text/babel"
      src="{{url_for('static', filename='products-form.js')}}"
    ></script>

    <script type="text/babel">
      const shutdownServer = () => {
        request("/shutdown", {}, "POST").then(() =>
          window.close()
        );
      };
      ReactDOM.render(
        React.createElement(() => ConfigForm("{{config}}")),
        document.querySelector("#config-form")
      );
      ReactDOM.render(
        React.createElement(() => ProductsForm("{{products}}")),
        document.querySelector("#products-form")
      );
    </script>
  </body>
</html>
