Solved bugs

app/config.yaml

@@ -193,7 +193,7 @@ navigation:
       identifier: "+491781798023"
       warning: Signal is not hosted by me!
       alternatives:
-        link: navigation.header.contact.matrix
+        - link: navigation.header.contact.matrix
     - name: Telegram
       description: Message me on Telegram
       icon:
@@ -203,7 +203,7 @@ navigation:
       identifier: kevinveenbirkenbach
       warning: Telegram is not hosted by me!
       alternatives:
-        link: navigation.header.contact.matrix
+        - link: navigation.header.contact.matrix
     - name: WhatsApp
       description: Chat with me on WhatsApp
       icon:
@@ -212,7 +212,7 @@ navigation:
       identifier: "+491781798023"
       warning: Whatsapp is not hosted by me!
       alternatives:
-        link: navigation.header.contact.matrix
+        - link: navigation.header.contact.matrix
   footer:
   - name: External Accounts
     description: Me on other plattforms

app/static/js/modal.js

@@ -3,10 +3,13 @@ function openDynamicPopup(subitem) {
   document.getElementById('dynamicModalLabel').innerText = subitem.description;
 
   // Setze den Identifier, falls vorhanden
+  const identifierBox = document.getElementById('dynamicIdentifierBox');
   const modalContent = document.getElementById('dynamicModalContent');
   if (subitem.identifier) {
+      identifierBox.classList.remove('d-none');
       modalContent.value = subitem.identifier;
   } else {
+      identifierBox.classList.add('d-none');
       modalContent.value = '';
   }
 
@@ -39,10 +42,34 @@ function openDynamicPopup(subitem) {
       linkHref.href = '#';
   }
 
+  // Konfiguriere die Alternativen
+  const alternativesList = document.getElementById('dynamicAlternativesList');
+  alternativesList.innerHTML = ''; // Clear existing alternatives
+  if (subitem.alternatives && subitem.alternatives.length > 0) {
+      subitem.alternatives.forEach(alt => {
+          const listItem = document.createElement('li');
+          listItem.classList.add('list-group-item', 'd-flex', 'justify-content-between', 'align-items-center');
+          listItem.innerHTML = `
+            <span>
+              <i class="${alt.icon.class}"></i> ${alt.name}
+            </span>
+            <button class="btn btn-outline-secondary btn-sm" onclick='openDynamicPopup(${JSON.stringify(alt)})'>Open</button>
+          `;
+          alternativesList.appendChild(listItem);
+      });
+  } else {
+      const noAltItem = document.createElement('li');
+      noAltItem.classList.add('list-group-item');
+      noAltItem.innerText = 'No alternatives available.';
+      alternativesList.appendChild(noAltItem);
+  }
+
   // Kopierfunktion für den Identifier
   document.getElementById('dynamicCopyButton').addEventListener('click', function () {
       modalContent.select();
-      navigator.clipboard.writeText(modalContent.value)
+      navigator.clipboard.writeText(modalContent.value).then(() => {
+          alert('Identifier copied to clipboard!');
+      });
   });
 
   // Modal anzeigen

app/templates/moduls/modal.html.j2

@@ -15,7 +15,7 @@
           <i class="fa-solid fa-circle-info"></i> <span id="dynamicModalInfoText"></span>
         </div>
         <!-- Eingabebox für Identifier -->
-        <div class="input-group mt-2">
+        <div id="dynamicIdentifierBox" class="input-group mt-2 d-none">
           <input type="text" id="dynamicModalContent" class="form-control" readonly>
           <button class="btn btn-outline-secondary" type="button" id="dynamicCopyButton">Copy</button>
         </div>
@@ -23,6 +23,13 @@
         <div id="dynamicModalLink" class="mt-3 d-none">
           <a href="#" target="_blank" class="btn btn-primary w-100" id="dynamicModalLinkHref">Open Link</a>
         </div>
+        <!-- Alternativen, falls vorhanden -->
+        <div id="dynamicAlternatives" class="mt-4">
+          <h6>Alternatives:</h6>
+          <ul class="list-group" id="dynamicAlternativesList">
+            <li class="list-group-item">No alternatives available.</li>
+          </ul>
+        </div>
       </div>
       <div class="modal-footer">
         <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>