{% macro header_macro(links) -%}
    <header style="background: var(--neutral-0);
    padding: 1rem;
    border-bottom: 1px solid var(--neutral-200);display:flex;justify-content:space-between;">
    <div >
        <h1 style="font-size: 1.25rem;
    letter-spacing: -0.02em;
    font-weight: 500;">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#888" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="header__logo lucide lucide-sparkles-icon lucide-sparkles"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"/><path d="M20 3v4"/><path d="M22 5h-4"/><path d="M4 17v2"/><path d="M5 18H3"/></svg>
        Tierkreis Workflow Visualizer</h1>
        <span style="font-size: 0.6rem;
        letter-spacing: -0.02em;
        font-weight: 600;
        color: var(--neutral-400);
        margin-left: 1.75rem;
        margin-top: 0.125rem;
        display: block;">VERSION 1</span>
    </div>
    </header>
{%- endmacro %}