Add Wiki accordion with topics and subtopics

css/styles.css

@@ -80,6 +80,15 @@ a:hover { text-decoration: underline; }
 .user-company, .user-email { font-size: .9rem; color: #6b7280; margin: 0; }
 .user-location { font-size: .85rem; color: #6b7280; margin: 4px 0 0 0; }
 .user-description { font-size: .85rem; color: #4b5563; margin: 8px 0 0 0; max-height: 40px; overflow: hidden; text-overflow: ellipsis; }
+.wiki-accordion { margin: 24px 0; }
+.wiki-topic { margin-bottom: 16px; }
+.wiki-topic h4 { font-size: 1.1rem; font-weight: 600; padding: 12px 16px; background: var(--gray1); border-radius: 8px; cursor: pointer; transition: background .2s; }
+.wiki-topic h4:hover { background: var(--gray2); }
+.wiki-subtopic { margin-left: 24px; border-left: 2px solid var(--gray2); padding-left: 16px; }
+.wiki-subtopic.hidden { display: none; }
+.wiki-subtopic-title { font-weight: 600; padding: 8px 0; cursor: pointer; }
+.wiki-subtopic-title:hover { color: var(--blue); }
+.wiki-subtopic-content { padding: 12px 16px; background: var(--gray1); border-radius: 8px; margin-top: 8px; }
 .user-actions { display: flex; gap: 12px; align-items: center; }
 .user-btn { padding: 8px 16px; font-size: .85rem; }
 .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.5); z-index: 999; display: flex; align-items: center; justify-content: center; }

index.html

@@ -161,8 +161,10 @@
           <div class="tab-content hidden" id="tab-wiki">
             <h3 class="hide-de">Wiki</h3>
             <h3 class="hide-en">Wiki</h3>
-            <p class="hide-de">Hier finden Sie nützliche Informationen zu LLC/SRL in Paraguay.</p>
+            <div id="wiki-content">
-            <p class="hide-en">Useful information about LLC/SRL in Paraguay can be found here.</p>
+              <p class="hide-de">Lade Wiki...</p>
+              <p class="hide-en">Loading wiki...</p>
+            </div>
           </div>
         </div>
       </div>

js/main.js

@@ -2,6 +2,7 @@ document.addEventListener('DOMContentLoaded', () => {
   checkSession();
   if (getCookie('sessionid')) {
     loadUsers();
+    loadWiki();
   }
 });
 
@@ -22,6 +23,7 @@ const API_URL = 'https://n8n.odoo4projects.com/webhook/paraguay/login';
 const NEWSLETTER_URL = 'https://n8n.odoo4projects.com/webhook/paraguay/newsletter';
 const USER_URL = 'https://n8n.odoo4projects.com/webhook/paraguay/user';
 const PROFILE_URL = 'https://n8n.odoo4projects.com/webhook/paraguay/profile';
+const WIKI_URL = 'https://n8n.odoo4projects.com/webhook/paraguay/wiki';
 
 function checkSession() {
   const sessionid = getCookie('sessionid');
@@ -63,6 +65,7 @@ document.querySelectorAll('.notebook .tab').forEach(tab => {
     document.querySelectorAll('.notebook .tab-content').forEach(c => c.classList.add('hidden'));
     document.getElementById('tab-' + tabName).classList.remove('hidden');
     if (tabName === 'users') loadUsers();
+    if (tabName === 'wiki') loadWiki();
   });
 });
 
@@ -304,6 +307,73 @@ function closeProfileModal() {
   document.getElementById('profile-modal').classList.add('hidden');
 }
 
+async function loadWiki() {
+  const wikiContainer = document.getElementById('wiki-content');
+  if (!wikiContainer) return;
+  console.log('loadWiki: starting fetch from', WIKI_URL);
+  try {
+    const response = await fetch(WIKI_URL);
+    console.log('loadWiki: response status =', response.status);
+    if (!response.ok) throw new Error('Failed to fetch wiki');
+    const result = await response.json();
+    console.log('loadWiki: response data =', result);
+    
+    if (result.data && Array.isArray(result.data)) {
+      wikiContainer.innerHTML = '';
+      const topics = {};
+      
+      result.data.forEach(item => {
+        const topic = item.topic || 'Unknown';
+        if (!topics[topic]) topics[topic] = [];
+        topics[topic].push(item);
+      });
+      
+      for (const [topicName, subtopics] of Object.entries(topics)) {
+        const topicDiv = document.createElement('div');
+        topicDiv.className = 'wiki-topic';
+        topicDiv.innerHTML = `
+          <h4 class="hide-de">${topicName}</h4>
+          <h4 class="hide-en">${topicName}</h4>
+          <div class="wiki-subtopics"></div>
+        `;
+        wikiContainer.appendChild(topicDiv);
+        
+        const subtopicsDiv = topicDiv.querySelector('.wiki-subtopics');
+        subtopics.forEach(sub => {
+          const subtopicDiv = document.createElement('div');
+          subtopicDiv.className = 'wiki-subtopic hidden';
+          subtopicDiv.innerHTML = `
+            <div class="wiki-subtopic-title hide-de">${sub.subtopic}</div>
+            <div class="wiki-subtopic-title hide-en">${sub.subtopic}</div>
+            <div class="wiki-subtopic-content">
+              <p class="hide-de">${sub.wiki || 'Keine Informationen verfügbar.'}</p>
+              <p class="hide-en">${sub.wiki || 'No information available.'}</p>
+            </div>
+          `;
+          subtopicsDiv.appendChild(subtopicDiv);
+          
+          const title = subtopicDiv.querySelector('.wiki-subtopic-title');
+          title.onclick = () => {
+            subtopicDiv.classList.toggle('hidden');
+          };
+        });
+        
+        // Auto-expand first subtopic
+        if (subtopics.length > 0) {
+          setTimeout(() => {
+            subtopicsDiv.lastElementChild.classList.remove('hidden');
+          }, 100);
+        }
+      }
+    } else {
+      wikiContainer.innerHTML = '<p>No wiki data found.</p>';
+    }
+  } catch (error) {
+    console.error('loadWiki error:', error);
+    wikiContainer.innerHTML = '<p>Error loading wiki: ' + error.message + '</p>';
+  }
+}
+
 function logout() {
   setCookie('sessionid', '', -1);
   checkSession();