<!DOCTYPE html>
<html lang="ko"
	xmlns:th="http://www.thymeleaf.org">
<!--
 *******************************************************************************
 * @source  : GoodsOtherFormWeb.html
 * @desc    : 상품 안내
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.03.09   eskim        최초 작성
 *******************************************************************************
 -->
 <th:block th:if="${goodsList != null and !goodsList.empty}">
<div class="cont_head">
	<h3 class="subH1 t_c mb40">
		<th:block th:if="${params.goodsOtherGb =='together'}" th:text="${'이 상품과 함께 본 상품'}"></th:block>
		<th:block th:if="${params.goodsOtherGb =='recommend'}" th:text="${params.brandGroupNm +' 추천상품'}"></th:block>
		<th:block th:if="${params.goodsOtherGb =='like'}" th:text="${'이 상품과 비슷한 상품'}"></th:block>
	</h3>
</div>
<div class="cont_body" th:with="imgGoodsUrl=${@environment.getProperty('upload.goods.view')}, uxImgUrl=${@environment.getProperty('domain.uximage')}">
	<!-- CONT-BODY -->
	<div class="area_slider">
		<div class="swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide" th:each="result, status : ${goodsList}">
					<div class="item_prod">
						<div class="item_state">
							<button type="button" class="itemLike" th:classappend="${result.product.itemId == 'Y'}? 'active' : ''"  onclick="cfnPutWishList(this);" th:attr="goodsCd=${result.product.itemId}, goodsNm=${result.product.itemName}, ithrCd='IN15_03', contentsLoc='', planDtlSq=''">관심상품 추가</button>
							<a href="javascript:void(0);" th:onclick="cfnGoToGoodsDetail([[${result.product.itemId}]], '','IN15_03','','','pc_detail');" class="itemLink" >
								<div class="itemPic">
									<img alt="" class="vLHTC pd_img" th:src="${result.product.itemImage +'?RS=300'}" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
								</div>
								<p class="itemBrand" th:text="${result.product.brandName}">BRAND NAME1</p>
								<div class="itemName" th:text="${result.product.itemName}">남성 로고 자카드 방풍 패딩</div>
								<p class="itemPrice">
									<th:block th:text="${#numbers.formatInteger(result.product.salePrice, 0,'COMMA')}"></th:block>
									<th:block th:if="${result.product.originalPrice != result.product.salePrice}">
									<span class="itemPrice_original" th:text="${#numbers.formatInteger(result.product.originalPrice, 0,'COMMA')}">1,000,000</span>
									<span class="itemPercent" th:text="${(result.product.originalPrice == 0 ? 0 : #numbers.formatDecimal((result.product.originalPrice - result.product.salePrice) / (result.product.originalPrice * 1.0) * 100, 1, 0)) + '%'}">0%</span>
									</th:block>
								</p>
							</a>
						</div>
					</div>
				</div>
			</div>
			<th:block th:if="${params.goodsOtherGb == 'tmtb'}">
			<!-- Add Scrollbar -->
			<div class="swiper-scrollbar"></div>
			</th:block> 
		</div>
		<th:block th:if="${params.goodsOtherGb != 'tmtb'}">
		<!-- Add Pagination 1111111-->
		<div class="swiper-pagination"></div>
		<!-- Add Arrows -->
		<div class="swiper-button-next"></div>
		<div class="swiper-button-prev"></div>
		</th:block>
	</div>
	<!-- // CONT-BODY -->
</div>

<script th:inline="javascript">
/*<![CDATA[*/
	
	if ('together' == [[${params.goodsOtherGb}]]){
		var otherItemSwiper = new Swiper('.pd .pd_clickother .area_slider .swiper-container', {
		     slidesPerView: 5,
		     slidesToScroll: 5,
		     slidesPerGroup: 5,
		     spaceBetween: 20,
		     navigation: {
		         nextEl: '.pd_clickother .swiper-button-next',
		         prevEl: '.pd_clickother .swiper-button-prev',
		     },
		     pagination: {
		         el: '.pd_clickother .swiper-pagination',
		         clickable: true,
		     },
		 });   
		
	}
	//슬라이드 - 브랜드 추천상품
	if ('recommend' == [[${params.goodsOtherGb}]]){
		var relateItemSwiper = new Swiper('.pd .pd_brand .area_slider .swiper-container', {
			slidesPerView: 5,
			spaceBetween: 20,
			navigation: {
				nextEl: '.pd_brand .swiper-button-next',
				prevEl: '.pd_brand .swiper-button-prev',
			},
			pagination: {
				el: '.pd_brand .swiper-pagination',
				clickable: true,
			},
		});  
	}
	if ('like' == [[${params.goodsOtherGb}]]){
		//슬라이드 - 이 상품과 비슷한 상품 
		var relateItemSwiper = new Swiper('.pd .pd_relate .area_slider .swiper-container', {
			slidesPerView: 5,
			spaceBetween: 20,
			navigation: {
				nextEl: '.pd_relate .swiper-button-next',
				prevEl: '.pd_relate .swiper-button-prev',
			},
			pagination: {
				el: '.pd_relate .swiper-pagination',
				clickable: true,
			},
		});	  
	}	
	

/*]]>*/
</script>
</th:block>	
</html>