{{define "weatherHTML"}}
<a class="w-link" href="/weather">
<div id="weather">
  <div class="weather-widget" id="weather-widget-sarajevo">
    <div><span id="city-sarajevo">Učitavanje...</span></div>
    <div id="temperature-sarajevo">Učitavanje...</div>
  </div>
  <div class="weather-widget" id="weather-widget-banja-luka">
    <div><span id="city-banja-luka">Učitavanje...</span></div>
    <div id="temperature-banja-luka">Učitavanje...</div>
  </div>
  <div class="weather-widget" id="weather-widget-tuzla">
    <div><span id="city-tuzla">Učitavanje...</span></div>
    <div id="temperature-tuzla">Učitavanje...</div>
  </div>
  <div class="weather-widget" id="weather-widget-zenica">
    <div><span id="city-zenica">Učitavanje...</span></div>
    <div id="temperature-zenica">Učitavanje...</div>
  </div>
  <div class="weather-widget" id="weather-widget-mostar">
    <div><span id="city-mostar">Učitavanje...</span></div>
    <div id="temperature-mostar">Učitavanje...</div>
  </div>
</div>
</a>


<script>
  const apiKey = 'abb35e21bdcbad6d1b00141a2b25cf5a';
  
  const cities = [
    { name: 'Sarajevo', id: 'sarajevo' },
    { name: 'Banja Luka', id: 'banja-luka' },
    { name: 'Tuzla', id: 'tuzla' },
    { name: 'Zenica', id:'zenica'},
    { name: 'Mostar', id: 'mostar' }
  ];
  
  async function getWeatherData(city) {
    const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${city.name}&appid=${apiKey}&units=metric&lang=hr`;
    try {
      const response = await fetch(apiUrl);
      if (!response.ok) {
        throw new Error(`HTTP error! Status: ${response.status}`);
      }
      const data = await response.json();
      updateUI(data, city.id);
    } catch (error) {
      console.error(`Error fetching data for ${city.name}:`, error);
    }
  }
  
  function updateUI(data, cityId) {
    const cityElement = document.getElementById(`city-${cityId}`);
    const temperatureElement = document.getElementById(`temperature-${cityId}`);
  
    cityElement.textContent = data.name;
    temperatureElement.textContent = `${data.main.temp}°C`;
  }
  
  function cToL(text) {
    const cyrillicChars = 'АБВГДЂЕЖЗИЈКЛЉМНЊОПРСТЋУФХЦЧЏШабвгдђежзијклљмнњопрстћуфхцчџш';
    const latinChars = 'ABVGĐEŽZIJKLJMNJOPRSTĆUFHCČDŽŠabvgdđežzijkljmnjoprstćufhčdžš';
  
    return text
      .split('')
      .map(char => {
        const index = cyrillicChars.indexOf(char);
        return index !== -1 ? latinChars[index] : char;
      })
      .join('');
  }
  
  cities.forEach(city => {
    getWeatherData(city);
  });
  
  </script>

  {{end}}