<!-- 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 == "Todos" %}
                <i class="fas fa-tasks"></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>
                {% elif nav_item.label == "Global Settings" %}
                <i class="fas fa-cog"></i>
                {% endif %}
                <span>{{ nav_item.label }}</span>
            </a>
            {% endfor %}
        </nav>
        
        <div class="header-status">
            <div class="status-indicator" id="claude-status" x-data="claudeStatus()" x-init="checkStatus()">
                <span class="status-dot" :class="statusClass"></span>
                <span class="status-text" x-text="statusText"></span>
                <i class="fas fa-info-circle" 
                   x-show="statusDetails" 
                   @click="showDetails = !showDetails"
                   style="margin-left: 5px; cursor: pointer; font-size: 0.9em;"></i>
                <div class="status-tooltip" 
                     x-show="showDetails" 
                     @click.away="showDetails = false"
                     x-transition:enter="fade-in"
                     style="position: absolute; top: 100%; right: 0; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 8px; padding: 12px; margin-top: 8px; min-width: 250px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 1000;">
                    <div style="font-size: 0.9em; color: var(--text-secondary);">
                        <div x-show="claude.installed">
                            <i class="fas fa-check-circle" style="color: var(--success-color);"></i> Claude installed
                        </div>
                        <div x-show="!claude.installed">
                            <i class="fas fa-times-circle" style="color: var(--error-color);"></i> Claude not installed
                        </div>
                        <div x-show="claude.authorized">
                            <i class="fas fa-key" style="color: var(--success-color);"></i> Authorized <span x-text="claude.subscription_plan ? '(' + claude.subscription_plan + ')' : ''"></span>
                        </div>
                        <div x-show="!claude.authorized && claude.installed">
                            <i class="fas fa-lock" style="color: var(--warning-color);"></i> Not authorized
                        </div>
                        <div x-show="claude.version" style="margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-color);">
                            Version: <span x-text="claude.version"></span>
                        </div>
                    </div>
                </div>
            </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>