<nav class="op-navbar">
    <div class="op-navbar-left">
        <button class="op-sidebar-toggle" id="sidebar-toggle" aria-label="Toggle sidebar">
            <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                <path d="M3 12h18M3 6h18M3 18h18"/>
            </svg>
        </button>
        <div class="op-breadcrumb">
            {% block breadcrumb %}{% endblock %}
        </div>

        <span class="op-navbar-greeting">Hi {{ current_user.name|default('Admin') }}, Welcome to {{ app_name }}</span>
    </div>

    <div class="op-navbar-right">
        <div class="op-navbar-search">
            <svg class="op-search-icon" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                <circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/>
            </svg>
            <input type="search" placeholder="{{ __('common.search') }}" class="op-input op-input-sm" id="global-search">
        </div>

        <button class="op-icon-btn" id="theme-toggle" title="{{ __('navbar.toggle_theme') }}" aria-label="{{ __('navbar.toggle_theme') }}">
            <svg id="moonIcon" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/>
            </svg>
            <svg id="sunIcon" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" style="display:none;">
                <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/>
            </svg>
        </button>

        <div class="op-navbar-alerts" id="alert-bell">
            <button class="op-icon-btn" title="{{ __('navbar.alerts') }}">
                <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/>
                </svg>
                {% if (unread_alerts|default(0)) > 0 %}
                <span class="op-badge-dot" data-count="{{ unread_alerts }}">{{ unread_alerts }}</span>
                {% endif %}
            </button>
        </div>
    </div>
</nav>
