<!doctype html>
<html lang="en">
  {% block head %}
  <head>
    {% block meta %}
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#007bff" />
    <meta name="description" content="Pwnagotchi Web Interface" />
    {% endblock %}

    <title>{% block title %}{% endblock %}</title>

    {% block styles %}
    <link rel="stylesheet" type="text/css" href="/css/style.css" />
    <link rel="stylesheet" type="text/css" href="/css/theme.css" />
    {% if active_page == 'profile' %}
    <link rel="stylesheet" type="text/css" href="/css/profile.css" />
    {% elif active_page in ['inbox', 'new'] %}
    <link rel="stylesheet" type="text/css" href="/css/inbox.css" />
    {% elif active_page == 'plugins' %}
    <link rel="stylesheet" type="text/css" href="/css/plugins.css" />
    {% endif %}
    <link rel="apple-touch-icon" href="/images/pwnagotchi.png" />
    <link rel="icon" type="image/png" href="/images/pwnagotchi.png" />
    {% endblock %}
  </head>

  {% endblock %} {% block body %}
  <body>
    <div class="page-container">
      {% if error %}
      <script>
        document.addEventListener("DOMContentLoaded", () => {
          showToast("{{ error }}", 5000, "error");
        });
      </script>
      {% endif %} {% set navigation = [ ( '/', 'home', 'Home' ), ( '/inbox',
      'inbox', 'Inbox' ), ( '/inbox/new', 'new', 'New' ), ( '/inbox/profile',
      'profile', 'Profile' ), ( '/inbox/peers', 'peers', 'Peers' ), (
      '/plugins', 'plugins', 'Plugins' ), ] %} {% set active_page =
      active_page|default('inbox') %}

      <div class="page-content">{% block content %} {% endblock %}</div>

      <footer class="page-footer">
        <nav class="navbar">
          {% for href, id, caption in navigation %}
          <li class="navbar-item">
            <a
              href="{{ href }}"
              id="{{ id }}"
              class="{% if active_page == id %}active{% endif %}"
            >
              <span class="navbar-icon"></span>
              <span>{{ caption }}</span>
            </a>
          </li>
          {% endfor %}
        </nav>
      </footer>
    </div>

    {% block scripts %}
    <script src="/js/kjua.min.js"></script>
    <script src="/js/app.js"></script>
    <script>
      {% block script %}{% endblock %}
    </script>
    {% endblock %}
  </body>
  {% endblock %}
</html>
