$(document).ready(function () {
  var $bbs_origin = $(".bbs_origin");
  var $bbs_out = $(".bbs_out");

  // 모든 게시물 아이템 추출
  var $items = $bbs_origin.find(".bbs_scroll tbody > tr[valign='top'] > td");

  // vertical-slider 컨테이너 생성
  var $sliderContainer = $('<div class="vertical-slider"></div>');

  // 각 td에서 필요한 데이터만 추출하여 div로 재구성
  $items.each(function () {
    var $td = $(this);

    // 이미지 정보 추출
    var $img = $td.find("img.board_output_imgs");
    var imgSrc = $img.attr("src");
    var imgAlt = $img.attr("alt") || "";

    // 링크 정보 추출
    var $imgLink = $td.find(".board_output_gallery_img a");
    var linkHref = $imgLink.attr("href") || "#";

    // 제목 정보 추출
    var $titleLink = $td.find(".board_output_gallery_subject a");
    var title = $titleLink.text().trim() || "제목 없음";
    var titleHref = $titleLink.attr("href") || linkHref;

    // 이미지가 있는 경우만 슬라이드 생성
    if (imgSrc) {
      var $slideItem = $(`
        <div class="slide-item">
          <div class="slide-img">
            <a href="${linkHref}">
              <img src="${imgSrc}" alt="${imgAlt}">
            </a>
          </div>
          <div class="slide-title">
            <a href="${titleHref}">${title}</a>
          </div>
        </div>
      `);

      $sliderContainer.append($slideItem);
    }
  });

  // bbs_out에 슬라이더 추가
  $bbs_out.html($sliderContainer);

  // Slick 슬라이더 초기화
  $(".vertical-slider").slick({
    vertical: false,
    autoplay: false,
    autoplaySpeed: 3000,
    slidesToShow: 3,
    slidesToScroll: 3,
    // verticalSwiping: true,
    adaptiveHeight: true,
    arrows: false,
    dots: false,
    infinite: true,
    speed: 500,
    pauseOnHover: true,
  });
});