<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{TITLE}} - Forum</title>
  <style>{{GLOBAL_STYLES}}</style>
  <style>{{APP_STYLES}}</style>
</head>
<body>
  <header class="header">
    <div class="container">
      <div class="header-content">
        <div>
          <h1 class="header-title">{{COLLECTION_NAME}}</h1>
          <p class="header-subtitle">{{COLLECTION_DESCRIPTION}}</p>
        </div>
        <nav class="nav">
          <span class="badge">Forum</span>
        </nav>
      </div>
    </div>
  </header>

  <main class="main">
    <div class="container">
      <div class="forum-header">
        <div class="search-container">
          <input type="text" class="input search-input" placeholder="Search threads..." id="search">
        </div>
        <div class="forum-stats">
          <span class="stat"><strong id="thread-count">0</strong> threads</span>
          <span class="stat"><strong id="post-count">0</strong> posts</span>
        </div>
      </div>

      <div class="categories-list" id="categories">
        <!-- Categories will be populated by JavaScript or content -->
      </div>

      <div class="threads-list" id="threads">
        {{CONTENT}}
      </div>
    </div>
  </main>

  <footer class="footer">
    <div class="container">
      <p>Generated on {{GENERATED_DATE}}</p>
    </div>
  </footer>

  <script>
    window.GEOGRAM_DATA = {{DATA_JSON}};
    {{SCRIPTS}}
  </script>
  <script>
    // Search functionality
    document.getElementById('search').addEventListener('input', function(e) {
      const query = e.target.value.toLowerCase();
      const threads = document.querySelectorAll('.thread-item');
      threads.forEach(thread => {
        const text = thread.textContent.toLowerCase();
        thread.style.display = text.includes(query) ? '' : 'none';
      });
    });

    // Update stats
    const data = window.GEOGRAM_DATA || {};
    document.getElementById('thread-count').textContent = data.threadCount || document.querySelectorAll('.thread-item').length;
    document.getElementById('post-count').textContent = data.postCount || 0;
  </script>
</body>
</html>
