{# Browser Compatibility Check - Lightweight < 1KB #}
{% set c = module.content %}
{% set s = module.style_settings %}

{% if c.enabled %}
{# Upgrade message lives in a <template> so its rich text can't break the script
   (backticks, ${...}, </script> are all inert inside template content), and so the
   detection script below can stay pure ES5 — the browsers it warns can't parse ES6. #}
<template id="browser-upgrade-message" style="display:none">{{ c.upgrade_message }}</template>
<script>
/* ES5 ONLY — this must parse in the legacy browsers it targets. No const/let,
   arrow functions, or template literals. */
(function() {
  function getChecked() {
    try { return sessionStorage.getItem('browserChecked'); } catch (e) { return null; }
  }
  function setChecked() {
    try { sessionStorage.setItem('browserChecked', '1'); } catch (e) {}
  }

  if (getChecked()) { return; }

  // Feature detection (not user-agent sniffing).
  function isModernBrowser() {
    try {
      return (
        typeof Symbol !== 'undefined' &&
        typeof Promise !== 'undefined' &&
        typeof Object.assign === 'function' &&
        typeof Array.from === 'function' &&
        window.CSS && CSS.supports && CSS.supports('display', 'grid') &&
        CSS.supports('gap', '1px') &&
        'IntersectionObserver' in window &&
        'ResizeObserver' in window &&
        'fetch' in window &&
        'URLSearchParams' in window
      );
    } catch (e) {
      return false;
    }
  }

  if (!isModernBrowser()) {
    var tpl = document.getElementById('browser-upgrade-message');
    var message = tpl ? tpl.innerHTML : 'Your browser is out of date. Please upgrade for the best experience.';

    var notice = document.createElement('div');
    notice.id = 'browser-upgrade-notice';
    notice.setAttribute('role', 'alert');
    notice.style.cssText =
      'position:fixed;top:0;left:0;right:0;z-index:999999;padding:20px;text-align:center;' +
      'background:{{ s.background_color.color|default('var(--color-bg-secondary, #f8f9fa)') }};' +
      'color:{{ s.text_color.color|default('var(--color-text, #111827)') }};' +
      'border-bottom:3px solid {{ s.border_color.color|default('var(--color-warning, #ffc107)') }};' +
      'font-family:system-ui,-apple-system,sans-serif;';

    notice.innerHTML =
      '<div style="max-width:800px;margin:0 auto;">' + message +
      '<button type="button" id="browser-upgrade-dismiss" ' +
      'style="margin-top:10px;padding:8px 16px;border:none;' +
      'background:{{ s.border_color.color|default('var(--color-warning, #ffc107)') }};' +
      'color:#111827;border-radius:4px;cursor:pointer;">Continue Anyway</button></div>';

    document.body.insertBefore(notice, document.body.firstChild);

    var dismiss = document.getElementById('browser-upgrade-dismiss');
    if (dismiss) {
      dismiss.onclick = function() {
        if (notice.parentNode) { notice.parentNode.removeChild(notice); }
        setChecked();
      };
    }
  }

  setChecked();
})();
</script>
{% endif %}