<!DOCTYPE html>
<html>
<head>
  {% block head %}
    <title>Appyter</title>
  {% endblock %}
  {% block style %}
    <link rel="stylesheet" href="{{ url_for('static', filename='css/default.css') }}" />
  {% endblock %}
  {% block script_head %}
    <script>
      window._config = {
        STATIC_URL: {{ url_for('static', filename='')|jsonify }},
      }
    </script>
    <script src="{{ url_for('static', filename='js/lib/requirejs/require.js') }}"></script>
    <script>
      require.config({
        paths: {
          'jquery': {{ url_for('static', filename='js/lib/jquery/jquery.min')|jsonify }},
          'socketio': {{ url_for('static', filename='js/lib/socket.io/socket.io.min')|jsonify }},
        },
        shim: {
          'socketio': {
            exports: 'io'
          },
        },
        waitSeconds: 200,
      })
      define('socket', ['socketio'], function (io) {
        return io({ path: {{ join_routes(_config.PREFIX, 'socket.io')|jsonify }} })
      })
      define('svelte', function () {
        return {
          render: function (self, file, props) {
            require([file], function (Component) {
              Object.assign(props, { window: window })
              while (self.children.length > 0) self.children[0].remove()
              var component = new Component.default({
                target: self,
                props: props,
              })
              self.classList.remove('loading')
            }, function (err) {
              while (self.children.length > 0) self.children[0].remove()
              var el = document.createElement('div')
              el.setAttribute('class', 'alert alert-danger')
              el.textContent = err.toString()
              self.append(el)
            })
          }
        }
      })
    </script>
  {% endblock %}
</head>
<body>
  {% block header %}{% endblock %}
  {% block body %}{% endblock %}
  {% block footer %}{% endblock %}
  {% block script %}
    {% if _config.DEBUG %}
    <script>
      require(['socket'], function (socket) {
        var first_connect = true
        socket.on('connect', function () {
          if (first_connect === true) {
            console.debug('connected')
            first_connect = false
          } else {
            window.location.reload()
          }
        })
        socket.on('livereload', function (data) {
          console.debug('livereload')
          window.location.reload()
        })
      })
    </script>
    {% endif %}
  {% endblock %}
</body>
</html>