<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Mein Wiki</title>
    <link rel="stylesheet" href="/output.css" />
  <script>
    function toggleSubtree(id) {
      const el = document.getElementById(id);
      const icon = document.getElementById('icon-' + id);
      if (el.classList.contains('hidden')) {
        el.classList.remove('hidden');
        icon.textContent = '▼';
      } else {
        el.classList.add('hidden');
        icon.textContent = '▶';
      }
    }
  </script>
</head>
<body class="bg-gray-100 text-gray-900 font-sans flex flex-col min-h-screen">
     <header class="md:hidden flex items-center justify-between bg-white border-b p-4">
    <h1 class="text-lg font-bold">Wiki</h1>
    <button id="menu-btn" class="focus:outline-none">
      <!-- einfaches SVG-Icon -->
      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
              d="M4 6h16M4 12h16M4 18h16" />
      </svg>
    </button>
  </header>

  <div class="flex flex-1">
    <!-- Sidebar -->
      <aside id="sidebar"
      class="fixed inset-y-0 left-0 z-40 w-64 bg-gray-200 border-r border-gray-400 p-4 overflow-y-auto
             transform -translate-x-full transition-transform duration-200 ease-in-out
             md:relative md:translate-x-0 md:transform-none">
      <!-- Dein Menü hier kopieren -->
      <div class="flex justify-between items-center mb-4">
        <h1 class="text-xl font-bold">Wiki-Menü</h1>
      </div>
      <nav class="space-y-2 text-sm">
        <ul class="space-y-1">
            {{- $global := . -}}
            {{define "node"}}
            {{- $ctx := . -}}
            {{range $ctx.Menu.Children }}
            {{if .Page}}
          <li>
              <a href="{{ .Link }}" class="block px-2 py-1 rounded hover:bg-gray-300">{{ .Name }}</a>
          </li>
            {{ else }}
          <li>
              <button onclick="toggleSubtree('{{ .ID }}')" class="w-full text-left px-2 py-1 rounded hover:bg-gray-300 flex items-center">
                <span id="icon-{{ .ID }}" class="mr-2">{{if ne (index $ctx.Folder .Level) .Name}}▶{{else}}▼{{end}}</span>{{ .Text }}
            </button>
              <ul id="{{ .ID }}" class="ml-4 mt-1 {{if ne (index $ctx.Folder .Level) .Name}}hidden{{end}} space-y-1">
            {{template "node" (dict "Menu" . "Folder" $ctx.Folder) }}
            </ul>
          </li>
            {{ end }}
            {{ end }}
            {{ end }}
            {{template "node" (dict "Menu" .Menu "Folder" .Folders) }}
        </ul>
      </nav>
    </aside>

       <div id="overlay"
         class="fixed inset-0 bg-black bg-opacity-50 z-30 opacity-0 pointer-events-none
                transition-opacity duration-200 ease-in-out
                md:hidden"></div>

    <!-- Main Content -->
    <main class="flex-1 p-8 overflow-y-auto">
        <div class="max-w-screen-xl mx-auto">
        <h1 class="text-4xl font-bold mb-6 float-left">{{ .Title }}</h1><h5 class="float-right">from {{ .Version.Author.Name}} at {{ .Version.Date }}</h5>
        <div class="clear-both"></div>
  <div>
    <div class="border-b border-gray-300 mb-4">
      <nav class="flex space-x-4" id="tabs">
        <button class="tab px-4 py-2 text-sm font-medium border-b-2 border-gray-900" onclick="showTab('inhalt')">Inhalt</button>
        <button class="tab px-4 py-2 text-sm font-medium text-gray-600 hover:text-gray-800" onclick="showTab('history')">Historie</button>
      </nav>
    </div>

    <div id="inhalt">
            <div class="prose max-w-none">
            {{ .HTMLContent }}
              </div>
    </div>

    <div id="history" class="hidden">
      <h3 class="text-2xl font-serif font-semibold mb-4">Versionshistorie</h3>
      <ul class="list-disc list-inside text-gray-800">
            {{ range .File.Versions }}
              <li><strong>{{ .Message }}</strong> from {{ .Author.Name}} at {{ .Date }}</li>
              {{ end }}
      </ul>
    </div>
  </div>
          </div>
</main>
<script>
  function showTab(tabId) {
    document.getElementById('inhalt').classList.add('hidden');
    document.getElementById('history').classList.add('hidden');
    document.getElementById(tabId).classList.remove('hidden');

    document.querySelectorAll('#tabs .tab').forEach(btn => btn.classList.remove('border-gray-900'));
    event.target.classList.add('border-gray-900');
  }
</script>
       <script>
    const btn     = document.getElementById('menu-btn');
    const sidebar = document.getElementById('sidebar');
    const overlay = document.getElementById('overlay');

    function toggleMenu() {
      sidebar.classList.toggle('-translate-x-full');
      overlay.classList.toggle('opacity-0');
      overlay.classList.toggle('pointer-events-none');
    }

    btn.addEventListener('click', toggleMenu);
    overlay.addEventListener('click', toggleMenu);
  </script>
  </div>

  <!-- Footer -->
  <!--<footer class="bg-gray-300 text-center py-4 border-t border-gray-400">
    <div class="flex justify-center space-x-8 text-sm">
      <a href="#" class="hover:underline">Impressum</a>
      <a href="#" class="hover:underline">Wikipress</a>
      <a href="#" class="hover:underline">Contact</a>
    </div>
  </footer>-->

</body>
</html>

