<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{TITLE}} - Alerts</title>
  <link rel="stylesheet" href="styles.css">
</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 badge-warning">Alerts</span>
        </nav>
      </div>
    </div>
  </header>

  <main class="main">
    <div class="container">
      <div class="alerts-header">
        <div class="search-container">
          <input type="text" class="input search-input" placeholder="Search alerts..." id="search">
        </div>
        <div class="filter-buttons">
          <button class="btn btn-secondary active" data-filter="all">All</button>
          <button class="btn btn-secondary" data-filter="critical">Critical</button>
          <button class="btn btn-secondary" data-filter="warning">Warning</button>
          <button class="btn btn-secondary" data-filter="info">Info</button>
        </div>
      </div>

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

    // Filter functionality
    document.querySelectorAll('.filter-buttons .btn').forEach(btn => {
      btn.addEventListener('click', function() {
        document.querySelectorAll('.filter-buttons .btn').forEach(b => b.classList.remove('active'));
        this.classList.add('active');
        const filter = this.dataset.filter;
        const alerts = document.querySelectorAll('.alert-item');
        alerts.forEach(alert => {
          if (filter === 'all') {
            alert.style.display = '';
          } else {
            alert.style.display = alert.classList.contains(filter) ? '' : 'none';
          }
        });
      });
    });
  </script>
</body>
</html>
