SearchbarManager.filterItems is not a function
    oninput http://localhost:8000/:1 import PersonnagesProvider from './PersonnagesProvider.js';
export default class SearchbarManager {
  filterItems(event) {
    const searchTerm = event.target.value.toLowerCase();
    let items;
    switch (window.location.hash) {
      case '#/personnages':
        items = PersonnagesProvider.FetchPersonnages(searchTerm);
        break;
      case '#/armes':
        items = ArmesProvider.fetchArmes(searchTerm);
        break;
      // Ajoutez d'autres cas si vous avez plus de pages
      default:
        items = [];
    }
  
    const filteredItems = items.filter(item => item.nom.toLowerCase().includes(searchTerm));
    document.getElementById('search-results').innerHTML = filteredItems.map(item => `<a href="#/${item.id}">${item.nom}</a>`).join('\n');
  }
}
window.SearchbarManager = SearchbarManager;

import SearchbarManager from '../../services/SearchbarManager.js';

export const renderNavbar = () => {
  return /*html*/ `
        <nav>
            <ul>
            <div class="left-part">
            <li><a href="/">Personnages</a></li>
            <li><a href="#/armes">Armes</a></li>
            <li><a href="#/armures">Armures</a></li>
            </div>
            <li>
            <input type="text" id="search" oninput="SearchbarManager.filterItems(event)" placeholder="Rechercher...">
            <div id="search-results"></div>
        </li>
            <li>Mes favoris</li>
            </ul>
        <nav>
    `;
};
// Instantiate API
import PersonnagesProvider from "../../services/PersonnagesProvider.js";
import FavoriteManager from '../../services/FavoriteManager.js';
import { renderNavbar } from "./Navbar.js";

// In Home.js
export default class Home {
    async render() {
        let personnages = await PersonnagesProvider.FetchPersonnages();
        let html = personnages
          .map(
            (personnage) => /*html*/ `
                <div class="col">
                <div class="card shadow-sm">
                    <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">${personnage.nom}</text></svg>
                    <div class="card-body">
                        <p class="card-text">${personnage.nom}</p>
                        <p>Force: <progress value="${personnage.statistiques.force}" max="500"></progress>${personnage.statistiques.force}/500</p>
                        <p>Dextérité: <progress value="${personnage.statistiques.dextérité}" max="500"></progress>${personnage.statistiques.dextérité}/500</p>
                        <p>Intelligence: <progress value="${personnage.statistiques.intelligence}" max="500"></progress>${personnage.statistiques.intelligence}/500</p>
                        <p>Santé: <progress value="${personnage.statistiques.santé}" max="500"></progress>${personnage.statistiques.santé}/500</p>
                        <p>Mana: <progress value="${personnage.statistiques.mana}" max="500"></progress>${personnage.statistiques.mana}/500</p>
                        <p>Defense: <progress value="${personnage.statistiques.defense}" max="500"></progress>${personnage.statistiques.defense}/500</p>
                        <div class="d-flex justify-content-between align-items-center">
                            <div class="btn-group">
                            <a href="#/personnage/${personnage.id}" class="btn btn-sm btn-outline-secondary">+ détail sur ${personnage.nom}</a>
                            </div>
                            <small class="text-body-secondary">${personnage.id}</small>
                            <a id="favori-${personnage.id}" onclick="FavoriteManager.toggleFavorites('${personnage.id}');">
                            ${FavoriteManager.isFavorite(personnage.id) ? 
                            '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart-fill" viewBox="0 0 16 16"><path d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"/></svg>' : 
                            '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart" viewBox="0 0 16 16"><path d="M8 2.748l-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/></svg>'} 
                        </a>
                        </div>
                    </div>
                </div>
                </div>
                `
          )
          .join("\n ");
      
        return /*html*/ `
        ${renderNavbar()}
                <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
                    ${html}
                </div>
            `;
      }
}