{@ $wi = $widget_info; }
{@ $no = $wi->mh_n }

<load target="normal.css" />

<style>
	#webcon_news_wrap{$no} { margin:0 0 5px 0; padding:0 5px 5px 0; background:{$wi->background_color};; border:{$wi->board_line_width}px solid {$wi->board_line_color}; border-radius:5px; }
	#webcon_news_wrap{$no} .webcon_news_thumb { height:{$wi->thumbnail_height+40}px }
	#webcon_news_wrap{$no} .webcon_news_thumb .webcon_box { height:35px; padding-right:10px; }
	#webcon_news_wrap{$no} .webcon_news_thumb .webcon_box .thumb { width:{$wi->thumbnail_width}px; height:{$wi->thumbnail_height}px }
	#webcon_news_wrap{$no} .webcon_news_thumb .webcon_box .top_title { color:#444; font-size:16px }
	#webcon_news_wrap{$no} .webcon_news_thumb .webcon_box .bottom_content { color:#444; font-size:12px }
	.c_icon img[alt~="file"] {display:none;}
	#webcon_news_wrap{$no} .webcon_news_thumb li .bottom_content { overflow:hidden; text-overflow:ellipsis; line-height:25px; height:{$wi->thumbnail_height-5}px; }

	@media all and (max-width:480px) {
	#webcon_news_wrap{$no} { margin:20px 10px; }
	.webcon_news > li .title { text-overflow:ellipsis; white-space:nowrap; overflow: hidden; }
	#webcon_news_wrap{$no} .webcon_news_thumb { height:170px; }
	#webcon_news_wrap{$no} .webcon_news_thumb .webcon_box .thumb { width:50%; height:50%; }
	#webcon_news_wrap{$no} .webcon_news_thumb li .bottom_content { -webkit-box; -webkit-line-clamp: 5; height:100px; }

	.webcon_news_thumb .top_btn,
	.webcon_news > li .title .bt,
	.webcon_news > li .title .bt1,
	.webcon_news > li .title .author,
	.webconnews_webzineNavigator,
	.webcon_news > li .title .readed { display:none; }
	}
</style>

{@
	$unique = rand(0,100);
	$totalPage = ceil(count($wi->document_list)/$wi->rows_list_count);
}

