<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <link rel="icon" type="image/png" href="{{ logo }}">
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta http-equiv="Cache-Control" content="no-store, no-cache, must-revalidate">
  <meta http-equiv="Pragma" content="no-cache">
  <meta http-equiv="Expires" content="0">
  <!-- title>dataquieR {{ as.character(packageVersion("dataquieR")) }} Report</title -->
  <title>{{ as.character(title) }}</title>
  <!-- needed to make media queries work: https://wpbuffs.com/media-query-for-mobile/#:~:text=Mobile%20Media%20Query%20Not%20Working&text=If%20your%20queries%20are%20working,the%20viewport%20and%20default%20zoom.&text=This%20tells%20the%20browser%20to,for%20making%20mobile%20breakpoints%20work. />
  <script src="https://polyfill.io/v3/polyfill.min.js?features=Array.prototype.find,Promise,Object.assign"></script><!-- TODO: Find a solution w/o inernet -->
  <script type="text/javascript">
//<![CDATA[
(function () {
  const root = document.documentElement;

  function getNumVar(name) {
    const v = root.style.getPropertyValue(name);
    const n = v ? Number(v.trim()) : 0;
    return Number.isFinite(n) ? n : 0;
  }

  function freezeScreenVarsMonotonic(sw, sh) {
    const prevW = getNumVar('--screen-width');
    const prevH = getNumVar('--screen-height');

    // never shrink; only grow
    const nextW = Math.max(prevW, sw);
    const nextH = Math.max(prevH, sh);

    root.style.setProperty('--screen-width',  String(nextW)); // unitless for *1px
    root.style.setProperty('--screen-height', String(nextH));
  }

  function readScreen() {
    const s = window.screen;
    if (!s || !s.width || !s.height) return null;
    return { w: s.width, h: s.height };
  }

function callWhenAvailable(fnName, cb, tries = 120) {
  const fn = window[fnName];
  if (typeof fn === "function") { cb(fn); return true; }
  if (tries <= 0) return false;
  requestAnimationFrame(() => callWhenAvailable(fnName, cb, tries - 1));
  return false;
}

function initWithRetry(tries = 20) {
  const v = readScreen();
  if (v) {
    freezeScreenVarsMonotonic(v.w, v.h);

    callWhenAvailable("sizeIframes", (fn) => {
      fn(true);
    });

    return true;
  }
  if (tries <= 0) return false;
  requestAnimationFrame(() => initWithRetry(tries - 1));
}

  // init early
  initWithRetry();

  // BFCache restore
  window.addEventListener('pageshow', (e) => {
    if (e.persisted) initWithRetry();
  });

  // DPR change handler: keep it (as you want), but NEVER shrink the stored values
  let lastDpr = window.devicePixelRatio || 1;
  let mql = window.matchMedia(`(resolution: ${lastDpr}dppx)`);

  function onDprChange() {
    const newDpr = window.devicePixelRatio || 1;
    if (newDpr === lastDpr) return;
    lastDpr = newDpr;

    if (mql.removeEventListener) mql.removeEventListener('change', onDprChange);
    else if (mql.removeListener) mql.removeListener(onDprChange);

    mql = window.matchMedia(`(resolution: ${lastDpr}dppx)`);
    if (mql.addEventListener) mql.addEventListener('change', onDprChange);
    else if (mql.addListener) mql.addListener(onDprChange);

    initWithRetry(); // will only grow, never shrink
  }

  if (mql.addEventListener) mql.addEventListener('change', onDprChange);
  else if (mql.addListener) mql.addListener(onDprChange);
})();
//]]>
  </script>
  <script type="text/javascript">
//<![CDATA[
  window.dq_report2 = true;
  window.by_report = {{ ifelse(by_report, "true", "false") }};
//]]>
</script>
  <script src="renderinfo.js"></script>
  <script src="anchor_list.js"></script>
  {{ deps }}
</head>
<body onhashchange="try { single_page_switch(event) } catch(e) {}" onload="try { single_page_switch(event) } catch(e) {}" onclick="try { hideTopNav(event) } catch(e) {}">
{{ loading }}
<div class="navbar">
  {{ header }}
  <a href="javascript:void(0);" class="icon" onclick="toggleTopNav(event)">
    <i class="fa fa-bars"></i>
  </a>
  {{ menu }}
  <div class="dq-search-hint"><i class="fa fa-search"></i></div>
  <div class="opaque-on-hover-20 dropdown" style="visibility: hidden;display:none;">
    <button class="dropbtn">
    <label for="_enabletippy">Tooltips on Plots</label>
    <input type="checkbox" id="_enabletippy", name="_enabletippy"></input>
    </button>
  </div>
</div>
<div class="content">
{{ spage }}
</div>
<div class="default-target">
  <span><a href="https://dataquality.qihs.uni-greifswald.de/index.html" target="_blank">
    <img src="{{ logo }}" title="dataquieR {{ as.character(packageVersion("dataquieR")) }}" /> dataquieR {{ as.character(packageVersion("dataquieR")) }}
  </a></span>
</div>
{{ backlink }}
</body>
</html>
