/* =========================================================================
   games-filter.js — Alpine.js component powering the slots library filter.
   Cards are rendered server-side by Hugo (so thumbnails go through the image
   pipeline); this component toggles their visibility via data-attributes.
   Registered on `alpine:init`, so this file must load before the Alpine CDN.
   ========================================================================= */
document.addEventListener("alpine:init", function () {
  window.Alpine.data("gamesFilter", function () {
    return {
      provider: "all",
      category: "all",
      search: "",
      visibleCount: 0,

      get normalizedSearch() {
        return this.search.trim().toLowerCase();
      },

      cardVisible: function (el) {
        var okProvider =
          this.provider === "all" || el.dataset.provider === this.provider;
        var okCategory =
          this.category === "all" || el.dataset.category === this.category;
        var okSearch =
          this.normalizedSearch === "" ||
          (el.dataset.title || "").indexOf(this.normalizedSearch) !== -1;
        return okProvider && okCategory && okSearch;
      },

      recount: function () {
        var self = this;
        var cards = this.$root.querySelectorAll("[data-game]");
        var n = 0;
        Array.prototype.forEach.call(cards, function (el) {
          if (self.cardVisible(el)) n++;
        });
        this.visibleCount = n;
      },

      reset: function () {
        this.provider = "all";
        this.category = "all";
        this.search = "";
      },
    };
  });
});