window.FinsweetAttributes ||= [];

window.FinsweetAttributes.push([
  "list",
  () => {
    const openRoleContainers = document.querySelectorAll(
      "[data-swiper-open-role-container]",
    );

    openRoleContainers.forEach((container) => {
      const swiperElement = container.querySelector(".swiper.open-role");
      const prevButton = container.querySelector("[data-prev-slide]");
      const nextButton = container.querySelector("[data-next-slide]");

      if (!swiperElement) return;

      new Swiper(swiperElement, {
        slidesPerView: 1.05,
        spaceBetween: 16,
        grabCursor: true,

        a11y: {
          slideRole: "listitem",
        },

        navigation: {
          prevEl: prevButton,
          nextEl: nextButton,
        },

        breakpoints: {
          768: {
            slidesPerView: 2,
            spaceBetween: 20,
          },
          992: {
            slidesPerView: 3,
            spaceBetween: 24,
          },
        },
      });
    });
  },
]);