laterite-admin 0.5.1

<!DOCTYPE html>
<html lang="{{ shell.locale() }}" data-theme="light">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{% block title %}{{ shell.brand }}{% endblock %}</title>
  <link rel="icon" type="image/svg+xml" href="{{ shell.base }}/assets/mark.svg">
  <link rel="stylesheet" href="{{ shell.base }}/assets/laterite.css">
  <script>
    // Pre-paint: set the theme before first render to avoid a flash of the wrong
    // mode. The rest of the admin's behaviour lives in laterite.js (deferred).
    (function(){try{var m=localStorage.getItem('lat-mode')||'auto';var d=m==='dark'||(m==='auto'&&matchMedia('(prefers-color-scheme:dark)').matches);document.documentElement.setAttribute('data-theme',d?'dark':'light');}catch(e){}})();
  </script>
  <script defer src="{{ shell.base }}/assets/vendor/htmx.min.js"></script>
  <script defer src="{{ shell.base }}/assets/laterite.js"></script>
  {% for a in shell.assets %}{% if a.css %}<link rel="stylesheet" href="{{ a.url }}" data-lat-asset="{{ a.url }}">{% else %}<script defer src="{{ a.url }}" data-lat-asset="{{ a.url }}"></script>{% endif %}
  {% endfor %}
</head>
<body class="lat-app" hx-headers='{"X-CSRF-Token": "{{ shell.csrf_token }}"}' data-lat-request-error='{{ shell.t("Something went wrong. Please try again.") }}' data-lat-cancel='{{ shell.t("Cancel") }}'>
  {% if !shell.flash.is_empty() %}
  <div class="lat-flashes" role="status" aria-live="polite">
    {% for f in shell.flash %}
    <div class="lat-flash {{ f.level.class() }}" data-lat-widget="flash">
      <span class="lat-flash__text">{{ f.text }}</span>
      <button type="button" class="lat-flash__close" aria-label='{{ shell.t("Dismiss") }}' onclick="latDismissFlash(this)">&times;</button>
    </div>
    {% endfor %}
  </div>
  {% endif %}
  <header class="lat-topnav">
    <button class="lat-topnav__burger" type="button" onclick="latToggleMenu()" aria-label='{{ shell.t("Menu") }}'>&#9776;</button>
    <a class="lat-topnav__brand" href="{{ shell.base }}">
      <img src="{{ shell.base }}/assets/mark.png" alt="">
      <span class="lat-topnav__wordmark">{{ shell.brand }}</span>
    </a>
    <nav class="lat-topnav__nav">
      {% for item in shell.nav %}<a class="lat-topnav__section{% if item.active %} is-active{% endif %}" href="{{ item.path }}"{% if item.active %} aria-current="page"{% endif %}>{% if !item.icon.is_empty() %}<span class="lat-topnav__ico">{{ item.icon|safe }}</span>{% endif %}<span>{{ item.label }}</span></a>{% endfor %}
    </nav>
    <div class="lat-topnav__spacer"></div>
    <div class="lat-topnav__right">
      <button class="lat-modebtn" type="button" onclick="latCycleMode()" title='{{ shell.t("Colour mode") }}' aria-label='{{ shell.t("Colour mode") }}'><span id="lat-mode-ico">◐</span></button>
      <details class="lat-usermenu">
        <summary class="lat-avatar" title="{{ shell.full_name }}">{{ shell.initial }}</summary>
        <div class="lat-usermenu__panel">
          <div class="lat-usermenu__name">{{ shell.full_name }}</div>
          <a class="lat-usermenu__item" href="{{ shell.base }}/preferences">{{ shell.t("Preferences") }}</a>
          <form method="post" action="{{ shell.base }}/logout">{% include "_csrf.html" %}<button class="lat-usermenu__item" type="submit">{{ shell.t("Sign out") }}</button></form>
          <a class="lat-usermenu__poweredby" href="https://laterite.rs" target="_blank" rel="noopener noreferrer"><img src="{{ shell.base }}/assets/mark.png" alt="" width="14" height="14">{{ shell.t("Powered by Laterite") }}</a>
        </div>
      </details>
    </div>
  </header>
  <div class="lat-drawer" id="lat-menu">
    <div class="lat-drawer__backdrop" onclick="latToggleMenu()"></div>
    <nav class="lat-drawer__panel">
      <div class="lat-drawer__brand"><img src="{{ shell.base }}/assets/mark.png" alt=""><span>{{ shell.brand }}</span></div>
      {% for item in shell.nav %}<a class="lat-drawer__item{% if item.active %} is-active{% endif %}" href="{{ item.path }}"{% if item.active %} aria-current="page"{% endif %}>{{ item.label }}</a>{% endfor %}
    </nav>
  </div>
  <div class="lat-body">
    {% if !shell.sidebar.is_empty() %}
    <aside class="lat-sidebar">
      {% for group in shell.sidebar %}
      <details class="lat-sidebar__group" open>
        <summary class="lat-sidebar__grouphead"><span>{{ group.name }}</span><span class="lat-sidebar__chevron"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg></span></summary>
        {% for item in group.items %}
        <a class="lat-sidebar__item{% if item.active %} is-active{% endif %}" href="{{ item.path }}">
          <span class="lat-sidebar__icon">{{ item.icon|safe }}</span>
          <span class="lat-sidebar__text">
            <span class="lat-sidebar__title">{{ item.label }}</span>
            {% if !item.description.is_empty() %}<span class="lat-sidebar__desc">{{ item.description }}</span>{% endif %}
          </span>
        </a>
        {% endfor %}
      </details>
      {% endfor %}
    </aside>
    {% endif %}
    <main class="lat-main">
      <div class="lat-page">
        {% block content %}{% endblock %}
      </div>
    </main>
  </div>
</body>
</html>