{% props name: String, href: String = "/", logo: Slot = Slot::default(), nav: Vec<(String, String)> = Vec::new(), current: String = "", actions: Slot = Slot::default(), phase: String = "", phase_message: Slot = Slot::default(), main: String = "main" %}
{#- nav: (href, text), current: the current page's href; phase: "Alpha" or "Beta" shows the phase banner with phase_message; main: the id the skip link jumps to. #}
<a class="ui-skip-link" href="#{{ main }}">Skip to main content</a>
<header class="ui-header">
<div class="ui-header-inner">
<a class="ui-header-brand" href="{{ href }}">{{ logo }}{{ name }}</a>
{%- if !nav.is_empty() %}
<nav class="ui-header-nav" aria-label="Service"><ul>
{%- for (link, text) in nav.iter() %}
<li><a href="{{ link }}"{% if *link == current %} aria-current="page"{% end %}>{{ text }}</a></li>
{%- end %}
</ul></nav>
{%- end %}
<div class="ui-header-actions">{{ actions }}</div>
</div>
{%- if !phase.is_empty() %}
<div class="ui-phase"><div class="ui-header-inner"><span class="ui-badge" data-variant="info">{{ phase }}</span><span class="ui-muted">{{ phase_message }}</span></div></div>
{%- end %}
</header>