<!-- Modern Header -->
<header class="header">
    <div class="header-content">
        <div class="logo-section">
            <div class="logo">
                <i class="fas fa-terminal"></i>
            </div>
            <div>
                <div class="app-title">cuti</div>
                <div class="app-subtitle">Claude Code Terminal</div>
            </div>
        </div>
        
        <!-- Navigation Pills -->
        <nav class="nav-pills">
            {% for nav_item in nav_items %}
            <a href="{{ nav_item.url }}" 
               class="nav-pill{% if nav_item.active %} active{% endif %}"
               {% if nav_item.target %}target="{{ nav_item.target }}"{% endif %}>
                {% if nav_item.label == "Chat" %}
                <i class="fas fa-comments"></i>
                {% elif nav_item.label == "Agent Manager" %}
                <i class="fas fa-robot"></i>
                {% elif nav_item.label == "Statistics" %}
                <i class="fas fa-chart-line"></i>
                {% endif %}
                <span>{{ nav_item.label }}</span>
            </a>
            {% endfor %}
        </nav>
        
        <div class="header-status">
            <div class="status-indicator">
                <span class="status-dot active"></span>
                <span class="status-text">Connected</span>
            </div>
            <div class="working-dir" x-data="{ showFullPath: false }" @mouseenter="showFullPath = true" @mouseleave="showFullPath = false">
                <i class="fas fa-folder"></i>
                <span class="working-dir-display" x-show="!showFullPath">{{ working_directory.split('/')[-1] if '/' in working_directory else working_directory }}</span>
                <span class="working-dir-full" x-show="showFullPath" x-transition:enter="fade-in" style="display: none;">{{ working_directory }}</span>
            </div>
        </div>
    </div>
</header>