<nav>
    <div class="nav-container">
        <a href="/" class="logo">
            <img src="/assets/images/logo-512x512.png" alt="{{ t.site.shortName }} Logo" class="logo-image">
            <span>{{ t.site.shortName }}</span>
        </a>
        <ul class="nav-links">
            {% for item in t.navigation %}
            <li>
                <a href="{{ item.url }}"{% if item.external %} target="_blank"{% endif %}>
                    {{ item.text }}
                </a>
            </li>
            {% endfor %}
        </ul>
        {% if locale == 'en' %}
        <a href="/" class="lang-switch" onclick="localStorage.setItem('oki-lang-pref','fr')">{{ t.ui.lang_switch_label }}</a>
        {% else %}
        <a href="/en/" class="lang-switch" onclick="localStorage.setItem('oki-lang-pref','en')">{{ t.ui.lang_switch_label }}</a>
        {% endif %}
        <button id="theme-toggle" class="theme-toggle" aria-label="{{ t.ui.theme_toggle }}" title="{{ t.ui.theme_toggle }}">
            <span class="theme-icon theme-icon-dark">🌙</span>
            <span class="theme-icon theme-icon-light">☀️</span>
        </button>
        <div class="menu-toggle">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
    <div class="flag-bar"></div>
</nav>
