{% extends "base.html" %}

{% block title %}X IPE - AI Native Integrated Project Environment{% endblock %}

{% block body %}
<!-- Page Root: 3-row vertical layout (top menu, middle, bottom console) -->
<div class="page-root" id="page-root">
    <!-- ROW 1: Top Menu Bar -->
    <header class="top-menu">
        <div class="brand">
            <!-- FEATURE-026: Make brand clickable to show homepage -->
            <a href="#" class="brand-name" id="brand-home-link" title="Go to Homepage">X IPE</a>
            <span class="brand-subtitle">An AI native integrated project environment for end to end business value delivery</span>
        </div>
        <div class="menu-actions">
            <!-- FEATURE-036-B: Workflow / Free mode toggle -->
            <div class="mode-toggle" id="mode-toggle" title="Switch between Free mode and Workflow mode">
                <span class="mode-label mode-label--free" id="mode-label-free">Free</span>
                <button class="mode-toggle-track" id="mode-toggle-btn" role="switch" aria-checked="false" aria-label="Toggle workflow mode">
                    <span class="mode-toggle-thumb"></span>
                </button>
                <span class="mode-label mode-label--workflow" id="mode-label-workflow">Workflow</span>
            </div>
            <!-- FEATURE-011: Stage Toolbox Button -->
            <button class="menu-link" id="btn-stage-toolbox" title="Stage Toolbox - Manage development tools">
                <i class="bi bi-tools"></i>
                <span>Toolbox</span>
            </button>
            <button class="menu-link" id="skills-btn" title="Skills">
                <i class="bi bi-lightning"></i>
                <span>Skills</span>
            </button>
            <a href="/settings" class="menu-link" title="Settings">
                <i class="bi bi-gear"></i>
                <span>Settings</span>
            </a>
        </div>
    </header>

    <!-- ROW 2: Middle Section (sidebar + content) -->
    <div class="middle-section" id="middle-section">
        <!-- LEFT: Sidebar Navigation -->
        <nav class="sidebar" id="sidebar">
            <!-- Project Switcher (FEATURE-006 v2.0) -->
            <div class="project-switcher">
                <select id="project-select" title="Switch project folder">
                    <option value="">Loading projects...</option>
                </select>
            </div>
            
            <div class="sidebar-content" id="sidebar-content">
                <div class="loading-spinner">
                    <div class="spinner-border spinner-border-sm text-light" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                </div>
            </div>
        </nav>
        
        <!-- Sidebar Resize Handle -->
        <div class="sidebar-resize-handle" id="sidebar-resize-handle"></div>
    
        <!-- RIGHT: Content Area -->
        <main class="content-area">
            <div class="content-header">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb" id="breadcrumb">
                        <li class="breadcrumb-item active">Select a file</li>
                    </ol>
                </nav>
                <div class="header-actions d-flex align-items-center gap-2">
                    <!-- FEATURE-008: Workplace Create Idea Button -->
                    <button class="btn btn-sm btn-primary d-none" id="btn-create-idea" title="Create new idea">
                        <i class="bi bi-plus-lg"></i> Create Idea
                    </button>
                </div>
            </div>
            
            <div class="content-body" id="content-body">
                <div class="content-placeholder">
                    <i class="bi bi-file-earmark-text"></i>
                    <h5>Select a file to view</h5>
                    <p class="text-muted">Choose a file from the sidebar to view its contents</p>
                </div>
            </div>
        </main>
    </div><!-- end middle-section -->

    <!-- ROW 3: Interactive Console - Terminal Panel -->
    <div class="terminal-panel collapsed" id="terminal-panel">
        <div class="terminal-resize-handle" id="terminal-resize-handle"></div>
        <div class="terminal-header" id="terminal-header">
            <!-- Left side: Title and Connection Status -->
            <div class="terminal-header-left">
                <div class="terminal-title">
                    <i class="bi bi-terminal"></i>
                    <span>Console</span>
                </div>
                <div class="terminal-status">
                    <span class="status-indicator connection-status" id="terminal-status-indicator"></span>
                    <span class="status-text" id="terminal-status-text">Connecting...</span>
                </div>
            </div>
            <!-- Center: Voice Controls (FEATURE-021) -->
            <div class="terminal-header-center">
                <button class="copilot-cmd-btn" id="copilot-cmd-btn" title="Insert Copilot command">
                    <i class="bi bi-robot"></i>
                </button>
                <button class="mic-toggle" id="mic-toggle" title="Toggle microphone (Ctrl+Shift+V to record when enabled)">
                    <i class="bi bi-mic-mute"></i>
                </button>
                <div class="voice-indicator" id="voice-indicator">
                    <span class="waveform-bar"></span>
                    <span class="waveform-bar"></span>
                    <span class="waveform-bar"></span>
                    <span class="waveform-bar"></span>
                    <span class="waveform-bar"></span>
                </div>
            </div>
            <!-- Right side: Actions -->
            <div class="terminal-actions">
                <button id="terminal-explorer-toggle" title="Toggle Explorer">
                    <i class="bi bi-layout-sidebar-reverse"></i>
                </button>
                <button id="terminal-zen-btn" title="Zen Mode">
                    <i class="bi bi-arrows-fullscreen"></i>
                </button>
                <button id="terminal-toggle" title="Toggle terminal">
                    <i class="bi bi-chevron-up"></i>
                </button>
            </div>
        </div>
        <!-- Transcription Preview Bar (FEATURE-021) -->
        <div class="transcription-preview" id="transcription-preview">
            <span class="transcription-text" id="transcription-text"></span>
        </div>
        <div class="terminal-body" id="terminal-body">
            <div class="terminal-content" id="terminal-content">
                <!-- Session containers inserted dynamically by TerminalManager -->
            </div>
            <div class="explorer-resize-handle" id="explorer-resize-handle"></div>
            <div class="session-explorer" id="session-explorer">
                <div class="explorer-header">
                    <span class="explorer-title">Sessions</span>
                    <button class="explorer-add-btn" id="explorer-add-btn" title="New Session">
                        <i class="bi bi-plus-lg"></i>
                    </button>
                </div>
                <div class="session-list" id="session-list">
                    <!-- Session bars inserted dynamically by SessionExplorer -->
                </div>
            </div>
        </div>
    </div><!-- end terminal-panel -->
</div><!-- end page-root -->

<!-- Skills Modal -->
<div class="modal fade" id="skills-modal" tabindex="-1" aria-labelledby="skills-modal-label" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="skills-modal-label">
                    <i class="bi bi-lightning me-2"></i>Available Skills
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="skills-modal-body">
                <div class="text-center py-4">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Toast Container for notifications -->
<div class="toast-container" id="toast-container"></div>
{% endblock %}

{% block extra_js %}
{% endblock %}