<!DOCTYPE html>
<html>
<head>
<style>
html, body
{
  height: 100%;
  margin: 0px;
  padding: 0px;
  border: 0px;
  overflow: hidden;
}

</style>

<script src='{{ static_prefix }}/wb_frame.js'> </script>
{% if client_side_replay %}
<script src='{{ static_prefix }}/loadWabac.js'></script>
{% endif %}

{% autoescape false %}

{{ banner_html }}

{% include 'vue_loc.html' %}

</head>
<body style="margin: 0px; padding: 0px;">

<div id="app" style="width: 100%; height: 200px"></div>
<script>
  VueUI.main({
      staticPrefix: "{{ static_prefix }}",
      url: "{{ url }}",
      prefix: "{{ wb_prefix }}",
      timestamp: "{{ timestamp }}",
      logoUrl: "{{ ui.logo }}",
      navbarBackground: "{{ ui.navbar_background_hex | default('f8f9fa') }}",
      navbarColor: "{{ ui.navbar_color_hex | default('212529') }}",
      navbarLightButtons: "{{ ui.navbar_light_buttons }}",
      logoHomeUrl: "{{ ui.logo_home_url }}",
      disablePrinting: "{{ ui.disable_printing }}",
      allLocales: allLocales
    },
    "{{ env.pywb_lang | default('en') }}",
    i18nStrings);
</script>

<div id="wb_iframe_div">
<iframe id="replay_iframe" frameborder="0" seamless="seamless" scrolling="yes" class="wb_iframe" allow="autoplay; fullscreen"></iframe>
</div>

<script>
  window.cframe = null;

  if (navigator.serviceWorker) {
{% if client_side_replay %}
    window.cframe = new WabacReplay("{{ wb_prefix }}", "{{ url }}", "{{ timestamp }}", "{{ static_prefix }}", "{{ coll }}", "{{ sw_prefix }}", {{ inject_scripts | tojson }});
    window.cframe.init();
{% else %}
    navigator.serviceWorker.getRegistration("{{ sw_prefix }}").then(reg => { if (reg) reg.unregister() });
{% endif %}
  }
  if (!window.cframe) {
    window.cframe = new ContentFrame({"url": "{{ url }}" + window.location.hash,
                                 "prefix": "{{ wb_prefix }}",
                                 "request_ts": "{{ wb_url.timestamp }}",
                                 "iframe": "#replay_iframe"});
  }
</script>
</body>
</html>
{% endautoescape %}

