<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LiveComponent Tabs Demo</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            padding: 2rem;
            background: #f5f5f5;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
        }

        h1 {
            margin-bottom: 1rem;
            color: #333;
        }

        .intro {
            background: white;
            padding: 1.5rem;
            border-radius: 8px;
            margin-bottom: 2rem;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .intro h2 {
            font-size: 1.25rem;
            margin-bottom: 1rem;
            color: #444;
        }

        .feature-list {
            line-height: 1.8;
            color: #666;
        }

        .feature-list li {
            margin-bottom: 0.5rem;
        }

        .demo-section {
            background: white;
            padding: 2rem;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            margin-bottom: 2rem;
        }

        .demo-section h3 {
            margin-bottom: 1.5rem;
            color: #333;
            font-size: 1.125rem;
        }

        .demo-controls {
            background: #f9f9f9;
            padding: 1.5rem;
            border-radius: 6px;
            margin-top: 2rem;
        }

        .demo-controls h4 {
            margin-bottom: 1rem;
            color: #333;
        }

        .control-row {
            display: flex;
            gap: 1rem;
            margin-bottom: 1rem;
            flex-wrap: wrap;
        }

        .btn-demo {
            padding: 0.75rem 1.5rem;
            background: #2196F3;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-weight: 500;
            transition: background 0.2s;
        }

        .btn-demo:hover {
            background: #1976D2;
        }

        .btn-demo.btn-success {
            background: #4CAF50;
        }

        .btn-demo.btn-success:hover {
            background: #388E3C;
        }

        .btn-demo.btn-danger {
            background: #f44336;
        }

        .btn-demo.btn-danger:hover {
            background: #d32f2f;
        }

        .btn-demo.btn-secondary {
            background: #9E9E9E;
        }

        .btn-demo.btn-secondary:hover {
            background: #757575;
        }

        .info-box {
            background: #e3f2fd;
            padding: 1rem;
            border-radius: 4px;
            margin-top: 1rem;
            border-left: 4px solid #2196F3;
        }

        .info-box strong {
            color: #1976D2;
        }

        input[type="text"] {
            padding: 0.5rem;
            border: 1px solid #e0e0e0;
            border-radius: 4px;
            font-size: 0.875rem;
            flex: 1;
            min-width: 150px;
        }
    </style>
</head>
<body data-module="livecomponent">
    <div class="container">
        <h1>📑 LiveComponent Tabs Demo</h1>

        <div class="intro">
            <h2>Dynamisches Tab-Management</h2>
            <ul class="feature-list">
                <li>✅ <strong>Dynamic Tabs:</strong> Tabs dynamisch hinzufügen und entfernen</li>
                <li>✅ <strong>Tab Switching:</strong> Nahtloser Wechsel zwischen Tabs</li>
                <li>✅ <strong>Closable Tabs:</strong> Individuelle Tabs können geschlossen werden</li>
                <li>✅ <strong>Maximum Limit:</strong> Konfigurierbare maximale Anzahl von Tabs</li>
                <li>✅ <strong>Content Management:</strong> Titel und Inhalt können aktualisiert werden</li>
                <li>✅ <strong>Tab Reordering:</strong> Tabs können neu angeordnet werden</li>
                <li>✅ <strong>Empty State:</strong> Automatischer leerer Zustand wenn keine Tabs vorhanden</li>
                <li>✅ <strong>Responsive Design:</strong> Optimiert für Desktop und Mobile</li>
            </ul>
        </div>

        <div class="demo-section">
            <h3>Tab Component</h3>
            {{tabs}}

            <div class="demo-controls">
                <h4>Tab-Aktionen testen</h4>

                <div class="control-row">
                    <button class="btn-demo btn-success" onclick="addCustomTab()">
                        ➕ Custom Tab hinzufügen
                    </button>
                    <button class="btn-demo btn-secondary" onclick="addQuickTab()">
                        ⚡ Quick Tab
                    </button>
                    <button class="btn-demo btn-danger" onclick="closeActiveTab()">
                        ✕ Aktiven Tab schließen
                    </button>
                </div>

                <div class="control-row">
                    <input type="text" id="tab-title" placeholder="Tab-Titel" value="Neuer Tab">
                    <input type="text" id="tab-content" placeholder="Tab-Inhalt" value="<p>Neuer Inhalt</p>">
                    <button class="btn-demo" onclick="addTabWithInputs()">
                        Hinzufügen
                    </button>
                </div>

                <div class="control-row">
                    <button class="btn-demo" onclick="updateActiveTabTitle()">
                        📝 Aktiven Titel ändern
                    </button>
                    <button class="btn-demo" onclick="updateActiveTabContent()">
                        📄 Aktiven Inhalt ändern
                    </button>
                </div>

                <div class="info-box">
                    <strong>Tipp:</strong> Klicken Sie auf einen Tab, um ihn zu aktivieren. Verwenden Sie das ✕ Symbol, um einen Tab zu schließen.
                    Die maximale Anzahl von Tabs ist auf 10 begrenzt.
                </div>
            </div>
        </div>
    </div>

    <script>
        // Helper function to trigger tab actions
        function triggerTabAction(action, params = {}) {
            const tabs = document.querySelector('[data-component-id^="tabs:"]');
            if (!tabs) {
                console.error('Tabs component not found');
                return;
            }

            const button = document.createElement('button');
            button.setAttribute('data-live-action', action);

            Object.entries(params).forEach(([key, value]) => {
                button.setAttribute(`data-param-${key}`, value);
            });

            button.style.display = 'none';
            tabs.appendChild(button);
            button.click();
            tabs.removeChild(button);
        }

        // Get current active tab ID
        function getActiveTabId() {
            const activeTab = document.querySelector('.tab-button.active');
            return activeTab ? activeTab.getAttribute('data-param-tab-id') : null;
        }

        // Add Custom Tab
        function addCustomTab() {
            const titles = [
                'Projekt Dashboard',
                'Einstellungen',
                'Benutzer Profil',
                'Analytik',
                'Benachrichtigungen'
            ];

            const contents = [
                '<h3>Projekt Dashboard</h3><p>Übersicht über alle aktiven Projekte und deren Status.</p>',
                '<h3>Einstellungen</h3><p>Konfigurieren Sie Ihre persönlichen Einstellungen hier.</p>',
                '<h3>Benutzer Profil</h3><p>Verwalten Sie Ihr Profil und Ihre persönlichen Informationen.</p>',
                '<h3>Analytik</h3><p>Detaillierte Statistiken und Berichte zu Ihrer Nutzung.</p>',
                '<h3>Benachrichtigungen</h3><p>Verwalten Sie Ihre Benachrichtigungseinstellungen.</p>'
            ];

            const randomIndex = Math.floor(Math.random() * titles.length);

            triggerTabAction('addTab', {
                title: titles[randomIndex],
                content: contents[randomIndex]
            });
        }

        // Add Quick Tab
        function addQuickTab() {
            const timestamp = new Date().toLocaleTimeString('de-DE');
            triggerTabAction('addTab', {
                title: `Quick ${timestamp}`,
                content: `<p>Dieser Tab wurde um ${timestamp} erstellt.</p><p>Schneller Test-Tab für Demonstrationszwecke.</p>`
            });
        }

        // Close Active Tab
        function closeActiveTab() {
            const activeTabId = getActiveTabId();
            if (activeTabId) {
                triggerTabAction('closeTab', {
                    'tab-id': activeTabId
                });
            } else {
                alert('Kein aktiver Tab vorhanden');
            }
        }

        // Add Tab With Custom Inputs
        function addTabWithInputs() {
            const title = document.getElementById('tab-title').value;
            const content = document.getElementById('tab-content').value;

            if (!title.trim()) {
                alert('Bitte geben Sie einen Titel ein');
                return;
            }

            triggerTabAction('addTab', {
                title: title,
                content: content
            });

            // Reset inputs
            document.getElementById('tab-title').value = 'Neuer Tab';
            document.getElementById('tab-content').value = '<p>Neuer Inhalt</p>';
        }

        // Update Active Tab Title
        function updateActiveTabTitle() {
            const activeTabId = getActiveTabId();
            if (!activeTabId) {
                alert('Kein aktiver Tab vorhanden');
                return;
            }

            const newTitle = prompt('Neuer Titel:', 'Aktualisierter Tab');
            if (newTitle && newTitle.trim()) {
                triggerTabAction('updateTabTitle', {
                    'tab-id': activeTabId,
                    title: newTitle
                });
            }
        }

        // Update Active Tab Content
        function updateActiveTabContent() {
            const activeTabId = getActiveTabId();
            if (!activeTabId) {
                alert('Kein aktiver Tab vorhanden');
                return;
            }

            const timestamp = new Date().toLocaleString('de-DE');
            const newContent = `
                <h3>Aktualisierter Inhalt</h3>
                <p>Dieser Inhalt wurde am ${timestamp} aktualisiert.</p>
                <p>Tabs können dynamisch mit neuem Content aktualisiert werden.</p>
                <ul>
                    <li>Dynamische Updates</li>
                    <li>Keine Seiten-Reload</li>
                    <li>Sofortige Änderungen</li>
                </ul>
            `;

            triggerTabAction('updateTabContent', {
                'tab-id': activeTabId,
                content: newContent
            });
        }

        // Demo: Add some initial tabs after page load
        window.addEventListener('DOMContentLoaded', function() {
            // Check if tabs already exist (from server-side rendering)
            const existingTabs = document.querySelectorAll('.tab-button');

            // Only add demo tabs if none exist
            if (existingTabs.length === 0) {
                setTimeout(() => {
                    addCustomTab();
                }, 500);

                setTimeout(() => {
                    addCustomTab();
                }, 1000);
            }
        });
    </script>
</body>
</html>
