<html><head>
<meta charset="UTF-8">
<base href="$baseurl/$current_page" />
<meta http-equiv="Content-Security-Policy" content="$default_csp" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>$title</title>
<link rel="alternate" type="application/rss+xml" title="RSS Feed" \
 href="$home/timeline.rss" />
<link rel="stylesheet" href="$stylesheet_url" type="text/css" />
</head>
<body class="$current_feature rpage-$requested_page cpage-$canonical_page">
<script nonce="$nonce">
if(window.localStorage && +window.localStorage.getItem('dark-mode')){
  // do this early to try to lessen the effect of a FOUC when switching pages
  document.firstElementChild.classList.add('dark-mode');
}
</script>
<th1>set docBranch trunk
if {[capexpr L]} {
  set docBranch ckout
}</th1><style>
  @import url($<home>/doc/$<docBranch>/assets/fossil-doc.css)
</style>
<script src="$<home>/doc/$<docBranch>/assets/highlightjs/highlight-sqlite3.min.js"></script>
<script nonce="$nonce">
window.addEventListener('DOMContentLoaded', function(){
  "use strict";
  /* Set up bright/dark mode toggle */
  const eHtml = document.firstElementChild;
  const darkCssClass = 'dark-mode';
  const ln = document.createElement('a');
  ln.href = '#';
  const localStorage = self.localStorage || self.sessionStorage || {
    setItem:()=>{}, getItem:()=>{}
  };
  const updateThemeLink = function(doToggle=false){
    if(doToggle) eHtml.classList.toggle(darkCssClass);
    const isDark = eHtml.classList.contains(darkCssClass);
    if(isDark) ln.innerText = "Bright Mode";
    else ln.innerText = "Dark Mode";
    localStorage.setItem(darkCssClass, isDark ? 1 : 0);
  };
  updateThemeLink();
  const eNavLinks = document.querySelector('nav#nav-links');
  ln.addEventListener('click', (e)=>{
    updateThemeLink(true);
    e.stopPropagation();
    e.preventDefault();
    return false;
  }, true);
  eNavLinks.appendChild(ln);
  if(document.body.classList.contains('doc')){
    /* Init code specific to the /doc pages. */
    const klassDSN = 'disable-section-numbers';
    /** If the document has less than 2 H1 elements,
        disable section numbering. */
    if(!document.body.classList.contains(klassDSN)
      && document.body.querySelectorAll('h1').length<2){
      document.body.classList.add(klassDSN);
    }
    for(const klass of [ klassDSN ]) { 
      /** For each CSS class name in this list, search for a SPAN
          element with that class. If found, delete the element and
          add that class name to the BODY element. These are used for
          CSS filters.
      */
      const e = document.body.classList.contains(klass)
        ? false : document.body.querySelector('span.'+klass);
      if(e){
        e.remove();
        document.body.classList.add(klass);
      }
    }
  }/* body.doc-specific pieces */
}, true);
</script><th1>
if {"Documentation" eq "$title"} {
  # "Documentation" is the default title when /doc/...'ing non-document
  # files. Clear the title and we'll elide the corresponding H1 element
  # below.
  set title ""; # $current_page
}</th1><header id='header-logo'>
<a href='https://sqlite.org' class='nav-logo'><img src='$<home>/logo' alt='SQLite logo'/></a>
<!-- maintenance reminder: ^^^^ use /logo instead of /doc/... or /raw/...
  to get cachable image, though cache time is relatively short. -->
<span>WebAssembly &amp; JavaScript</span>
</header><nav class='mainmenu' id='nav-links'><th1>
if {0} {
  # set the main menu contents using the /setup_config page
  set mainmenu {
    Home /doc/ckout/index.md L {}
    Home /doc/trunk/index.md !L {}
    {API Index} /doc/ckout/api-index.md L {}
    {API Index} /doc/trunk/api-index.md !L {}
    Timeline /timeline * {}
    Files /dir * {}
    Admin     /setup       {a s}          {}
    Login /login !L {}
    Account /login L {}
  }
}
foreach {name url expr class} $mainmenu {
  if {![capexpr $expr]} continue
  if {[string match "/*" $url]} {
    if {[string match "/$current_page*" $url]} {
      set class "active $class"
    }
    set url $home$url
  }
  html "<a href='$url' class='$class'>$name</a>"
}
</th1></nav><th1>
if { "x" ne "x$title" } {
  html "<h1>$title</h1>"
}</th1>
