#if($sentenceList && $sentenceList.size() > 0)

<div class="sv-carousel-wrap" id="${uid}">
  <div class="sv-carousel-track" id="${uid}_track"></div>
</div>

<div class="sv-carousel-controls">
  #if(!$autoPlay)
  <button class="sv-carousel-btn sv-carousel-btn-prev" id="${uid}_prev" aria-label="Föregående"></button>
  #end
  <button class="sv-carousel-btn sv-carousel-btn-toggle" id="${uid}_toggle" aria-label="Pausa"></button>
  #if(!$autoPlay)
  <button class="sv-carousel-btn sv-carousel-btn-next" id="${uid}_next" aria-label="Nästa"></button>
  #end
</div>

<script>
(function() {
  var ALL_SLOTS = [
    { scale: 0.55, opacity: 0.22, offset: -80 },
    { scale: 0.70, opacity: 0.45, offset: -46 },
    { scale: 1.00, opacity: 1.00, offset:   0 },
    { scale: 0.70, opacity: 0.45, offset:  46 },
    { scale: 0.55, opacity: 0.22, offset:  80 }
  ];

  var sentences = [
    #foreach($s in $sentenceList)
      #set($escaped = $s.replace('"', '\"'))
      "$escaped"#if($foreach.hasNext),#end
    #end
  ];

  var uid       = "$uid";
  var autoPlay  = $autoPlay;
  var speed     = $speed;
  var fontClass = "$!fontClass";
  var textColor = "$!textColor";

  var n            = sentences.length;
  var visibleCount = Math.min(n, ALL_SLOTS.length);
  var slotStart    = Math.floor((ALL_SLOTS.length - visibleCount) / 2);
  var SLOTS        = ALL_SLOTS.slice(slotStart, slotStart + visibleCount);
  var centerSlot   = Math.floor(visibleCount / 2);

  var current      = 0;
  var running      = autoPlay;
  var timer        = null;
  var els          = [];
  var basePx       = 0;
  var originalBase = 0;
  var track        = null;
  var started      = false;

  function measureBase() {
    var probe = document.createElement("div");
    probe.className        = fontClass || "";
    probe.style.visibility = "hidden";
    probe.style.position   = "absolute";
    probe.style.whiteSpace = "nowrap";
    probe.textContent      = "x";
    track.appendChild(probe);
    var size = parseFloat(window.getComputedStyle(probe).fontSize) || 16;
    track.removeChild(probe);
    return size;
  }

  function measureLongest(base) {
    var ruler = document.createElement("div");
    ruler.className        = fontClass || "";
    ruler.style.position   = "absolute";
    ruler.style.visibility = "hidden";
    ruler.style.whiteSpace = "nowrap";
    ruler.style.setProperty("font-size", base + "px", "important");
    track.appendChild(ruler);
    var longest = 0;
    sentences.forEach(function(text) {
      ruler.textContent = text;
      var w = ruler.offsetWidth;
      if (w > longest) longest = w;
    });
    track.removeChild(ruler);
    return longest;
  }

  function recalcBase(trackWidth) {
    trackWidth = Math.max(trackWidth, 1);
    var longest = measureLongest(originalBase);
    if (longest > 0 && longest > trackWidth) {
      basePx = originalBase * (trackWidth / longest);
    } else {
      basePx = originalBase;
    }
  }

  function init() {
    console.log("[carousel " + uid + "] init called");
    track = document.getElementById(uid + "_track");
    if (!track) {
      console.log("[carousel " + uid + "] track not found, aborting");
      return;
    }
    console.log("[carousel " + uid + "] track found, offsetWidth:", track.offsetWidth);

    els = [];
    track.innerHTML = "";
    stopAuto();

    track.style.position = "relative";
    track.style.height   = "200px";

    originalBase = measureBase();
    console.log("[carousel " + uid + "] originalBase:", originalBase);

    setTimeout(function() {
      var w = track.offsetWidth;
      console.log("[carousel " + uid + "] setTimeout trackWidth:", w);
      recalcBase(w > 0 ? w : 1);
      console.log("[carousel " + uid + "] basePx after recalc:", basePx);

      sentences.forEach(function(text) {
        var el = document.createElement("div");
        el.className   = fontClass ? "sv-carousel-item " + fontClass : "sv-carousel-item";
        el.textContent = text;
        if (textColor) el.style.color = textColor;
        track.appendChild(el);
        els.push(el);
      });

      positionAll(false);
      updateToggle();
      if (running) startAuto();

      var toggleBtn = document.getElementById(uid + "_toggle");
      var prevBtn   = document.getElementById(uid + "_prev");
      var nextBtn   = document.getElementById(uid + "_next");

      if (toggleBtn) toggleBtn.addEventListener("click", function() {
        running = !running;
        running ? startAuto() : stopAuto();
        updateToggle();
      });
      if (prevBtn) prevBtn.addEventListener("click", function() { step(-1); });
      if (nextBtn) nextBtn.addEventListener("click", function() { step(1); });

      var resizeTimer = null;
      var resizeObserver = new ResizeObserver(function(entries) {
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(function() {
          var trackWidth = 0;
          if (entries && entries[0]) {
            trackWidth = entries[0].contentRect.width;
          } else {
            trackWidth = track.offsetWidth;
          }
          if (trackWidth > 0) {
            recalcBase(trackWidth);
            positionAll(false);
          }
        }, 50);
      });
      resizeObserver.observe(track);

    }, 50);
  }

  function getSlotFor(i) {
    var rel = ((i - current) % n + n) % n;
    if (rel > Math.floor(n / 2)) rel = rel - n;
    var si = centerSlot + rel;
    return (si >= 0 && si < visibleCount) ? si : -1;
  }

  function positionAll(animate) {
    var centerY = 96;
    els.forEach(function(el, i) {
      var si = getSlotFor(i);
      if (si === -1) {
        el.style.opacity       = "0";
        el.style.pointerEvents = "none";
        return;
      }
      var slot = SLOTS[si];
      var fs   = basePx * slot.scale;
      var top  = centerY + slot.offset - fs * 0.75;

      el.style.transition = animate
        ? "top .55s cubic-bezier(.4,0,.2,1), font-size .55s cubic-bezier(.4,0,.2,1), opacity .55s cubic-bezier(.4,0,.2,1)"
        : "none";

      el.style.position      = "absolute";
      el.style.left          = "0";
      el.style.width         = "100%";
      el.style.top           = top + "px";
      el.style.setProperty("font-size", fs + "px", "important");
      el.style.opacity       = slot.opacity;
      el.style.pointerEvents = si === centerSlot ? "none" : "auto";
      el.style.textAlign     = "center";
      el.style.whiteSpace    = "nowrap";
      el.style.overflow      = "hidden";
      el.style.cursor        = si === centerSlot ? "default" : "pointer";
      el.onclick = si !== centerSlot
        ? (function(d){ return function(){ step(d); }; })(si - centerSlot)
        : null;
    });
  }

  function step(dir) {
    current = ((current + dir) % n + n) % n;
    positionAll(true);
  }

  function startAuto() { clearInterval(timer); timer = setInterval(function(){ step(1); }, speed); }
  function stopAuto()  { clearInterval(timer); }

  function updateToggle() {
    var btn = document.getElementById(uid + "_toggle");
    if (!btn) return;
    if (running) {
      btn.classList.add("is-playing");
      btn.setAttribute("aria-label", "Pausa");
    } else {
      btn.classList.remove("is-playing");
      btn.setAttribute("aria-label", "Spela");
    }
  }

  console.log("[carousel " + uid + "] script parsed");

  var wrapEl = document.getElementById(uid);
  console.log("[carousel " + uid + "] wrapEl found:", !!wrapEl);

  if (wrapEl) {
    var intersectionObserver = new IntersectionObserver(function(entries) {
      entries.forEach(function(entry) {
        console.log("[carousel " + uid + "] intersection:", entry.isIntersecting, "started:", started);
        if (entry.isIntersecting && !started) {
          started = true;
          console.log("[carousel " + uid + "] calling init via IntersectionObserver");
          setTimeout(init, 50);
        }
      });
    }, { threshold: 0.1 });
    intersectionObserver.observe(wrapEl);
  } else {
    console.log("[carousel " + uid + "] no wrapEl, calling init directly");
    setTimeout(init, 50);
  }

  document.addEventListener("lbr:slide-shown", function() {
    var t = document.getElementById(uid + "_track");
    console.log("[carousel " + uid + "] lbr:slide-shown fired, track found:", !!t, "offsetParent:", t ? !!t.offsetParent : "n/a");
    if (!t) return;
    if (!t.offsetParent) return;
    stopAuto();
    started = false;
    console.log("[carousel " + uid + "] calling init via lbr:slide-shown");
    setTimeout(init, 50);
  });

})();
</script>

#else
  <p>Inga meningar att visa.</p>
#end