<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Interaktive Mindmap</title>
  
  <!-- Cytoscape.js -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.26.0/cytoscape.min.js"></script>
  
  <!-- Socket.IO -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.2/socket.io.min.js"></script>
  
  <!-- Feather Icons (optional) -->
  <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
  
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background-color: #f9fafb;
      color: #111827;
      line-height: 1.5;
    }
    
    .container {
      display: flex;
      flex-direction: column;
      height: 100vh;
      width: 100%;
    }
    
    .header {
      background-color: #1f2937;
      color: white;
      padding: 1rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .header h1 {
      font-size: 1.5rem;
      font-weight: 500;
    }
    
    .toolbar {
      background-color: #f3f4f6;
      padding: 0.75rem;
      display: flex;
      gap: 0.5rem;
      border-bottom: 1px solid #e5e7eb;
    }
    
    .btn {
      background-color: #3b82f6;
      color: white;
      border: none;
      border-radius: 0.25rem;
      padding: 0.5rem 1rem;
      font-size: 0.875rem;
      cursor: pointer;
      transition: background-color 0.2s;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
    
    .btn:hover {
      background-color: #2563eb;
    }
    
    .btn-secondary {
      background-color: #6b7280;
    }
    
    .btn-secondary:hover {
      background-color: #4b5563;
    }
    
    .btn-danger {
      background-color: #ef4444;
    }
    
    .btn-danger:hover {
      background-color: #dc2626;
    }
    
    .search-container {
      flex: 1;
      display: flex;
      margin-left: 1rem;
    }
    
    .search-input {
      width: 100%;
      max-width: 300px;
      padding: 0.5rem;
      border: 1px solid #d1d5db;
      border-radius: 0.25rem;
      font-size: 0.875rem;
    }
    
    #cy {
      flex: 1;
      width: 100%;
      position: relative;
    }
    
    .category-filters {
      display: flex;
      gap: 0.5rem;
      flex-wrap: wrap;
      padding: 0.75rem;
      background-color: #ffffff;
      border-bottom: 1px solid #e5e7eb;
    }
    
    .category-filter {
      border: none;
      border-radius: 0.25rem;
      padding: 0.25rem 0.75rem;
      font-size: 0.75rem;
      cursor: pointer;
      transition: opacity 0.2s;
      color: white;
    }
    
    .category-filter:not(.active) {
      opacity: 0.6;
    }
    
    .category-filter:hover:not(.active) {
      opacity: 0.8;
    }
    
    .footer {
      background-color: #f3f4f6;
      padding: 0.75rem;
      text-align: center;
      font-size: 0.75rem;
      color: #6b7280;
      border-top: 1px solid #e5e7eb;
    }
    
    /* Kontextmenü Styling */
    #context-menu {
      position: absolute;
      background-color: white;
      border: 1px solid #e5e7eb;
      border-radius: 0.25rem;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      z-index: 1000;
    }
    
    #context-menu .menu-item {
      padding: 0.5rem 1rem;
      cursor: pointer;
    }
    
    #context-menu .menu-item:hover {
      background-color: #f3f4f6;
    }
  </style>
</head>
<body>
  <div class="container">
    <header class="header">
      <h1>Interaktive Mindmap</h1>
      <div class="search-container">
        <input type="text" id="search-mindmap" class="search-input" placeholder="Suchen...">
      </div>
    </header>
    
    <div class="toolbar">
      <button id="addNode" class="btn">
        <i data-feather="plus-circle"></i>
        Knoten hinzufügen
      </button>
      <button id="addEdge" class="btn">
        <i data-feather="git-branch"></i>
        Verbindung erstellen
      </button>
      <button id="editNode" class="btn btn-secondary">
        <i data-feather="edit-2"></i>
        Knoten bearbeiten
      </button>
      <button id="deleteNode" class="btn btn-danger">
        <i data-feather="trash-2"></i>
        Knoten löschen
      </button>
      <button id="deleteEdge" class="btn btn-danger">
        <i data-feather="scissors"></i>
        Verbindung löschen
      </button>
      <button id="reLayout" class="btn btn-secondary">
        <i data-feather="refresh-cw"></i>
        Layout neu anordnen
      </button>
      <button id="exportMindmap" class="btn btn-secondary">
        <i data-feather="download"></i>
        Exportieren
      </button>
    </div>
    
    <div id="category-filters" class="category-filters">
      <!-- Wird dynamisch befüllt -->
    </div>
    
    <div id="cy"></div>
    
    <footer class="footer">
      Mindmap-Anwendung © 2023
    </footer>
  </div>
  
  <!-- Unsere Mindmap JS -->
  <script src="{{ url_for('static', filename='js/mindmap.js') }}"></script>
  
  <!-- Icons initialisieren -->
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      if (typeof feather !== 'undefined') {
        feather.replace();
      }
    });
  </script>
</body>
</html>