<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tings • Dashboard</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header class="top-bar">
        <div class="logo">
            <span class="logo-icon">🧩</span>
            <h1>Tings</h1>
        </div>
        
        <div class="header-controls">
            <button id="edit-toggle" class="edit-btn">
                <span id="edit-text">Edit OFF</span>
            </button>
            
            <button id="new-section-btn" class="new-section-btn hidden">
                + New Section
            </button>
            
            <button id="export-btn" class="tool-btn">📤 Export</button>
            <button id="import-btn" class="tool-btn">📥 Import</button>
        </div>
    </header>

    <main id="dashboard" class="dashboard"></main>

    <!-- Ting Add/Edit Modal -->
    <div id="ting-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2 id="modal-title">Add New Ting</h2>
                <button class="modal-close">✕</button>
            </div>
            
            <form id="ting-form">
                <div class="form-grid">
                    <div class="form-field">
                        <label>Name <span class="required">*</span></label>
                        <input type="text" id="ting-name" required>
                    </div>
                    
                    <div class="form-field">
                        <label>URL <span class="required">*</span></label>
                        <input type="text" id="ting-url" placeholder="https://example.com or local path" required>
                    </div>
                    
                    <div class="form-field">
                        <label>Icon URL (optional)</label>
                        <input type="text" id="ting-icon" placeholder="https://.../icon.png or emoji">
                    </div>
                    
                    <div class="form-field">
                        <label>Tint (CSS color)</label>
                        <input type="color" id="ting-tint" value="#00ff88">
                        <small class="hint">Used for border + icon accent</small>
                    </div>
                    
                    <div class="form-field">
                        <label>Hint (tooltip)</label>
                        <input type="text" id="ting-hint" placeholder="Quick description">
                    </div>
                    
                    <div class="form-field">
                        <label>Target</label>
                        <select id="ting-target">
                            <option value="_blank">_blank – Open in new tab</option>
                            <option value="_self">_self – Replace current page</option>
                            <option value="_top">_top – Open in topmost frame</option>
                            <option value="_parent">_parent – Open in parent frame</option>
                            <option value="overlay">overlay – Open inside modal (iframe / video / embed)</option>
                        </select>
                        <div id="target-description" class="target-desc">
                            Opens the URL without leaving the dashboard. Perfect for tools, games, scripts, videos, m3u8 streams, RTSP, etc.
                        </div>
                    </div>
                    
                    <div class="form-field">
                        <label>Click Sound URL (optional)</label>
                        <input type="text" id="ting-click-sound" placeholder="https://.../click.mp3">
                    </div>
                    
                    <div class="form-field">
                        <label>Hover Sound URL (optional)</label>
                        <input type="text" id="ting-hover-sound" placeholder="https://.../hover.mp3">
                    </div>
                </div>
                
                <div class="modal-actions">
                    <button type="button" id="modal-cancel" class="secondary">Cancel</button>
                    <button type="submit" id="modal-save" class="primary">Save Ting</button>
                </div>
            </form>
        </div>
    </div>

    <!-- Section Settings Modal -->
    <div id="section-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2 id="section-modal-title">Section Settings</h2>
                <button class="modal-close">✕</button>
            </div>
            
            <form id="section-form">
                <div class="form-grid">
                    <div class="form-field">
                        <label>Section Name</label>
                        <input type="text" id="section-name" required>
                    </div>
                    
                    <div class="form-field">
                        <label>Header Background</label>
                        <input type="color" id="section-header-bg" value="#1f2937">
                    </div>
                    
                    <div class="form-field">
                        <label>Header Text Color</label>
                        <input type="color" id="section-header-text" value="#ffffff">
                    </div>
                    
                    <div class="form-field">
                        <label>Section Background Color</label>
                        <input type="color" id="section-bg-color" value="#334155">
                    </div>
                    
                    <div class="form-field">
                        <label>Background Image URL (optional)</label>
                        <input type="text" id="section-bg-image" placeholder="https://.../bg.png">
                        <small>Transparent PNGs will show the background color underneath</small>
                    </div>
                    
                    <div class="form-field">
                        <label>Outline Color</label>
                        <input type="color" id="section-outline-color" value="#64748b">
                    </div>
                    
                    <div class="form-field">
                        <label>Outline Thickness (px)</label>
                        <input type="number" id="section-outline-thickness" value="3" min="0" max="12">
                    </div>
                    
                    <div class="form-field">
                        <label>Columns (1–6)</label>
                        <input type="number" id="section-columns" value="4" min="1" max="6">
                        <small>Number of columns for the tings grid (rows auto-adjust)</small>
                    </div>
                </div>
                
                <div class="modal-actions">
                    <button type="button" id="section-delete" class="danger hidden">Delete Section</button>
                    <button type="button" id="section-cancel" class="secondary">Cancel</button>
                    <button type="submit" id="section-save" class="primary">Save Section</button>
                </div>
            </form>
        </div>
    </div>

    <!-- Overlay Modal (for target="overlay") -->
    <div id="overlay-modal" class="overlay-modal hidden">
        <div class="overlay-header">
            <h3 id="overlay-title"></h3>
            <div class="overlay-controls">
                <button id="overlay-fullscreen" title="Toggle fullscreen">⛶</button>
                <button id="overlay-close">✕</button>
            </div>
        </div>
        <div id="overlay-content" class="overlay-content">
            <!-- iframe or video injected here by JS -->
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>