{# A backdrop (docs/backgrounds.md, #157): the page's `backdrop` data drawn

   by the engine, Rust compiled to WebAssembly. The viewer's choice (Settings › Appearance) is a cookie;

   unset, a touch-only device or Save-Data gets a still sky. Any failure

   leaves no backdrop and nothing else changed. #}

<canvas id="backdrop" aria-hidden="true"></canvas>

<script type="application/json" id="backdrop-data">{{ backdrop|safe }}</script>

<script type="module">

const canvas = document.getElementById("backdrop");

const chosen = document.cookie.match(/(?:^|; )backdrop=(moving|still|off)/);

const touch = matchMedia("(pointer: coarse)").matches && !matchMedia("(pointer: fine)").matches;

const pick = chosen ? chosen[1] : (touch || (navigator.connection && navigator.connection.saveData) ? "still" : "moving");

if (pick === "off") {

  canvas.remove();

} else {

  try {

    const bd = await import("/static/backdrop/backdrop.js?v={{ shell.assets() }}");

    await bd.default({ module_or_path: "/static/backdrop/backdrop_bg.wasm?v={{ shell.assets() }}" });

    bd.start(canvas, JSON.parse(document.getElementById("backdrop-data").textContent), pick === "still");

  } catch (e) {

    canvas.remove();

  }

}

</script>