<link rel="stylesheet" href="/suite/css/browser.css" />

<div class="botcoder-browser-container">
    <div class="botcoder-browser-sidebar">
        <div class="botcoder-browser-header">
            <h3>🌐 Browser Tests</h3>
            <button class="botcoder-btn" onclick="initBrowser()">New Session</button>
        </div>
        
        <div class="botcoder-browser-actions">
            <button id="recordBtn" class="botcoder-btn" onclick="toggleRecording()">⏺ Record</button>
            <button class="botcoder-btn botcoder-btn-primary" onclick="exportTest()">Download Test</button>
        </div>
        
        <div class="botcoder-browser-timeline" id="browserTimeline">
            <div class="botcoder-empty">No actions recorded</div>
        </div>
        
        <div class="botcoder-browser-gallery" id="browserGallery">
            <!-- Screenshots -->
        </div>
    </div>
    
    <div class="botcoder-browser-main">
        <div class="botcoder-browser-address-bar">
            <div class="botcoder-browser-nav">
                <button class="botcoder-btn-icon">⬅</button>
                <button class="botcoder-btn-icon">➡</button>
                <button class="botcoder-btn-icon">↻</button>
            </div>
            <input type="text" id="browserUrl" class="botcoder-browser-url" placeholder="http://localhost:3000" onkeypress="if(event.key === 'Enter') browserNavigate(this.value);" />
            <button class="botcoder-btn-icon" onclick="browserNavigate(document.getElementById('browserUrl').value)">Go</button>
        </div>
        
        <div class="botcoder-browser-preview">
            <!-- Simulated iframe or vnc depending on implementation -->
            <div id="browserCanvas" class="botcoder-browser-canvas">
                <div class="botcoder-empty">Browser not initialized.<br>Click "New Session" to begin.</div>
            </div>
        </div>
    </div>
</div>

<script src="/suite/js/browser.js"></script>
