<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{TITLE}} - Events</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">Events</span>
        </nav>
      </div>
    </div>
  </header>

  <main class="main">
    <div class="container">
      <div class="events-header">
        <div class="search-container">
          <input type="text" class="input search-input" placeholder="Search events..." id="search">
        </div>
        <div class="view-toggle">
          <button class="btn btn-secondary active" data-view="list">List</button>
          <button class="btn btn-secondary" data-view="calendar">Calendar</button>
        </div>
      </div>

      <div class="events-list" id="events">
        {{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 events = document.querySelectorAll('.event-item');
      events.forEach(event => {
        const text = event.textContent.toLowerCase();
        event.style.display = text.includes(query) ? '' : 'none';
      });
    });

    // View toggle
    document.querySelectorAll('.view-toggle .btn').forEach(btn => {
      btn.addEventListener('click', function() {
        document.querySelectorAll('.view-toggle .btn').forEach(b => b.classList.remove('active'));
        this.classList.add('active');
        // View switching logic would go here
      });
    });
  </script>
</body>
</html>
