<html lang="ko"
	  xmlns:th="http://www.thymeleaf.org">
<!-- 배송비 SAVE 상품보기 -->
	<div class="modal-dialog" role="document" th:with="imgGoodsUrl=${@environment.getProperty('upload.goods.view')}, uxImgUrl=${@environment.getProperty('domain.uximage')}, imgUrl=${@environment.getProperty('upload.image.view')}">
		<div class="modal-content"><div class="modal-header">
			<h5 class="modal-title" id="dlvrSaveLabel">배송비 SAVE 상품</h5>
		</div>
			<div class="modal-body">
				<div class="pop_cont">
					<div class="area_slider">
						<div class="swiper-container swiper-container-initialized swiper-container-horizontal swiper-delv-container">
							<div class="swiper-wrapper" style="transform: translate3d(0px, 0px, 0px);">
								<div th:each="goods, status : ${goodsList}" class="swiper-slide swiper-slide-active" style="width: 150px; margin-right: 20px;">
									<div class="item_prod">
										<div class="item_state">
											<a th:href="|javascript:fnGoToGoodsDetail('${goods.goodsCd}')|" class="itemLink">
												<div class="itemPic">
													<img class="vLHTC pd_img" th:src="${imgGoodsUrl} + '/' + ${goods.sysImgNm} + '?RS=150'" src="/" width="100%" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'"  th:alt="${goods.sysImgNm}" alt="">
												</div>
												<p class="itemBrand" th:text="${goods.brandNm}"></p>
												<div class="itemName" th:text="${goods.goodsNm}"></div>
												<p class="itemPrice">
													<span th:text="${#numbers.formatInteger(goods.price, 1, 'COMMA')}"></span>
													<th:block th:if="${goods.currPrice != goods.price}">
														<span class="itemPrice_original" th:text="${#numbers.formatInteger(goods.currPrice, 1, 'COMMA')}"></span>
														<span class="itemPercent" th:text="${#numbers.formatInteger(goods.dcRate, 0, 'COMMA') + '%'}"></span>
													</th:block>
												</p>
											</a>
											<button type="button" class="btn btn_default btn_sm" th:onclick="fnAddCartDelvFeeSaveGoods([[${goods.goodsCd}]], [[${goods.optCd}]])"><span>쇼핑백 담기</span></button>
										</div>
									</div>
								</div>
							</div>
							<!-- Add Scrollbar -->
							<div class="swiper-scrollbar" th:if="${goodsList.size() > 5}" style="opacity: 0; transition-duration: 400ms;"><div class="swiper-scrollbar-drag" style="width: 514.104px; transform: translate3d(0px, 0px, 0px);"></div></div>
							<span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
						</div>
					</div>
					<!-- -->
				</div>
			</div>

			<script>
				//팝업 - 배송비 SAVE 상품보기 > 슬라이드
				var dlvrSaveSwiper = new Swiper('#dlvrSavePop .swiper-delv-container', {
					observer:true,
					observeParents: true,
					slidesPerView: 5,
					spaceBetween: 20,
					scrollbar: {
						el: '#dlvrSavePop .swiper-scrollbar',
						hide: true,
					},
				});
			</script>
		</div>
	</div>
	<a href="#close-modal" rel="modal:close" id="dlvrSavePop_close" class="close-modal">Close</a>
	<!-- // 배송비 SAVE 상품보기 -->

<script th:inline="javascript">
	$(document).ready(function() {
		var goodsListCnt = [[${goodsList.size()}]];
		if(goodsListCnt < 1) {
			mcxDialog.alert("배송비 SAVE 상품이 없습니다.");
			$("#dlvrSavePop_close").trigger("click");
		} else {
			$("#dlvrSavePop").modal("show");
		}
	});

	function fnAddCartDelvFeeSaveGoods(goodsCd, optCd) {
		let compsList = [];
		let temp 			= new Object;
		temp.goodsCd 		= goodsCd;
		temp.optCd 			= optCd;
		temp.goodsQty 		= 1;
		temp.goodsType 		= "G056_N";
		temp.cartGb 		= "C";
		temp.popupYn		= "Y";
		compsList.push(temp);

		cfnAddCart(compsList);
	};
</script>
</html>