<!doctype html>
<html
  xmlns:th="https://www.thymeleaf.org"
  th:replace="~{modules/layout :: html(content = ~{::content}, showAside = false, pageTitle = '商品列表', head = ~{::head})}"
>
  <th:block th:fragment="head">
    <th:block th:replace="~{modules/head :: shop-head}" />
  </th:block>
  <th:block th:fragment="content">
    <th:block th:replace="~{shop/modules/breadcrumb}" />

    <div class="shop-filter">
      <div class="shop-filter__left">
        <select class="shop-select" id="category-select">
          <option value="">全部分类</option>
          <option
            th:each="category : ${categoryTree}"
            th:value="${category.id}"
            th:text="${category.name}"
            th:selected="${#lists.contains(param.categoryId, #strings.toString(category.id))}"
          ></option>
        </select>
        <input
          type="text"
          class="shop-input"
          id="search-input"
          placeholder="搜索商品..."
          th:value="${param.keyword != null && !param.keyword.empty ? param.keyword[0] : ''}"
        />
      </div>

      <div class="shop-filter__right">
        <select class="shop-select" id="sort-select">
          <option value="" th:selected="${param.sort == null || param.sort.empty}">默认排序</option>
          <option value="minPrice,asc" th:selected="${#lists.contains(param.sort, 'minPrice,asc')}">
            价格从低到高
          </option>
          <option value="minPrice,desc" th:selected="${#lists.contains(param.sort, 'minPrice,desc')}">
            价格从高到低
          </option>
          <option value="title,asc" th:selected="${#lists.contains(param.sort, 'title,asc')}">按名称排序</option>
        </select>
      </div>
    </div>

    <script th:inline="javascript">
      (function () {
        const categorySelect = document.getElementById("category-select");
        const searchInput = document.getElementById("search-input");
        const sortSelect = document.getElementById("sort-select");

        function updateFilters(params) {
          const url = new URL(window.location.href);

          Object.keys(params).forEach((key) => {
            if (params[key] === "" || params[key] === null || params[key] === undefined) {
              url.searchParams.delete(key);
            } else {
              url.searchParams.set(key, params[key]);
            }
          });

          url.searchParams.delete("page");

          window.location.href = url.toString();
        }

        function goToPage(page) {
          const url = new URL(window.location.href);
          url.searchParams.set("page", page);
          window.location.href = url.toString();
        }

        categorySelect.addEventListener("change", function () {
          updateFilters({ categoryId: this.value });
        });

        searchInput.addEventListener("keydown", function (e) {
          if (e.key === "Enter") {
            e.preventDefault();
            updateFilters({ keyword: this.value.trim() });
          }
        });

        sortSelect.addEventListener("change", function () {
          updateFilters({ sort: this.value });
        });
      })();
    </script>

    <div class="shop-product-list">
      <a
        th:each="product : ${productPage.items}"
        th:href="@{/shop/product/{id}(id=${product.id})}"
        class="shop-product-card"
      >
        <div th:unless="${#strings.isEmpty(product.coverImageUrl)}" class="shop-product-card__image">
          <img th:src="${product.coverImageUrl}" th:alt="${product.title}" />
        </div>
        <div class="shop-product-card__info">
          <h3 class="shop-product-card__name" th:text="${product.title}"></h3>
          <p class="shop-product-card__description" th:text="${product.description}"></p>
          <div
            th:if="${product.minPrice != null or product.minOriginalPrice != null}"
            class="shop-product-card__footer"
          >
            <div class="shop-product-card__price">
              <span class="shop-product-card__price-current" th:text="${product.minPrice}"></span>
              <s
                th:if="${product.minOriginalPrice != null}"
                class="shop-product-card__price-original"
                th:text="${product.minOriginalPrice}"
              ></s>
            </div>
          </div>
        </div>
      </a>
    </div>

    <th:block th:replace="~{modules/pagination :: pagination(data=${productPage})}" />

    <th:block th:replace="~{shop/modules/script}" />
  </th:block>
</html>
