class BaseSwiperAlerts {
    constructor(swiperElement) {
      this.swiperElement = swiperElement;
      this.prevButton = swiperElement.querySelector(".swiper-button-prev");
      this.nextButton = swiperElement.querySelector(".swiper-button-next");
      this.dataset = swiperElement.dataset;
      this.additionalOptions = {}; // Subclasses can add to this before initialization
  
      // SVG icons for navigation
      this.prevButtonSvg = `
       <svg xmlns="http://www.w3.org/2000/svg" width="13" height="22" fill="none" aria-hidden="true" focusable="false">
        <path stroke="currentColor" stroke-width="3" d="m11 20-8.71-9L11 2"/>
      </svg>
      `;
  
      this.nextButtonSvg = `
        <svg xmlns="http://www.w3.org/2000/svg" width="13" height="22" fill="none" aria-hidden="true" focusable="false">
        <path stroke="currentColor" stroke-width="3" d="m11 20-8.71-9L11 2"/>
      </svg>
      `;
  
      // Initialize Swiper
      this.init();
    }
  
    init() {
      this.addNavigationIcons(this.prevButton, this.prevButtonSvg);
      this.addNavigationIcons(this.nextButton, this.nextButtonSvg);
  
      // Build options from data attributes
      this.options = this.buildSwiperOptions();
  
      // Merge any additional options or event handlers from subclasses
      if (this.additionalOptions) {
        this.options = { ...this.options, ...this.additionalOptions };
        if (this.options.on && this.additionalOptions.on) {
          this.options.on = { ...this.options.on, ...this.additionalOptions.on };
        }
      }
  
      // Initialize Swiper with options
      this.swiper = new Swiper(this.swiperElement, this.options);
  
      // Add accessibility attributes
      this.addAccessibilityAttributes();
    }
  
    addNavigationIcons(button, svgMarkup) {
      if (button && !button.querySelector("svg")) {
        button.innerHTML = svgMarkup;
      }
    }
  
    buildSwiperOptions() {
      const dataset = this.dataset;
  
      const {
        swiperLoop,
        swiperSpeed,
        swiperSlidesPerView,
        swiperSlidesPerGroup,
        swiperSpaceBetween,
        swiperAutoplayEnabled,
        swiperAutoplayDelay,
        swiperAutoplayDisableOnInteraction,
      } = dataset;
  
      const options = {
        navigation: {
          nextEl: this.nextButton,
          prevEl: this.prevButton,
        },
        pagination: {
          el: this.swiperElement.querySelector(".swiper-pagination"),
          clickable: true,
          renderBullet: (index, className) =>
            `<button class="${className}" aria-label="Go to slide ${
              index + 1
            }"></button>`,
        },
        a11y: {
          prevSlideMessage: "Previous page",
          nextSlideMessage: "Next page",
          firstSlideMessage: "This is the first page",
          lastSlideMessage: "This is the last page",
          paginationBulletMessage: "Go to page {{index}}",
        },
        loop: swiperLoop === "true",
        speed: parseInt(swiperSpeed) || undefined,
        slidesPerView: isNaN(parseInt(swiperSlidesPerView))
          ? swiperSlidesPerView || undefined
          : parseInt(swiperSlidesPerView),
        slidesPerGroup: parseInt(swiperSlidesPerGroup) || undefined,
        spaceBetween: parseInt(swiperSpaceBetween) || undefined,
        autoplay:
          swiperAutoplayEnabled === "true"
            ? {
                delay: parseInt(swiperAutoplayDelay) || 3000,
                disableOnInteraction:
                  swiperAutoplayDisableOnInteraction === "true",
                pauseOnMouseEnter: true,
              }
            : false,
      };
  
      // Parse breakpoint data attributes
      // Format: data-swiper-breakpoint-[BREAKPOINT]-[PROPERTY]="[VALUE]"
      // Example: data-swiper-breakpoint-992-slides-per-group="4"
      options.breakpoints = {};
      Object.keys(dataset).forEach((key) => {
        // Check if key starts with "swiperBreakpoint" after dataset camelCase conversion
        if (key.startsWith("swiperBreakpoint")) {
          const breakpoint = key.match(/\d+/)[0]; // Get digits from the key
          const property = key
            .split(/\d+/)[1]
            .replace(/^./, (match) => match.toLowerCase()); // Convert first character after digits to lower case
  
          if (!options.breakpoints[breakpoint]) {
            options.breakpoints[breakpoint] = {};
          }
  
          let value = dataset[key];
          options.breakpoints[breakpoint][property] = isNaN(value)
            ? value
            : parseInt(value);
        }
      });
  
      if (Object.keys(options.breakpoints).length === 0) {
        delete options.breakpoints;
      }
  
      if (!options.pagination.el) {
        delete options.pagination;
      }
  
      return options;
    }
  
    addAccessibilityAttributes() {
      this.swiperElement
        .querySelectorAll(
          ".swiper-button-prev, .swiper-button-next, .swiper-pagination-bullet"
        )
        .forEach((el) => {
          el.setAttribute("tabindex", "0");
        });
    }
  
    adjustFinalSlideHeight() {
      const finalSlide = Array.from(this.swiper.slides).find((slide) =>
        slide.classList.contains("final-slide")
      );
      if (finalSlide) {
        let maxHeight = 0;
        this.swiper.slides.forEach((slide) => {
          if (slide.offsetHeight > maxHeight && slide !== finalSlide) {
            maxHeight = slide.offsetHeight;
          }
        });
        finalSlide.style.height = `${maxHeight}px`;
      }
    }
  }
  
  
  document.addEventListener("DOMContentLoaded", () => {
  
    const componentInitializations = [
      {
        selector: ".swiper-container--alerts",
        ClassConstructor: BaseSwiperAlerts,
      },
    ];
  
    componentInitializations.forEach(({ selector, ClassConstructor }) => {
      document
        .querySelectorAll(selector)
        .forEach((el) => new ClassConstructor(el));
    });
  });