<div id="webcon_news_wrap{$no}" class="webcon_news_container_{$unique} ">
	<ul class="webcon_news_thumb">
		<!--@for($i=0;$i<$wi->rows_list_count*$wi->page_count;$i++)-->
			{@ $oDocument = $wi->document_list[$i]}
			<!--@if($oDocument->document_srl)-->
				{@ $_existsThumbnail = $oDocument->thumbnailExists($wi->thumbnail_width,$wi->thumbnail_height,$wi->thumbnail_type) }
					<li cond="$_existsThumbnail" class="webcon_box">
						<a href="{$oDocument->getPermanentUrl()}">
							<div cond="$wi->top_title == 'Y'" class="top_title">{$oDocument->getTitle()}</div>
							<div cond="$wi->thumb == 'Y'" class="thumb">
								<img src="{$oDocument->getThumbnail($wi->thumbnail_width,$wi->thumbnail_height,$wi->thumbnail_type)}" border="0" />
							</div>
							<div cond="$wi->bottom_content == 'Y'" class="bottom_content">{$oDocument->getSummary($wi->content_cut_size)}</div>
						</a>
					</li>
			<!--@end-->
		<!--@end-->
		<div cond="$wi->top_btn == 'Y'" class="top_btn">
			<a class="p_btn"><i class="fas fa-chevron-circle-left"></i></a>
			<a class="n_btn"><i class="fas fa-chevron-circle-right"></i></a>
		</div>
	</ul>

	<ul cond="$wi->webcon_news == 'Y'" class="webcon_news">
		{@$_idx=0}
		<!--@for($i=0;$i<$wi->rows_list_count*$wi->page_count;$i++)-->
			{@ $oDocument2 = $wi->document_list[$i]}
			<!--@if($oDocument2->document_srl)-->
				{@ $_existsThumbnail2 = $oDocument2->thumbnailExists($wi->thumbnail_width,$wi->thumbnail_height,$wi->thumbnail_type) }
					<li cond="$_existsThumbnail2" <!--@if($_idx >= $wi->rows_list_count)-->style="display:none"<!--@end--> title="{$oDocument2->getTitle()}">
						<p class="title">
							<span cond="$wi->display_regdate == 'Y'" class="regdate">{$oDocument2->getRegdate("Y-m-d")}</span>
							<span cond="$wi->display_browser_title == 'Y'" class="bt">{$oDocument2->getBrowserTitle()}</span><span cond="$wi->display_browser_title == 'Y'"  class="bt1" style="color:gray"> I</span>
							<a class="subtitle" href="{$oDocument2->getPermanentUrl()}"><!--@if(!Mobile::isMobileCheckByAgent())-->{$oDocument2->getTitle($wi->subject_cut_size)}<!--@else-->{$oDocument2->getTitle(44)}<!--@end--></a>
							<span cond="$wi->show_icon=='Y'" class="c_icon">{$oDocument2->printExtraImages()}</span>
							<a cond="$wi->display_comment_count == 'Y' && $oDocument2->getCommentCount()"href="{$oDocument2->getPermanentUrl()}#comment"><span class="command">{$oDocument2->getCommentCount()}</span></a>
							<span cond="$wi->display_readed_count == 'Y'" class="readed">&reg;{$oDocument2->get('readed_count')} </span>
							<span cond="$wi->display_author == 'Y'" class="author"><a href="#" onclick="return false;" class="member_{$oDocument2->get('member_srl')}">{$oDocument2->getNickName()}</a></span>
						</p>
					</li>
			<!--@end-->
			{@$_idx++}
		<!--@end-->
	</ul>

	<ul  cond="$wi->page_count > 1 && $wi->rows_list_count<$_idx" class="webconnews_webzineNavigator">
		<li style="margin-right:10px;"><font style="font-size:13px;"><span class="currentPage">1</span> / <span>{$totalPage}</span></font></li>
		<li><button type="button" class="prev"  onclick="news_l_widget_prev(jQuery(this).parents('.webcon_news_container_{$unique} ul.webconnews_webzineNavigator').prev('.webcon_news_container_{$unique} ul.webcon_news'),{$wi->rows_list_count},{$unique});">&lt;</button></li>
		<li><button type="button" class="next"  onclick="news_l_widget_next(jQuery(this).parents('.webcon_news_container_{$unique} ul.webconnews_webzineNavigator').prev('.webcon_news_container_{$unique} ul.webcon_news'),{$wi->rows_list_count},{$unique});">&gt;</button></li>
	</ul>
</div>

