@extends('demos.windows.app_layout', ['fullPage' => true])

@section('bg-color', '#020617')

@section('app-ui')
    <div class="commander-interface">
        
        <!-- 1. TOP TITLE BAR (In-App) -->
        <div class="app-internal-header">
            <div class="app-nav-buttons">
                <i class="fas fa-chevron-left"></i>
                <i class="fas fa-chevron-right"></i>
            </div>
            <div class="app-path-input">
                <i class="fas fa-hdd"></i>
                <span>C:\Users\Kotsch_Tech\Projects\Commander_V2</span>
            </div>
            <div class="app-search">
                <i class="fas fa-search"></i>
                <input type="text" placeholder="Suchen...">
            </div>
        </div>

        <!-- 2. MAIN TOOLBAR -->
        <div class="cmd-toolbar">
            <div class="t-group">
                <button class="t-btn active"><i class="fas fa-copy"></i> Copy</button>
                <button class="t-btn"><i class="fas fa-file-export"></i> Move</button>
                <button class="t-btn"><i class="fas fa-edit"></i> Rename</button>
                <button class="t-btn btn-danger"><i class="fas fa-trash"></i> Delete</button>
            </div>
            <div class="t-group">
                <button class="t-btn"><i class="fas fa-folder-plus"></i> New</button>
                <button class="t-btn"><i class="fas fa-terminal"></i> Terminal</button>
            </div>
        </div>

        <!-- 3. DUAL PANE AREA -->
        <div class="dual-pane">
            <!-- LINKE SEITE -->
            <div class="pane">
                <div class="pane-table-header">
                    <span style="flex: 2;">Name</span>
                    <span style="flex: 0.5;">Size</span>
                    <span style="flex: 1;">Date Modified</span>
                </div>
                <div class="file-list">
                    <div class="file-row selected">
                        <i class="fas fa-folder"></i> <span class="name-text">_build_logs</span> 
                        <small class="size-text">DIR</small> 
                        <small class="date-text">12.02.2026</small>
                    </div>
                    <div class="file-row">
                        <i class="fas fa-folder"></i> <span class="name-text">bin</span> 
                        <small class="size-text">DIR</small> 
                        <small class="date-text">11.02.2026</small>
                    </div>
                    <div class="file-row">
                        <i class="fas fa-file-code" style="color: #3b82f6;"></i> <span class="name-text">core_kernel.cpp</span> 
                        <small class="size-text">142 KB</small> 
                        <small class="date-text">10.02.2026</small>
                    </div>
                    <div class="file-row">
                        <i class="fas fa-file-archive" style="color: #f59e0b;"></i> <span class="name-text">assets.zip</span> 
                        <small class="size-text">1.2 GB</small> 
                        <small class="date-text">09.02.2026</small>
                    </div>
                    <div class="file-row">
                        <i class="fas fa-file-image" style="color: #ec4899;"></i> <span class="name-text">ui_preview.png</span> 
                        <small class="size-text">4.5 MB</small> 
                        <small class="date-text">08.02.2026</small>
                    </div>
                </div>
            </div>

            <!-- RECHTE SEITE -->
            <div class="pane">
                <div class="pane-table-header">
                    <span style="flex: 2;">Name</span>
                    <span style="flex: 0.5;">Size</span>
                    <span style="flex: 1;">Date Modified</span>
                </div>
                <div class="file-list">
                    <div class="file-row">
                        <i class="fas fa-folder"></i> <span class="name-text">D:\Backup_Sachsen</span> 
                        <small class="size-text">DIR</small> 
                        <small class="date-text">01.01.2026</small>
                    </div>
                    <div class="file-row empty-msg">
                        <span>Warte auf Dateiübertragung...</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 4. STATUS BAR -->
        <div class="cmd-status">
            <div class="status-left">
                <span class="status-badge">6 OBJECTS</span>
                <span>452.8 GB FREE ON C:\</span>
            </div>
            <div class="status-right">
                <i class="fas fa-shield-halved"></i> <span>NVMe ENGINE ACTIVE</span>
            </div>
        </div>
    </div>

    <style>
        /* RESET & FULLSIZE */
        .commander-interface {
            width: 100vw;
            height: 100vh;
            display: flex;
            flex-direction: column;
            background: #020617;
            text-align: left;
            font-size: 0.85rem;
            color: #e2e8f0;
        }

        /* INTERNAL APP HEADER */
        .app-internal-header {
            background: #1e293b;
            padding: 12px 20px;
            display: flex;
            align-items: center;
            gap: 20px;
            border-bottom: 1px solid #334155;
        }
        .app-nav-buttons { display: flex; gap: 15px; color: #64748b; }
        .app-path-input {
            flex: 1;
            background: #0f172a;
            border: 1px solid #334155;
            padding: 8px 15px;
            border-radius: 6px;
            font-family: monospace;
            font-size: 0.75rem;
            display: flex;
            align-items: center;
            gap: 10px;
            color: #94a3b8;
        }
        .app-path-input span { color: #3b82f6; font-weight: bold; }
        .app-search { background: #0f172a; border-radius: 6px; padding: 5px 15px; border: 1px solid #334155; display: flex; align-items: center; gap: 10px; }
        .app-search input { background: transparent; border: none; color: white; font-size: 0.75rem; outline: none; width: 100px; }

        /* TOOLBAR */
        .cmd-toolbar {
            background: #1e293b;
            padding: 10px 20px;
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid #000;
        }
        .t-group { display: flex; gap: 8px; }
        .t-btn {
            background: rgba(255,255,255,0.03);
            border: 1px solid #334155;
            color: #cbd5e1;
            padding: 8px 16px;
            border-radius: 6px;
            font-size: 0.75rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: 0.2s;
        }
        .t-btn:hover { background: #334155; color: white; }
        .t-btn.active { background: #2563eb; color: white; border-color: #3b82f6; }

        /* DUAL PANE */
        .dual-pane { flex: 1; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; background: #020617; }
        .pane { display: flex; flex-direction: column; border-right: 1px solid #1e293b; }
        
        .pane-table-header {
            background: #0f172a;
            padding: 10px 20px;
            font-weight: 800;
            text-transform: uppercase;
            font-size: 0.65rem;
            color: #64748b;
            display: flex;
            border-bottom: 1px solid #1e293b;
            letter-spacing: 1px;
        }

        .file-list { flex: 1; padding: 10px; overflow-y: auto; }
        .file-row {
            display: flex;
            align-items: center;
            padding: 10px 15px;
            border-radius: 8px;
            gap: 15px;
            margin-bottom: 2px;
            transition: 0.2s;
        }
        .file-row i { width: 20px; text-align: center; font-size: 1.1rem; }
        .name-text { flex: 2; font-weight: 500; }
        .size-text { flex: 0.5; font-family: monospace; opacity: 0.5; font-size: 0.75rem; }
        .date-text { flex: 1; opacity: 0.3; font-size: 0.7rem; text-align: right; }

        .file-row.selected { background: rgba(37, 99, 235, 0.15); border: 1px solid rgba(37, 99, 235, 0.3); color: #60a5fa; }
        .file-row:hover:not(.selected) { background: rgba(255,255,255,0.03); }
        .empty-msg { justify-content: center; height: 100%; opacity: 0.2; font-style: italic; }

        /* STATUS BAR */
        .cmd-status {
            background: #1e293b;
            padding: 10px 25px;
            font-size: 0.7rem;
            color: #94a3b8;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: 700;
            border-top: 1px solid #000;
        }
        .status-badge { background: #334155; color: white; padding: 2px 8px; border-radius: 4px; margin-right: 15px; }
        .status-right { color: #10b981; display: flex; align-items: center; gap: 8px; }

        /* SCROLLBAR */
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: #020617; }
        ::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 10px; }
    </style>
@endsection