<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="encoding" charset="utf-8" />
    {# Show the setup name, as set in the config file, as tab title. Don't escape HTML entities. #}
    <title>{{ setupname|safe }}</title>
    <link rel="stylesheet" href="/static/css/bootstrap.min.css" />
    <link rel="stylesheet" href="/static/css/matemat.css"/>
    <link rel="stylesheet" href="/static/css/theme.css"/>
    <script src="/static/js/bootstrap.bundle.min.js"></script>
  </head>

  <body>

    <header class="navbar navbar-expand-lg navbar-dark bg-dark">
      {% block header %}

        <nav class="container-fluid">
          <a class="navbar-brand" href="/">{{ setupname|safe }}</a>
	  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-collapse" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
	  <div class="collapse navbar-collapse" id="navbar-collapse">
	    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
	      {# Show a link to the settings, if a user logged in via password (authlevel 2). #}
	      {% if authuser is defined and authlevel|default(0) > 1 %}
		<li class="nav-item"><a href="/settings" class="nav-link">Settings</a></li>
		{% if authuser.is_admin %}
		  <li class="nav-item"><a href="/admin" class="nav-link">Administration</a></li>
	      <li class="nav-item"><a href="/statistics" class="nav-link">Sales Statistics</a></li>
	    {% endif %}
	  {% endif %}
	  {# Login/Logout buttons #}
	  {% if authuser is defined %}
	    <li class="nav-item justify-content-end"><a href="/logout" class="nav-link">Logout</a></li>
	  {% else %}
	    <li class="nav-item justify-content-end"><a href="/login" class="nav-link">Login</a></li>
	    {% if signup|default(false) %}
	      <li class="nav-item justify-content-end"><a href="/signup" class="nav-link">Signup</a></li>
	    {% endif %}
	  {% endif %}
	    </ul>
	  </div>
        </nav>
      {% endblock %}
    </header>

    <main class="container-fluid pb-5 pt-3">
      {% block notifications %}
	{% for n in notifications | default([]) %}
	  <div class="alert {{ n.classes | join(' ') }}" role="alert">
	    {{ n.msg|safe }}
	  </div>
	{% endfor %}
      {% endblock %}
      {% block main %}
        {# Here be content. #}
      {% endblock %}
    </main>

    <footer class="fixed-bottom p-3 bg-light">
      {% block footer %}
	<div class="container text-muted">
	    {{ setupname|safe }} | Matemat {{ __version__ }}
	</div>
      {% endblock %}
    </footer>

    {% if eanwebsocket %}
      <script>
	function connect() {
	let socket = new WebSocket("{{ eanwebsocket }}");
	socket.onclose = () => { setTimeout(connect, 1000); };
	socket.onmessage = function (e) {
	// Focus this tab - requires https://git.kabelsalat.ch/ccc-basel/barcode-utils
	if (typeof window.extension_tabfocus === "function") {
        window.extension_tabfocus();
	}
	{% block eanwebsocket %}{% endblock %}
	};
	}
	window.addEventListener("load", () => { connect(); });
      </script>
    {% endif %}
  </body>
</html>