<!-- <h1>games go here :3</h1> -->
<h1>Games</h1>
<div id="search-container">
  <input type="text" id="search-bar" placeholder="Search games..." />
</div>
<div id="games-container" class="games-container">
  <!-- Games will be loaded here by JavaScript -->
</div>
<script>
  const server = "/cdn/";

  document.addEventListener("DOMContentLoaded", () => {
    const gamesContainer = document.getElementById("games-container");
    const searchBar = document.getElementById("search-bar");

    fetch("/json/games.json")
      .then((response) => response.json())
      .then((games) => {
        const renderGames = (filter = "") => {
          gamesContainer.innerHTML = "";

          games.forEach((game) => {
            if (game.name.toLowerCase().includes(filter.toLowerCase())) {
              const gameDiv = document.createElement("div");
              gameDiv.classList.add("game");

              const gameTitle = document.createElement("h2");
              gameTitle.textContent = game.name;

              const gameImage = document.createElement("img");
              gameImage.src = `${server}${game.url}/${game.image}`;
              gameImage.alt = game.name;
              gameImage.title = game.name;

              gameDiv.addEventListener("click", () => {
                window.location.href = `/view?star=${game.url}`;
              });

              gameDiv.appendChild(gameImage);
              gameDiv.appendChild(gameTitle);
              gamesContainer.appendChild(gameDiv);
            }
          });

          if (gamesContainer.children.length === 0) {
            const noResultsMessage = document.createElement("p");
            noResultsMessage.textContent = "No games found.";
            gamesContainer.appendChild(noResultsMessage);
          }
        };

        renderGames();

        searchBar.addEventListener("input", () => {
          renderGames(searchBar.value.trim());
        });
      })
      .catch((error) => console.error("Error loading games:", error));
  });
</script>
