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

</style>

{% if client_side_replay %}
<script src='{{ static_prefix }}/loadWabac.js'></script>
<script>
  new WabacReplay("{{ wb_prefix }}", "{{ url }}", "{{ timestamp }}", "{{ static_prefix }}", "{{ coll }}", "{{ sw_prefix }}").init();
</script>
{% else %}
<script src='{{ static_prefix }}/wb_frame.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>

{% if not client_side_replay %}
<script>
  var cframe = new ContentFrame({"url": "{{ url }}" + window.location.hash,
                                 "prefix": "{{ wb_prefix }}",
                                 "request_ts": "{{ wb_url.timestamp }}",
                                 "iframe": "#replay_iframe"});

</script>
{% endif %}
</body>
</html>
{% endautoescape %}

