templates.js

function getDetailsHTML(pokemon) {
  const name = capitalize(pokemon.name);
  const types = pokemon.types.map(t => t.type.name).join(", ");
  const image = pokemon.sprites.other['official-artwork'].front_default;
  const height = (pokemon.height / 10).toFixed(1);
  const weight = (pokemon.weight / 10).toFixed(1);
  return `
    <div class="pokemon-details">
      <h2>#${pokemon.id} ${name}</h2>
      <img src="${image}" alt="${pokemon.name}" style="width: 150px;">
      <p><strong>Type:</strong> ${types}</p>
      <p><strong>Height:</strong> ${height} m</p>
      <p><strong>Weight:</strong> ${weight} kg</p>
    </div>`;
}
function getOverlayHTML(pokemon) {
  return `
    ${getCloseButton()}
    <div class="overlay-navigation">
      ${getNavArrow("prevPokemon", "&laquo;")}
      ${getDetailsHTML(pokemon)}
      ${getNavArrow("nextPokemon", "&raquo;")}
    </div>`;
}
function createPokemonCard(pokemon) {
  const card = document.createElement("div");
  card.className = "pokemon-card";
  card.style.background = getBackgroundStyle(pokemon);
  card.innerHTML = getCardHTML(pokemon);
  card.addEventListener("click", () => openPokemonOverlay(pokemon));
  return card;
}
function getCardHTML(pokemon) {
  const name = capitalize(pokemon.name);
  const types = pokemon.types.map(t => t.type.name).join(", ");
  const img = pokemon.sprites.other['official-artwork'].front_default;
  return `
    <h3>#${pokemon.id} ${name}</h3>
    <img src="${img}" alt="${pokemon.name}">
    <p>Type: ${types}</p>
  `;
}

document.getElementById("pokemonOverlay").addEventListener("click", () => {
  document.getElementById("pokemonOverlay").classList.add("hidden");
});

document.getElementById("overlayContent").addEventListener("click", (e) => {
  e.stopPropagation();
});