{{ define "base" -}}
<!DOCTYPE html>
<html lang="{{ locale }}" dir="{{ dir }}" style="font-size: {{ uiscalepx }}px">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>{{ .title }}</title>
    <link rel="icon" type="image/x-icon" href="/public/assets/logo/ut-logo.ico">
    <link rel="stylesheet" href="/public/app.css?v={{ assetv "public/app.css" }}" />
    {{ if and .theme (ne .theme "default") }}
    <link rel="stylesheet" href="/themes/{{ .theme }}.css?v={{ assetv "public/app.css" }}" />
    {{ end }}
    <!-- Vendored locally: the till must work fully offline. -->
    <script defer src="/public/vendor/htmx.min.js?v={{ assetv "public/vendor/htmx.min.js" }}"></script>
    <script defer src="/public/vendor/alpine.min.js?v={{ assetv "public/vendor/alpine.min.js" }}"></script>
    <script defer src="/public/app.js?v={{ assetv "public/app.js" }}"></script>
  </head>
  <body class="{{ if kiosk }}kiosk{{ end }}{{ if .saleScreen }} sale-screen{{ end }}{{ if .menuScreen }} menu-screen{{ end }}"
        data-currency="{{ currency.Code }}" data-currency-decimals="{{ currency.Decimals }}"
        data-currency-display="{{ currency.Display }}" data-currency-suffix="{{ if currency.Suffix }}1{{ end }}"
        {{ if idlelocksecs }}data-idle-lock="{{ idlelocksecs }}"{{ end }}>
    {{ template "nav" . }}
    <main class="container">{{ template "content" . }}</main>
    <footer class="statusbar" aria-label="Status">
      <!-- data-conn-*, not data-online: html/template strips "data-" and
           treats on*-named attributes as JS context, JSON-quoting the value. -->
      <span class="sb-item sb-conn" id="sb-conn"
            data-conn-online="{{ T "status.online" }}" data-conn-offline="{{ T "status.offline" }}">
        <span class="sb-dot"></span>
        <span class="sb-conn-text">{{ T "status.online" }}</span>
      </span>
      {{ if not enrolled }}
        <a class="sb-item sb-enrol" href="/settings#registration">✦&nbsp;{{ T "status.register_till" }}</a>
      {{ end }}
      {{ if updateavailable }}
        {{ if canselfupdate }}
        <button type="button" class="sb-item sb-update" id="sb-update-btn"
                data-latest="{{ latestversion }}">⬆&nbsp;{{ T "status.update_now" }}&nbsp;v{{ latestversion }}</button>
        {{ else }}
        <a class="sb-item sb-update" href="https://www.universaltill.com/download"
           target="_blank" rel="noopener">⬆&nbsp;{{ T "status.update_available" }}&nbsp;v{{ latestversion }}</a>
        {{ end }}
      {{ end }}
      <span class="sb-item sb-ver" title="Universal Till">Universal&nbsp;Till&nbsp;v{{ appversion }}</span>
    </footer>
    <script>
      (function () {
        var el = document.getElementById('sb-conn');
        if (!el) return;
        var txt = el.querySelector('.sb-conn-text');
        var on = el.getAttribute('data-conn-online'), off = el.getAttribute('data-conn-offline');
        function update() {
          var online = navigator.onLine;
          el.classList.toggle('is-offline', !online);
          txt.textContent = online ? on : off;
        }
        window.addEventListener('online', update);
        window.addEventListener('offline', update);
        update();
      })();
      (function () {
        var btn = document.getElementById('sb-update-btn');
        if (!btn) return;
        btn.addEventListener('click', function () {
          if (!confirm('Update to v' + btn.getAttribute('data-latest') + '? The till will restart.')) return;
          btn.disabled = true; btn.textContent = 'Updating…';
          fetch('/api/update/apply', { method: 'POST' })
            .then(function (r) { return r.json().catch(function () { return {}; }); })
            .then(function () { /* server re-execs; reconnect below */ })
            .catch(function () { /* expected: connection drops on restart */ })
            .finally(function () {
              btn.textContent = 'Restarting…';
              // Poll until the new build is back, then reload.
              var tries = 0;
              var iv = setInterval(function () {
                tries++;
                fetch('/healthz', { cache: 'no-store' }).then(function (r) {
                  if (r.ok) { clearInterval(iv); location.reload(); }
                }).catch(function () {});
                if (tries > 60) { clearInterval(iv); }
              }, 2000);
            });
        });
      })();
    </script>
  </body>
</html>
{{- end }}
