<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<!--
 *******************************************************************************
 * @source  : PlanningReplyPhotoFormWeb.html
 * @desc	: 기획전 댓글 - 포토 리스트 팝업
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE		 AUTHOR	  DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.04.08   sowon		최초 작성
 *******************************************************************************
 -->
<!-- 댓글 이미지 팝업 -->
<!-- <div class="modal fade thumb_img_pop" id="thumbImgPop" tabindex="-1" role="dialog" aria-labelledby="thumbImgLabel" aria-hidden="true"> -->
        <div class="modal-dialog" role="document">
            <div class="modal-content" th:with="frontUrl=${@environment.getProperty('domain.front')}, goodsView=${@environment.getProperty('upload.goods.view')}, planView=${@environment.getProperty('upload.image.view')}">
				<div class="modal-header sr-only">
                    <h5 class="modal-title" id="thumbImgLabel">이미지 상세보기</h5>
                </div>
                <div class="modal-body">
                    <div class="pop_cont">
 						<div class="swiper-container">
							<div class="swiper-wrapper">
								<!-- 이미지 슬라이드 영역 -->
							<th:block th:each="a, stat : ${replyAttachList}">
								<div class="swiper-slide">
									<div class="pop_img" th:style="${'background-image:url('+planView+'/'+a.sysFileNm+');'}">
									</div>
								</div>
							</th:block>
							</div>
						</div>
						<div class="swiper-button-next"></div>
						<div class="swiper-button-prev"></div>						
						<div class="swiper-pagination"></div>
                    </div>
                </div>
            </div>
        </div>        
<!--     </div> -->
	<!-- //댓글 이미지 팝업 -->	
<a href="javascript:void(0);" rel="modal:close"	onclick="cfCloseLayer('layer_review_photo')" class="close-modal">Close</a>
<script th:inline="javascript">
$(document).ready( function() {
	let replyAttchSq = 0; 
	if (!gagajf.isNull( [[${plan.attachSq}]])){
		replyAttchSq = [[${plan.attachSq}]];
	} 
	
	var contactPopSwiper = new Swiper('.thumb_img_pop .swiper-container', {
		navigation: {
			nextEl: '.thumb_img_pop .swiper-button-next',
			prevEl: '.thumb_img_pop .swiper-button-prev',
		},
		pagination: {
			el: '.thumb_img_pop .swiper-pagination',
			clickable: true,
		},
		observer:true,
		observeParents: true,
	});		
	
	contactPopSwiper.slideTo(replyAttchSq, 0, false);
	contactPopSwiper.update();

});
/*<![CDATA[*/
	
/*]]>*/
</script>
</html>