<!doctype html>
<html lang="{{ lang }}" dir="{{ dir }}"{% if page_mode|default('light') == 'dark' %} class="dark"{% endif %}>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="robots" content="noindex">
  <title>{{ __('Review widget preview', 'reviewx') }}</title>
  {% for href in assets.css %}<link rel="stylesheet" href="{{ href }}">{% endfor %}
  {% if customizer_css is defined and customizer_css %}<style id="reviewx-customizer-css">{{ customizer_css|raw }}</style>{% endif %}
  <style>
    html, body { margin: 0; background: transparent; }
    body { padding: 16px; }
    /* A typical dark theme page, to see how the light / dark mode follows it. */
    html.dark, html.dark body { background: #141417; color: #ececf0; }
    .rvx-preview-banner { display: none; }
  </style>
</head>
<body>
  <div id="{{ rvx_root_id('rvx-storefront-widget') }}"
       class="rvx-storefront"
     data-rvx-post-type="{{ config.product.postType|default('product')|e('html_attr') }}"
       x-data="rvxStorefront($el)"
       x-id="['rvx-form', 'rvx-filter-rating', 'rvx-filter-media', 'rvx-recommend', 'rvx-title', 'rvx-feedback', 'rvx-name', 'rvx-email', 'rvx-captcha', 'rvx-upload']"
       data-rvx-config="{{ config|json_encode|e('html_attr') }}"
       data-rvx-view="preview"
       @keydown.escape.window="closeMenus(); shareFor = null">
    {% include 'storefront/widget/body.twig' with { show: { graph: true, filter: true, list: true, form: true } } %}
  </div>
  {% if color_mode_js|default('') %}<script>{{ color_mode_js|raw }}</script>{% endif %}
  {% for src in assets.js %}<script src="{{ src }}"{% if src matches '/alpine\\.js/' %} defer{% endif %}></script>{% endfor %}
  <script>
    // Bridge: the admin app posts { type: 'rvx-preview', settings } with unsaved values.
    window.addEventListener('message', function (e) {
      if (e.origin !== window.location.origin || !e.data || e.data.type !== 'rvx-preview') return;
      var root = document.getElementById('rvx-storefront-widget');
      if (!root || !window.Alpine) return;
      var data = window.Alpine.$data(root);
      if (data && data.applyPreviewSettings) data.applyPreviewSettings(e.data.settings || {});
      // Unsaved light / dark mode (Widget settings): show it as the widget would get it.
      var mode = ((e.data.settings || {}).widget_settings || {}).color_mode;
      if (mode === 'light' || mode === 'dark' || mode === 'auto') root.setAttribute('data-rvx-color-mode', mode);
    });
    // Tell the parent how tall we are so the iframe can grow with the content.
    var report = function () { window.parent.postMessage({ type: 'rvx-preview-height', height: document.documentElement.scrollHeight }, window.location.origin); };
    new ResizeObserver(report).observe(document.body);
    window.addEventListener('load', report);
  </script>
</body>
</html>
