{% extends "base.html" %}

{% block title %}cuti - Chat Interface{% endblock %}

{% block head %}
<!-- Symphony Mode Toggle Styles -->
<link rel="stylesheet" href="/static/css/symphony-toggle.css">
<!-- Markdown Rendering Styles -->
<link rel="stylesheet" href="/static/css/markdown.css">
<!-- Token Counter Styles -->
<link rel="stylesheet" href="/static/css/token-counter.css">
{% endblock %}

{% set body_class = "" %}
{% set alpine_data = "terminalInterface()" %}

{% block content %}
<!-- Main Content Area -->
<div class="main-content">
    <!-- Terminal-Style Tab Navigation -->
    <div class="terminal-tabs">
        <div class="terminal-tabs-header">
            <span class="tab-prefix">┌─[</span>
            <button @click="activeTab = 'chat'" 
                    :class="{'tab-active': activeTab === 'chat'}" 
                    class="terminal-tab">
                <span class="tab-icon">▸</span>
                <span class="tab-text">TERMINAL</span>
            </button>
            <span class="tab-separator">│</span>
            <button @click="activeTab = 'history'" 
                    :class="{'tab-active': activeTab === 'history'}" 
                    class="terminal-tab">
                <span class="tab-icon">◑</span>
                <span class="tab-text">HISTORY</span>
            </button>
            <span class="tab-separator">│</span>
            <button @click="activeTab = 'settings'" 
                    :class="{'tab-active': activeTab === 'settings'}" 
                    class="terminal-tab">
                <span class="tab-icon">⚙</span>
                <span class="tab-text">SETTINGS</span>
            </button>
            <span class="tab-suffix">]─</span>
            <span class="tab-line"></span>
            
            <!-- Symphony Mode Toggle -->
            <div class="symphony-mode-toggle">
                <label class="symphony-toggle-container" title="Enable Symphony Mode - Orchestrate multiple AI agents">
                    <input type="checkbox" id="symphonyModeToggle" @change="toggleSymphonyMode($event)">
                    <div class="symphony-toggle-track">
                        <div class="symphony-toggle-knob"></div>
                        <span class="symphony-label-solo">SOLO</span>
                        <span class="symphony-label-symphony">SYMPHONY</span>
                        <div class="symphony-status-dot"></div>
                        <div class="symphony-particles">
                            <span class="particle"></span>
                            <span class="particle"></span>
                            <span class="particle"></span>
                            <span class="particle"></span>
                        </div>
                    </div>
                    <span class="symphony-icon">🎼</span>
                </label>
            </div>
        </div>
        <div class="terminal-tabs-indicator">
            <span class="indicator-text" x-text="activeTab === 'chat' ? (symphonyMode ? '> Symphony Mode Active' : '> Terminal Mode') : activeTab === 'history' ? '> Command History' : '> System Settings'"></span>
            <span class="indicator-blink">_</span>
            <a x-show="symphonyMode" href="/orchestration" class="symphony-config-link" title="Configure Agent Orchestra">
                <i class="fas fa-cog"></i> Configure Orchestra
            </a>
        </div>
    </div>
    
    <!-- Terminal Container -->
    <div class="terminal-container" x-show="activeTab === 'chat'" x-transition:enter="fade-in">
        <!-- Floating Token Counter -->
        <div x-show="(tokenCount > 0 || inputTokens > 0 || outputTokens > 0) && activeTab === 'chat'" 
             class="inline-token-counter"
             x-transition:enter="transition ease-out duration-300"
             x-transition:enter-start="opacity-0 transform translate-x-4"
             x-transition:enter-end="opacity-100 transform translate-x-0"
             x-transition:leave="transition ease-in duration-200"
             x-transition:leave-start="opacity-100 transform translate-x-0"
             x-transition:leave-end="opacity-0 transform translate-x-4">
            <div class="token-stats">
                <div class="token-row" x-show="inputTokens > 0">
                    <span class="token-label">↓ Input:</span>
                    <span class="token-value" x-text="inputTokens.toLocaleString()"></span>
                </div>
                <div class="token-row" x-show="outputTokens > 0">
                    <span class="token-label">↑ Output:</span>
                    <span class="token-value" x-text="outputTokens.toLocaleString()"></span>
                </div>
                <div class="token-row" x-show="tokenCount > 0">
                    <span class="token-label">Σ Total:</span>
                    <span class="token-value" style="color: #60a5fa;" x-text="tokenCount.toLocaleString()"></span>
                </div>
                <div class="token-row" x-show="totalCost">
                    <span class="token-cost" x-text="totalCost"></span>
                </div>
            </div>
        </div>
        <!-- Terminal Header -->
        <div class="terminal-header">
            <div class="terminal-controls">
                <div class="terminal-dot red"></div>
                <div class="terminal-dot yellow"></div>
                <div class="terminal-dot green"></div>
            </div>
            <div class="terminal-title">claude-terminal@{{ working_directory }}</div>
            <div style="width: 60px;"></div>
        </div>
        
        <!-- Terminal Output -->
        <div id="terminal-display" class="terminal-output" role="log" aria-label="Chat messages" aria-live="polite">
            <!-- Welcome Message -->
            <div class="system-message" x-show="chatMessages.length === 0 && !isStreaming">
                <div class="timestamp">System</div>
                <div>Welcome to cuti v0.2.0 - Claude Code Terminal Interface</div>
                <div>Type your message below to start chatting with Claude...</div>
                <div>&nbsp;</div>
            </div>
            
            <!-- Chat Messages -->
            <template x-for="message in chatMessages" :key="message.id">
                <div class="terminal-message">
                    <!-- User Input -->
                    <div x-show="message.role === 'user'" class="user-input">
                        <span class="timestamp" x-text="formatTime(message.timestamp)"></span>
                        <span class="terminal-prompt">$</span>
                        <span x-text="message.content"></span>
                    </div>
                    
                    <!-- Assistant Output -->
                    <div x-show="message.role === 'assistant'" class="assistant-output" 
                         x-html="formatTerminalMessage(message.content, message.role)"></div>
                    
                    <!-- Thinking Output -->
                    <div x-show="message.role === 'thinking'" class="thinking-output" 
                         x-html="formatTerminalMessage(message.content, message.role)"></div>
                    
                    <!-- System Messages -->
                    <div x-show="message.role === 'system'" class="system-message">
                        <span class="timestamp" x-text="formatTime(message.timestamp)"></span>
                        <span>[SYSTEM]</span> <span x-text="message.content"></span>
                    </div>
                    
                    <!-- Error Messages -->
                    <div x-show="message.role === 'error'" class="error-message">
                        <span class="timestamp" x-text="formatTime(message.timestamp)"></span>
                        <span>[ERROR]</span> <span x-text="message.content"></span>
                    </div>
                </div>
            </template>
            
            <!-- Current Streaming Message -->
            <div x-show="isStreaming && currentStreamingMessage" class="terminal-message">
                <div class="assistant-output">
                    <span x-html="currentStreamingMessage && currentStreamingMessage.content ? formatTerminalMessage(currentStreamingMessage.content) : ''"></span>
                    <span class="streaming-cursor"></span>
                </div>
            </div>
        </div>
        
        <!-- Modern Input Area -->
        <div class="input-container">
            <!-- Prompt Prefix Editor Modal -->
            <div x-show="showPrefixEditor" 
                 class="prefix-editor-modal"
                 x-transition:enter="transition ease-out duration-200"
                 x-transition:enter-start="opacity-0 transform translate-y-4"
                 x-transition:enter-end="opacity-100 transform translate-y-0"
                 @click.away="showPrefixEditor = false"
                 style="position: absolute; bottom: 100%; left: 0; right: 0; background: #1e293b; border: 1px solid #334155; border-radius: 8px; padding: 16px; margin-bottom: 8px; z-index: 1000;">
                <div style="margin-bottom: 8px;">
                    <label style="color: #94a3b8; font-size: 12px; display: block; margin-bottom: 4px;">Prompt Prefix (Applied to all messages when enabled)</label>
                    <textarea 
                        x-model="promptPrefix"
                        id="prefixEditor"
                        rows="6"
                        style="width: 100%; background: #0f172a; color: #e2e8f0; border: 1px solid #334155; border-radius: 4px; padding: 8px; font-family: 'JetBrains Mono', monospace; font-size: 13px; resize: vertical;"
                        placeholder="Enter your prompt prefix here..."></textarea>
                </div>
                <div style="display: flex; gap: 8px; justify-content: flex-end;">
                    <button @click="resetPromptPrefix()" 
                            style="padding: 6px 12px; background: #475569; color: #e2e8f0; border: none; border-radius: 4px; cursor: pointer; font-size: 12px;">
                        Reset to Default
                    </button>
                    <button @click="showPrefixEditor = false" 
                            style="padding: 6px 12px; background: #475569; color: #e2e8f0; border: none; border-radius: 4px; cursor: pointer; font-size: 12px;">
                        Cancel
                    </button>
                    <button @click="savePromptPrefix()" 
                            style="padding: 6px 12px; background: #3b82f6; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 12px;">
                        Save
                    </button>
                </div>
            </div>
            
            <div class="input-wrapper" style="position: relative;">
                <span class="prompt-symbol">$</span>
                <div style="flex: 1; position: relative; display: flex; align-items: flex-end;">
                    <textarea
                        id="message-input"
                        x-model="chatInput"
                        @input="checkForAgentSuggestion(); adjustTextareaHeight($event.target)"
                        @keydown.enter.prevent="if (!$event.shiftKey) { sendChatMessage(); $event.target.style.height = 'auto'; }"
                        @keydown.shift.enter="$event.stopPropagation()"
                        @keydown.ctrl.c="clearTerminal()"
                        @keydown.tab.prevent="acceptSuggestion()"
                        @keydown.escape="closeSuggestions()"
                        @keydown.arrow-up.prevent="if (!chatInput.includes('\n') || $event.target.selectionStart === 0) navigateSuggestions(-1)"
                        @keydown.arrow-down.prevent="if (!chatInput.includes('\n') || $event.target.selectionStart === chatInput.length) navigateSuggestions(1)"
                        placeholder="Type message... (Shift+Enter for new line, ^ for prefix, /clear to clear)"
                        class="prompt-input"
                        :disabled="isStreaming"
                        x-ref="promptInput"
                        x-init="$el.style.height = 'auto'"
                        style="width: 100%; resize: none; min-height: 24px; max-height: 200px; overflow-y: auto; padding: 2px 8px; line-height: 1.4;"
                        rows="1"
                        aria-label="Message input"
                        role="textbox"
                        aria-multiline="true"></textarea>
                    
                    <!-- Prefix Indicator -->
                    <div x-show="promptPrefixEnabled" 
                         @click="togglePromptPrefix()"
                         style="position: absolute; top: 4px; right: 8px; background: #22c55e; color: white; padding: 2px 6px; border-radius: 3px; font-size: 10px; cursor: pointer; user-select: none;"
                         title="Click to toggle prefix (Currently ON)">
                        PREFIX
                    </div>
                    <div x-show="!promptPrefixEnabled && promptPrefix" 
                         @click="togglePromptPrefix()"
                         style="position: absolute; top: 4px; right: 8px; background: #64748b; color: white; padding: 2px 6px; border-radius: 3px; font-size: 10px; cursor: pointer; user-select: none;"
                         title="Click to enable prefix (Currently OFF)">
                        PREFIX
                    </div>
                    
                    <!-- Agent Suggestions Dropdown -->
                    <div x-show="showAgentSuggestions && agentSuggestions.length > 0" 
                         class="agent-suggestions"
                         @click.away="closeSuggestions()"
                         style="position: absolute; bottom: 100%; left: 0; margin-bottom: 4px;">
                        <template x-for="(suggestion, index) in agentSuggestions" :key="suggestion.name">
                            <div class="agent-suggestion-item"
                                 :class="{'active': selectedSuggestionIndex === index}"
                                 @click="selectAgent(suggestion)"
                                 @mouseenter="selectedSuggestionIndex = index">
                                <div class="suggestion-name" x-text="suggestion.command"></div>
                                <div class="suggestion-description" x-text="suggestion.description"></div>
                            </div>
                        </template>
                    </div>
                </div>
                <button id="send-button" 
                        @click="sendChatMessage()" 
                        :disabled="isStreaming || !chatInput.trim()"
                        class="send-button"
                        style="padding: 8px 16px; background: #3b82f6; color: white; border: none; border-radius: 4px; cursor: pointer; margin-left: 8px;"
                        :style="(isStreaming || !chatInput.trim()) ? 'opacity: 0.5; cursor: not-allowed;' : ''"
                        aria-label="Send message"
                        type="submit">
                    <span x-show="!isStreaming">Send</span>
                    <span x-show="isStreaming">Processing...</span>
                </button>
                <div x-show="isStreaming" class="processing-indicator">
                    <div class="token-counter" x-show="tokenCount > 0">
                        <span class="token-arrow">↑</span>
                        <span class="token-number" x-text="tokenCount"></span>
                        <span class="token-label">tokens</span>
                    </div>
                    <div x-show="!tokenCount || tokenCount === 0" class="processing-dots">
                        <div class="processing-dot"></div>
                        <div class="processing-dot"></div>
                        <div class="processing-dot"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- History Tab - Beautiful Modern Design -->
    <div x-show="activeTab === 'history'" class="history-container" x-transition:enter="fade-in">
        <div class="history-header">
            <div class="history-title-section">
                <div>
                    <h2 class="history-title">
                        <span>📜</span>
                        Command History
                    </h2>
                    <p class="history-subtitle">Browse and rerun your previous commands</p>
                </div>
                <div class="history-stats">
                    <div class="history-stat">
                        <div class="history-stat-value" x-text="commandHistory.length">0</div>
                        <div class="history-stat-label">Total Commands</div>
                    </div>
                    <div class="history-stat">
                        <div class="history-stat-value" x-text="successCount">0</div>
                        <div class="history-stat-label">Successful</div>
                    </div>
                    <div class="history-stat">
                        <div class="history-stat-value" x-text="todayCount">0</div>
                        <div class="history-stat-label">Today</div>
                    </div>
                </div>
            </div>
            
            <div class="history-controls">
                <div class="history-search-wrapper">
                    <span class="history-search-icon">🔍</span>
                    <input type="text" 
                           x-model="historySearch" 
                           @input="filterHistory()"
                           placeholder="Search commands, dates, or status..." 
                           class="history-search">
                </div>
                <div class="history-filter-pills">
                    <button @click="historyFilter = 'all'" 
                            :class="{'filter-pill': true, 'active': historyFilter === 'all'}">All</button>
                    <button @click="historyFilter = 'success'" 
                            :class="{'filter-pill': true, 'active': historyFilter === 'success'}">Success</button>
                    <button @click="historyFilter = 'error'" 
                            :class="{'filter-pill': true, 'active': historyFilter === 'error'}">Failed</button>
                    <button @click="historyFilter = 'today'" 
                            :class="{'filter-pill': true, 'active': historyFilter === 'today'}">Today</button>
                </div>
                <button @click="clearHistory()" class="btn-danger">Clear All</button>
            </div>
        </div>
        
        <div class="history-list-wrapper">
            <div class="history-list">
                <template x-for="item in filteredHistory" :key="item.id">
                    <div class="history-item" @click="rerunCommand(item.content)">
                        <div class="history-item-header">
                            <div class="history-item-meta">
                                <span class="history-time" x-text="formatTime(item.timestamp)"></span>
                                <span class="history-duration" x-text="item.duration || '< 1s'"></span>
                            </div>
                            <span class="history-status" :class="item.status" x-text="item.status"></span>
                        </div>
                        <div class="history-content" x-text="item.content"></div>
                        <div class="history-item-footer">
                            <div class="history-tokens">
                                <div class="token-stat">
                                    <span class="token-icon">💬</span>
                                    <span x-text="item.tokens || '0'"></span>
                                </div>
                                <div class="token-stat">
                                    <span class="token-icon">💰</span>
                                    <span x-text="'$' + (item.cost || '0.00')"></span>
                                </div>
                            </div>
                            <div class="history-actions">
                                <button @click.stop="copyCommand(item.content)" class="history-action-btn">Copy</button>
                                <button @click.stop="rerunCommand(item.content)" class="history-action-btn">Rerun</button>
                            </div>
                        </div>
                    </div>
                </template>
                <div x-show="filteredHistory.length === 0" class="history-empty">
                    <div class="history-empty-icon">📭</div>
                    <h3 class="history-empty-title">
                        <span x-show="historySearch">No matching commands found</span>
                        <span x-show="!historySearch">No command history yet</span>
                    </h3>
                    <p class="history-empty-text">
                        <span x-show="historySearch">Try adjusting your search terms or filters</span>
                        <span x-show="!historySearch">Your command history will appear here</span>
                    </p>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Settings Tab - Beautiful Modern Design -->
    <div x-show="activeTab === 'settings'" class="settings-container" x-transition:enter="fade-in">
        <div class="settings-header">
            <h2 class="settings-title">⚙️ Settings</h2>
            <p class="settings-subtitle">Customize your cuti experience</p>
            
            <nav class="settings-nav">
                <button @click="settingsSection = 'general'" 
                        :class="{'settings-nav-item': true, 'active': settingsSection === 'general'}">
                    <span class="settings-nav-icon">🎨</span>
                    General
                </button>
                <button @click="settingsSection = 'claude'" 
                        :class="{'settings-nav-item': true, 'active': settingsSection === 'claude'}">
                    <span class="settings-nav-icon">🤖</span>
                    Claude AI
                </button>
                <button @click="settingsSection = 'queue'" 
                        :class="{'settings-nav-item': true, 'active': settingsSection === 'queue'}">
                    <span class="settings-nav-icon">📋</span>
                    Queue
                </button>
                <button @click="settingsSection = 'advanced'" 
                        :class="{'settings-nav-item': true, 'active': settingsSection === 'advanced'}">
                    <span class="settings-nav-icon">🔧</span>
                    Advanced
                </button>
            </nav>
        </div>
        
        <div class="settings-content-wrapper">
            <div class="settings-content">
                <!-- General Settings -->
                <div class="settings-section" x-show="settingsSection === 'general' || settingsSection === 'all'">
                    <div class="settings-section-header">
                        <div class="settings-section-icon">🎨</div>
                        <div class="settings-section-title">
                            <h3>General Preferences</h3>
                            <p class="settings-section-desc">Customize appearance and behavior</p>
                        </div>
                    </div>
                    <div class="settings-group">
                        <div class="settings-toggle">
                            <div class="settings-toggle-label">
                                <span class="settings-toggle-text">Dark Mode</span>
                                <span class="settings-toggle-desc">Use dark theme for the interface</span>
                            </div>
                            <label class="settings-switch">
                                <input type="checkbox" x-model="settings.darkMode">
                                <span class="settings-switch-slider"></span>
                            </label>
                        </div>
                        <div class="settings-toggle">
                            <div class="settings-toggle-label">
                                <span class="settings-toggle-text">Show Timestamps</span>
                                <span class="settings-toggle-desc">Display time for each message</span>
                            </div>
                            <label class="settings-switch">
                                <input type="checkbox" x-model="settings.showTimestamps">
                                <span class="settings-switch-slider"></span>
                            </label>
                        </div>
                        <div class="settings-toggle">
                            <div class="settings-toggle-label">
                                <span class="settings-toggle-text">Auto-scroll</span>
                                <span class="settings-toggle-desc">Automatically scroll to new messages</span>
                            </div>
                            <label class="settings-switch">
                                <input type="checkbox" x-model="settings.autoScroll">
                                <span class="settings-switch-slider"></span>
                            </label>
                        </div>
                        <div class="settings-toggle">
                            <div class="settings-toggle-label">
                                <span class="settings-toggle-text">Notification Sounds</span>
                                <span class="settings-toggle-desc">Play sounds for notifications</span>
                            </div>
                            <label class="settings-switch">
                                <input type="checkbox" x-model="settings.enableSound">
                                <span class="settings-switch-slider"></span>
                            </label>
                        </div>
                    </div>
                </div>
                
                <!-- Claude Configuration -->
                <div class="settings-section" x-show="settingsSection === 'claude' || settingsSection === 'all'">
                    <div class="settings-section-header">
                        <div class="settings-section-icon">🤖</div>
                        <div class="settings-section-title">
                            <h3>Claude Code Configuration</h3>
                            <p class="settings-section-desc">Configure Claude Code settings (.claude/settings.local.json)</p>
                        </div>
                    </div>
                    <div class="settings-group">
                        <div class="settings-field">
                            <div class="settings-label">
                                <span class="settings-label-text">Model</span>
                                <span class="settings-label-hint">Claude model to use</span>
                            </div>
                            <select x-model="claudeSettings.model" class="settings-select">
                                <option value="opus">Opus (Most Capable)</option>
                                <option value="sonnet">Sonnet (Balanced)</option>
                                <option value="haiku">Haiku (Fast)</option>
                            </select>
                        </div>
                        
                        <div class="settings-field">
                            <div class="settings-label">
                                <span class="settings-label-text">Login Method</span>
                                <span class="settings-label-hint">Authentication method</span>
                            </div>
                            <select x-model="claudeSettings.forceLoginMethod" class="settings-select">
                                <option value="claudeai">Claude.ai (Default)</option>
                                <option value="browser">Browser</option>
                                <option value="api">API Key</option>
                            </select>
                        </div>
                        
                        <div class="settings-field">
                            <div class="settings-label">
                                <span class="settings-label-text">Cleanup Period</span>
                                <span class="settings-label-hint">Days to retain temporary files</span>
                            </div>
                            <div class="settings-input-wrapper">
                                <input type="number" 
                                       x-model="claudeSettings.cleanupPeriodDays" 
                                       class="settings-input" 
                                       min="1" max="365"
                                       placeholder="180">
                                <span class="settings-input-icon">📅</span>
                            </div>
                        </div>
                        
                        <div class="settings-toggle">
                            <div class="settings-toggle-label">
                                <span class="settings-toggle-text">Include Co-authored By</span>
                                <span class="settings-toggle-desc">Add Claude attribution to commits</span>
                            </div>
                            <label class="settings-switch">
                                <input type="checkbox" x-model="claudeSettings.includeCoAuthoredBy">
                                <span class="settings-switch-slider"></span>
                            </label>
                        </div>
                        
                        <div class="settings-toggle">
                            <div class="settings-toggle-label">
                                <span class="settings-toggle-text">Maintain Working Directory</span>
                                <span class="settings-toggle-desc">Keep bash commands in project root</span>
                            </div>
                            <label class="settings-switch">
                                <input type="checkbox" x-model="claudeSettings.maintainWorkingDir">
                                <span class="settings-switch-slider"></span>
                            </label>
                        </div>
                        
                        <div class="settings-toggle">
                            <div class="settings-toggle-label">
                                <span class="settings-toggle-text">Auto Install Dependencies</span>
                                <span class="settings-toggle-desc">Automatically install required packages</span>
                            </div>
                            <label class="settings-switch">
                                <input type="checkbox" x-model="claudeSettings.autoInstall">
                                <span class="settings-switch-slider"></span>
                            </label>
                        </div>
                        
                        <div class="settings-toggle">
                            <div class="settings-toggle-label">
                                <span class="settings-toggle-text">Cost Warnings</span>
                                <span class="settings-toggle-desc">Show warnings for expensive operations</span>
                            </div>
                            <label class="settings-switch">
                                <input type="checkbox" x-model="claudeSettings.costWarnings">
                                <span class="settings-switch-slider"></span>
                            </label>
                        </div>
                        
                        <div class="settings-toggle">
                            <div class="settings-toggle-label">
                                <span class="settings-toggle-text">Enable Telemetry</span>
                                <span class="settings-toggle-desc">Share usage data with Anthropic</span>
                            </div>
                            <label class="settings-switch">
                                <input type="checkbox" x-model="claudeSettings.telemetry">
                                <span class="settings-switch-slider"></span>
                            </label>
                        </div>
                        
                        <div class="settings-toggle">
                            <div class="settings-toggle-label">
                                <span class="settings-toggle-text">Auto Updater</span>
                                <span class="settings-toggle-desc">Automatically update Claude Code</span>
                            </div>
                            <label class="settings-switch">
                                <input type="checkbox" x-model="claudeSettings.autoUpdater">
                                <span class="settings-switch-slider"></span>
                            </label>
                        </div>
                    </div>
                </div>
                
                <!-- Queue Settings -->
                <div class="settings-section" x-show="settingsSection === 'queue' || settingsSection === 'all'">
                    <div class="settings-section-header">
                        <div class="settings-section-icon">📋</div>
                        <div class="settings-section-title">
                            <h3>Queue Management</h3>
                            <p class="settings-section-desc">Configure task queue behavior</p>
                        </div>
                    </div>
                    <div class="settings-group">
                        <div class="settings-field">
                            <div class="settings-label">
                                <span class="settings-label-text">Check Interval</span>
                                <span class="settings-label-hint">Queue polling frequency (seconds)</span>
                            </div>
                            <div class="settings-input-wrapper">
                                <input type="number" 
                                       x-model="settings.checkInterval" 
                                       class="settings-input" 
                                       min="10" max="300"
                                       placeholder="60">
                                <span class="settings-input-icon">🔄</span>
                            </div>
                        </div>
                        <div class="settings-field">
                            <div class="settings-label">
                                <span class="settings-label-text">Max Retries</span>
                                <span class="settings-label-hint">Failed task retry attempts</span>
                            </div>
                            <div class="settings-input-wrapper">
                                <input type="number" 
                                       x-model="settings.maxRetries" 
                                       class="settings-input" 
                                       min="0" max="10"
                                       placeholder="3">
                                <span class="settings-input-icon">🔁</span>
                            </div>
                        </div>
                        <div class="settings-field">
                            <div class="settings-label">
                                <span class="settings-label-text">Concurrent Tasks</span>
                                <span class="settings-label-hint">Max parallel processing</span>
                            </div>
                            <div class="settings-input-wrapper">
                                <input type="number" 
                                       x-model="settings.concurrentTasks" 
                                       class="settings-input" 
                                       min="1" max="5"
                                       placeholder="2">
                                <span class="settings-input-icon">⚡</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Advanced Settings -->
                <div class="settings-section" x-show="settingsSection === 'advanced' || settingsSection === 'all'">
                    <div class="settings-section-header">
                        <div class="settings-section-icon">🔧</div>
                        <div class="settings-section-title">
                            <h3>Advanced Options</h3>
                            <p class="settings-section-desc">Power user settings</p>
                        </div>
                    </div>
                    <div class="settings-group">
                        <div class="settings-checkbox-group">
                            <label class="settings-checkbox">
                                <input type="checkbox" x-model="settings.debugMode">
                                <span class="settings-checkbox-label">Enable Debug Mode</span>
                            </label>
                            <label class="settings-checkbox">
                                <input type="checkbox" x-model="settings.verboseLogging">
                                <span class="settings-checkbox-label">Verbose Logging</span>
                            </label>
                            <label class="settings-checkbox">
                                <input type="checkbox" x-model="settings.experimentalFeatures">
                                <span class="settings-checkbox-label">Experimental Features</span>
                            </label>
                            <label class="settings-checkbox">
                                <input type="checkbox" x-model="settings.collectAnalytics">
                                <span class="settings-checkbox-label">Share Usage Analytics</span>
                            </label>
                        </div>
                        <div class="settings-field">
                            <div class="settings-label">
                                <span class="settings-label-text">Storage Path</span>
                                <span class="settings-label-hint">Custom data storage location</span>
                            </div>
                            <div class="settings-input-wrapper">
                                <input type="text" 
                                       x-model="settings.storagePath" 
                                       class="settings-input" 
                                       placeholder="~/.cuti/">
                                <span class="settings-input-icon">📁</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="settings-actions">
            <div class="settings-actions-info">
                <span>✅</span>
                <span x-show="settingsSaved">Settings saved successfully!</span>
                <span x-show="!settingsSaved">Unsaved changes</span>
            </div>
            <div class="settings-actions-buttons">
                <button @click="exportSettings()" class="btn-secondary">
                    <span>📤</span>
                    Export
                </button>
                <button @click="resetSettings()" class="btn-secondary">
                    <span>↺</span>
                    Reset
                </button>
                <button @click="saveSettings()" class="btn-primary">
                    <span>💾</span>
                    Save Changes
                </button>
            </div>
        </div>
    </div>
</div>

{% include 'components/sidebar.html' %}
{% endblock %}

{% block scripts %}
<!-- Markdown Renderer -->
<script src="/static/js/markdown-renderer.js"></script>
{% endblock %}