<!doctype html>
<html lang="en" data-mode="{{ mode }}"{% if mode_locked %} data-mode-locked{% endif %}{% for attr in html_attrs %} {{ attr.name }}="{{ attr.value }}"{% endfor %}>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ title }}</title>
{%- match head_html -%}
{%- when Some with (html) -%}
{{ html }}
{%- when None -%}
{%- endmatch -%}
{{ self.stylesheet_link()|safe }}
{{ self.htmx_script_link()|safe }}
{%- if include_htmx_sse %}
{{ self.htmx_sse_script_link()|safe }}
{%- endif %}
{{ self.script_link()|safe }}
{%- match scripts_html -%}
{%- when Some with (html) -%}
{{ html }}
{%- when None -%}
{%- endmatch -%}
</head>
<body class="wf-app {{ density_class }}"{% if body_hx_boost %} hx-boost="true"{% endif %}>
<div class="wf-shell">
<aside class="wf-sidebar">
<div class="wf-brand">
{%- match brand_href -%}
{%- when Some with (href) -%}
<a class="wf-brand-name" href="{{ href }}">{{ app_name }}</a>
{%- when None -%}
<span class="wf-brand-name">{{ app_name }}</span>
{%- endmatch -%}
</div>
<nav class="wf-nav-list" id="app-nav" aria-label="{{ nav_aria_label }}">
{{ nav_html|safe }}
</nav>
{%- match profile -%}
{%- when Some with (profile) -%}
{{ profile }}
{%- when None -%}
{%- endmatch -%}
</aside>
<div class="{{ self.main_class_name() }}">
{%- match topbar_html -%}
{%- when Some with (html) -%}
{{ html }}
{%- when None -%}
<header class="wf-topbar">
<div class="wf-crumbs">
{%- match breadcrumbs_html -%}
{%- when Some with (html) -%}
{{ html }}
{%- when None -%}
<span aria-current="page">{{ app_name }}</span>
{%- endmatch -%}
</div>
<div class="wf-grow"></div>
{{ actions_html|safe }}
</header>
{%- endmatch -%}
{%- match page_header_html -%}
{%- when Some with (html) -%}
{{ html }}
{%- when None -%}
{%- endmatch -%}
<main class="wf-scroll">
{{ content_html|safe }}
</main>
{%- match footer_html -%}
{%- when Some with (html) -%}
{{ html }}
{%- when None -%}
<div class="wf-statusbar wf-hair">
<span>{{ status_left }}</span>
<span class="wf-grow"></span>
<span>{{ status_right }}</span>
</div>
{%- endmatch -%}
</div>
</div>
<div class="wf-toast-host" id="toast-host"></div>
</body>
</html>