<!-- templates/lona/frontend.html -->
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    {{ Lona.load_stylesheets() }}
    <link href="{{ Lona.load_static_file('lona/style.css') }}" rel="stylesheet">
    <link href="{{ Lona.settings.STATIC_URL_PREFIX }}/favicon.ico" type="image/x-icon" rel="icon">
  </head>
  <body>
    {% include "lona/header.html" %}
    <div id="lona"></div>
    {% include "lona/footer.html" %}
    {{ Lona.load_scripts() }}
    <script>
      window.addEventListener('load', () => {
        const lona_context = new Lona.LonaContext({
          target: '#lona',
          title: 'Lona',
          update_address_bar: true,
          update_title: true,
          follow_redirects: true,
          follow_http_redirects: true,
        });

        {% if Lona.settings.CLIENT_AUTO_RECONNECT %}
          const auto_reconnect = true;
        {% else %}
          const auto_reconnect = false;
        {% endif %}

        let first_connect = true;

        lona_context.add_connect_hook((lona_context) => {

          // reconnect
          // reload whole page in case static files changed
          if(!first_connect) {
            window.location = window.location;

            return;
          }

          // first connect
          first_connect = false;
        });

        // disconnect
        lona_context.add_disconnect_hook((lona_context) => {
          document.querySelector('#lona').innerHTML = `{% include "lona/disconnect-message.html" %}`;

          if(!auto_reconnect) {
            return;
          }

          setTimeout(() => {
            lona_context.reconnect({

              // we don't create a window and start a view on the server
              // since we reload the page once the client reconnects anyway
              create_window: false,
            });
          }, {{ Lona.settings.CLIENT_AUTO_RECONNECT_TIMEOUT }});
        });

        // waiting for server messages
        lona_context.add_view_timeout_hook((lona_context, lona_window) => {
          lona_window.set_html(`{% include "lona/waiting-for-server-message.html" %}`);
        });

        lona_context.add_input_event_timeout_hook((lona_context, lona_window) => {
          alert(`{% include "lona/waiting-for-server-message.html" %}`);
        });

        // custom hooks
        {% include "lona/frontend.js" %}

        // setup
        lona_context.setup();

        window['lona_context'] = lona_context;
      });
    </script>
  </body>
</html>
