<div class="bixbox schedules">
        <div class="schedules__day" data-day-name="monday">
            <div class="schedules__dayName">Monday</div>
            <div class="schedules__entries listupd"></div>
        </div>
        <div class="schedules__day" data-day-name="tuesday">
            <div class="schedules__dayName">Tuesday</div>
            <div class="schedules__entries"></div>
        </div>
        <div class="schedules__day" data-day-name="wednesday">
            <div class="schedules__dayName">Wednesday</div>
            <div class="schedules__entries"></div>
        </div>
        <div class="schedules__day" data-day-name="thursday">
            <div class="schedules__dayName">Thursday</div>
            <div class="schedules__entries"></div>
        </div>
        <div class="schedules__day" data-day-name="friday">
            <div class="schedules__dayName">Friday</div>
            <div class="schedules__entries"></div>
        </div>
        <div class="schedules__day" data-day-name="saturday">
            <div class="schedules__dayName">Saturday</div>
            <div class="schedules__entries"></div>
        </div>
        <div class="schedules__day" data-day-name="sunday">
            <div class="schedules__dayName">Sunday</div>
            <div class="schedules__entries"></div>
        </div>
    </div>
    

<script>
(() => {
  async function fetchAnimeSchedule(element, container, day, template = "<div class='anime-item'><img src='{poster}' alt='{title}'><h3>{title}</h3><p>{synopsis}</p><a href='{url}'>More Info</a></div>") {
    const availableAnimes = typeof _SCHEDULES_AVAILABLE_ANIMES === "undefined" ? [] : _SCHEDULES_AVAILABLE_ANIMES;

    let animes = await (async function(day) {
      const response = await fetch(`https://api.jikan.moe/v4/schedules?filter=${day}&kids=false`);
      const data = await response.json();
      return data.data;
    })(day);

    container.classList.add("is-loaded");

    animes = animes.filter((anime, index, self) => self.findIndex(t => t.mal_id === anime.mal_id) === index);

    if (availableAnimes.length > 0) {
      animes = animes.filter(anime => availableAnimes.some(a => a.mal_id === anime.mal_id));
      animes = animes.map(anime => {
        const availableAnime = availableAnimes.find(a => a.mal_id === anime.mal_id);
        return { ...anime, ...availableAnime };
      });
    }

    if (animes.length === 0) {
      element.innerHTML = `<p class="no-results">¡No hay animes disponibles este día!</p>`;
    } else {
      element.innerHTML = '';
      animes.forEach(anime => {
        const animeHTML = template
          .replace('{poster}', anime.images.jpg.image_url)
          .replace(/{title}/g, anime.title)
          .replace(/{type}/g, anime.type)
          .replace('{synopsis}', anime.synopsis)
          .replace('{url}', anime.url);
        element.innerHTML += animeHTML;
      });
    }
  }

  document.addEventListener("DOMContentLoaded", async function() {
    const dayElements = document.querySelectorAll(".schedules__day");
    const htmlTemplate = typeof _SCHEDULES_HTML_TEMPLATE === "undefined"
      ? "<div class='bs'><div class='bsx'><a href='{url}'><div class='limit'><div class='typez {type}'>{type}</div><img src='{poster}' alt='{title}'><div class='bt'><span class='sb'/><span class='epx'/></div></div><div class='tt'>{title}</div></a></div></div>"
      : _SCHEDULES_HTML_TEMPLATE;

    const currentDay = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"][new Date().getDay()].toLowerCase();

    for (const dayElement of dayElements) {
      const dayName = dayElement.getAttribute("data-day-name");
      if (dayName === currentDay) {
        dayElement.classList.add("is-active");
        const entriesContainer = dayElement.querySelector(".schedules__entries");
        await fetchAnimeSchedule(entriesContainer, dayElement, dayName, htmlTemplate);
      }
    }

    dayElements.forEach(dayElement => {
      const dayNameElement = dayElement.querySelector(".schedules__dayName");
      const dayName = dayElement.getAttribute("data-day-name");

      dayNameElement.addEventListener("click", async function() {
        if (dayElement.classList.contains("is-active")) {
          dayElement.classList.remove("is-active");
        } else {
          dayElement.classList.add("is-active");
        }

        if (!dayElement.classList.contains("is-loaded")) {
          const entriesContainer = this.nextElementSibling;
          await fetchAnimeSchedule(entriesContainer, dayElement, dayName, htmlTemplate);
        }
      });
    });
  });
})();
  </script>