<!-- 滑动提示组件 -->
<div th:fragment="header(title)" class="z-slide-header">
  <span class="title text-creative" th:text="${title}">标题</span>
  <div class="at-slide-hover">
    <span class="icon-[ph--mouse-simple-bold]"></span>
    <span>按住 Shift 横向滚动</span>
  </div>
</div>

<!-- 文章内容组件 -->
<div th:fragment="post-item(post)" th:remove="tag">
  <a th:href="${post.status.permalink}" class="slide-item gradient-card" th:title="${post.status.excerpt}">
    <img
      th:if="${post.spec.cover}"
      th:src="${post.spec.cover}"
      th:srcset="|${thumbnail.gen(post.spec.cover, 's')} 400w, ${thumbnail.gen(post.spec.cover, 'm')} 800w|"
      sizes="400px"
      class="cover"
      loading="lazy"
      th:alt="${post.spec.title}"
    />
    <div th:unless="${post.spec.cover}" class="cover flex items-center justify-center bg-gray-200 dark:bg-gray-700">
      <span class="icon-[ph--image-broken] text-4xl opacity-20"></span>
    </div>

    <div class="info">
      <div class="title text-creative" th:text="${post.spec.title}"></div>
      <div class="desc" th:if="${post.spec.publishTime}">
        <span class="icon-[ph--calendar-dots-bold]"></span>
        <span th:text="${#temporals.format(post.spec.publishTime, 'yyyy-MM-dd')}"></span>
      </div>
    </div>
  </a>
</div>

<!--- 翻页组件 -->
<div th:fragment="footer(containerId)" class="z-slide-body" th:remove="tag">
  <button
    class="carousel-action prev at-slide-hover"
    aria-label="上一页"
    th:data-container-id="${containerId}"
    onclick="scrollSlide(this, -300)"
  >
    <span class="icon-[ph--caret-left-bold]"></span>
  </button>
  <button
    class="carousel-action next at-slide-hover"
    aria-label="下一页"
    th:data-container-id="${containerId}"
    onclick="scrollSlide(this, 300)"
  >
    <span class="icon-[ph--caret-right-bold]"></span>
  </button>
</div>

<script th:fragment="script(containerId)" th:inline="javascript">
  (function () {
    const containerId = /*[[${containerId}]]*/ "slide-scroll-container";
    const container = document.getElementById(containerId);
    if (container) {
      container.addEventListener(
        "wheel",
        (e) => {
          if (!e.shiftKey && Math.abs(e.deltaY) > Math.abs(e.deltaX)) {
            e.preventDefault();
            container.scrollLeft += e.deltaY;
          }
        },
        { passive: false },
      );
    }
  })();

  function scrollSlide(button, offset) {
    const containerId = button.getAttribute("data-container-id");
    const container = document.getElementById(containerId);
    if (container) {
      container.scrollBy({ left: offset, behavior: "smooth" });
    }
  }
</script>