<script>
	var con_count = 0;
	var list_count = Number($(".webcon_news_container_{$unique} ul").attr("id"));
	var page =1;

	jQuery(function($){
		$(".webcon_news_container_{$unique} .webcon_news > li").eq(0).css("border","0px solid #0eabee");
		if($(".webcon_news_container_{$unique} .webcon_news_thumb li").length > 0){
			$(".webcon_news_container_{$unique} .webcon_news_thumb li").eq(0).addClass('active')
			$(".webcon_news_container_{$unique} .webcon_news > li").hover(function() {
				$(".webcon_news_container_{$unique} .webcon_news > li").css("border","0px solid #0eabee");
				$(".webcon_news_container_{$unique} .webcon_news > li").css("border-bottom","0px solid #eaeaea");
				$(this).css("border","0px solid #0eabee");
				$(".webcon_news_container_{$unique} .webcon_news_thumb li").removeClass('active');
				lnb_length = $(this).index();
				$(".webcon_news_container_{$unique} .webcon_news_thumb li").eq(lnb_length).addClass('active');
				$(".webcon_news_container_{$unique} .webcon_news_thumb li img").fadeIn(800);
				con_count = lnb_length;
			});
		}
		$(".webcon_news_container_{$unique} .webcon_news_thumb .p_btn").click(function(){
			con_count--;
			if(con_count > -1){
				$(".webcon_news_container_{$unique} .webcon_news_thumb li").removeClass('active');
				$(".webcon_news_container_{$unique} .webcon_news_thumb li").eq(con_count).addClass('active');
				$(".webcon_news_container_{$unique} .webcon_news > li").css("border","0px solid #0eabee");
				$(".webcon_news_container_{$unique} .webcon_news > li").css("border-bottom","0px solid #eaeaea");
				$(".webcon_news_container_{$unique} .webcon_news > li").eq(con_count).css("border","0px solid #0eabee");
			}else{
				con_count = 0;
			}
			var c_page = Math.floor(con_count/list_count)+1;
			if(c_page >= 1){
				$(".webcon_news_container_{$unique} .webcon_news > li").css("display","none");
				for($i=list_count*(c_page-1) ; $i < list_count*(c_page-1)+list_count ; $i++){
					$(".webcon_news_container_{$unique} .webcon_news > li").eq($i).css("display","block");
				}
			}
			$(".webcon_news_container_{$unique} .webconnews_webzineNavigator li .currentPage").text(c_page);
		});

		$(".webcon_news_container_{$unique} .webcon_news_thumb .n_btn").click(function(){
			con_count++;
			if(con_count < $(".webcon_news_container_{$unique} .webcon_news_thumb li").length){
				$(".webcon_news_container_{$unique} .webcon_news_thumb li").removeClass('active');
				$(".webcon_news_container_{$unique} .webcon_news_thumb li").eq(con_count).addClass('active');
				$(".webcon_news_container_{$unique} .webcon_news > li").css("border","0px solid #0eabee");
				$(".webcon_news_container_{$unique} .webcon_news > li").css("border-bottom","0px solid #eaeaea");
				$(".webcon_news_container_{$unique} .webcon_news > li").eq(con_count).css("border","0px solid #0eabee");
			}else{
				con_count = $(".webcon_news_container_{$unique} .webcon_news_thumb li").length-1;
			}
			var c_page = Math.floor(con_count/list_count)+1;
			var t_page = Math.floor($(".webcon_news_container_{$unique} .webcon_news_thumb li").length/list_count);
			if(c_page <= t_page){
				$(".webcon_news_container_{$unique} .webcon_news > li").css("display","none");
				for($i=list_count*(c_page-1) ; $i< list_count*(c_page-1)+list_count ; $i++){
					$(".webcon_news_container_{$unique} .webcon_news > li").eq($i).css("display","block");
				}
			}
			$(".webcon_news_container_{$unique} .webconnews_webzineNavigator li .currentPage").text(c_page);
		});
	});
	function news_l_widget_next(obj,list_per_page,no){
		unique = no;
		if(obj.is('table')) {
			var list = jQuery('>tbody>tr',obj);
		} else if(obj.is('ul')) {
			var list = jQuery('>li',obj);
		}

		var total_page = parseInt((list.size()-1) / list_per_page,10)+1;
		list.each(function(i){
			if(jQuery(this).css('display') !='none'){
				page = parseInt(i/list_per_page,10) + 1;
				return false;
			}
		});
		if(total_page <= page) return;
		list.each(function(i){
			if( (page* list_per_page) <= i && ((page+1) * list_per_page) > i){
				jQuery(this).show();
			}else{
				jQuery(this).hide();
			}
		});
		jQuery(".webcon_news_container_"+unique+" .webconnews_webzineNavigator li .currentPage").text(page+1);
		jQuery(".webcon_news_container_"+unique+" .webcon_news_thumb li").removeClass('active');
		jQuery(".webcon_news_container_"+unique+" .webcon_news_thumb li").eq(page * list_per_page).addClass('active');
		jQuery(".webcon_news_container_"+unique+" .webcon_news > li").css("border","0px solid #0eabee");
		jQuery(".webcon_news_container_"+unique+" .webcon_news > li").eq(page * list_per_page).css("border","0px solid #0eabee");
		con_count = page * list_per_page;
	}

	function news_l_widget_prev(obj,list_per_page,no){
		unique = no;
		if(obj.is('table')){
			var list = jQuery('>tbody>tr',obj);
		}else if(obj.is('ul')){
			var list = jQuery('>li',obj);
		}

		var total_page = parseInt((list.size()-1) / list_per_page,10)+1;
		list.each(function(i){
			if(jQuery(this).css('display') !='none'){
				page = parseInt(i/list_per_page,10)+1;
				return false;
			}
		});

		if(page <= 1) return;
		list.each(function(i){
			if( ((page-2)* list_per_page)<= i && ((page-1) * list_per_page) > i){
				jQuery(this).show();
			}else{
				jQuery(this).hide();
			}
		});
		jQuery(".webcon_news_container_"+unique+" .webconnews_webzineNavigator li .currentPage").text(page-1);
		jQuery(".webcon_news_container_"+unique+" .webcon_news_thumb li").removeClass('active');
		jQuery(".webcon_news_container_"+unique+" .webcon_news_thumb li").eq( (page-2) * list_per_page ).addClass('active');
		jQuery(".webcon_news_container_"+unique+" .webcon_news > li").css("border","0px solid #0eabee");
		jQuery(".webcon_news_container_"+unique+" .webcon_news > li").eq((page-2) * list_per_page ).css("border","0px solid #0eabee");
		con_count = (page-2) * list_per_page;
	}
</script>