{@ $wi = $widget_info }

<load target="css/owl.carousel.css"/>
<load target="css/custom.css" />

<load target="js/owl.carousel.min.js" />
<load target="js/jquery.isotope.js" />
<load target="js/smooth-scroll.js" />
<load target="js/jquery.singlePageNav.js" />

<style>
	#team { background:{$wi->w_bcolor}; border-radius:10px; <!--@if($wi->navi == "true")-->margin:0 30px;<!--@else-->margin:0;<!--@end--> }
	#team .feature_title,
	#team .feature_sub { color:{$wi->f_color}; }
	.item {<!--@if($wi->display_location == 'center')-->
	display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap;flex-wrap:wrap; -webkit-box-pack:center; -webkit-justify-content:center; -ms-flex-pack:center;justify-content:center;<!--@else--><!--@end-->}
	.item .single-member { background:{$wi->item_bcolor}; width:{$wi->thumbnail_width}px; }
	.item .overlay-effect { width:{$wi->thumbnail_width}px; height:{$wi->thumbnail_height}px; background-color:{$wi->border_color}; }
	.item .overlay-effect .sumtext { color:{$wi->summary_font_color}; font-size:{$wi->sum_font_size}; }
	.item .t_area h3 a { margin-bottom:10px; color:{$wi->title_color}; font-size:{$wi->title_size}; display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
	.item .t_area h5 a { font-size:12px; color:#aaa; }
	#team .owl-theme .owl-controls .owl-buttons .owl-next,
	#team .owl-theme .owl-controls .owl-buttons .owl-prev { margin:0 {$wi->navi_location}px; }
	#team .owl-theme .owl-controls .owl-buttons .owl-prev,
	#team .owl-theme .owl-controls .owl-buttons .owl-next { background:{$wi->navi_bcolor}; color:{$wi->navi_color}; }
</style>

<section id="team">
	<div class="owl-container">
		<div class="owl-row">

			<div class="col-md-12 col-sm-12 col-xs-12">
				<div class="feature_header owl-text-center">
					<h3 cond="$wi->f_text" class="feature_title">{$wi->f_text}</h3>
					<h4 cond="$wi->f_subtext" class="feature_sub">{$wi->f_subtext}</h4>
				</div>
			</div>

			<div id="owl-demo" class="owl-carousel owl-theme team-items">
				<!--@foreach($wi->document_list as $oDocument)-->
				<div class="item owl-text-center">
					<div class="single-member">

						<div class="overlay-hover">

							<a cond="$wi->vt =='extra'" href="{$oDocument->getExtraEidValue('link_url')}" target="<!--@if($wi->d_home_target == 'N')-->_blank<!--@else-->_self<!--@end-->">
								<img src="{$oDocument->getThumbnail($wi->thumbnail_width,$wi->thumbnail_height,$idget_vals->thumbnail_type)}" alt="" class="img-responsive pr_tooltip" <!--@if($wi->display_summary == 'N')-->title="{$oDocument->getExtraEidValue('link_url')}" pr_color="{$wi->tooltip_color}" pr_position="{$wi->tooltip_location}"<!--@end-->>
							</a>

								<a cond="$wi->vt =='lightbox'" class="image-link" href="{$oDocument->getThumbnail($wi->thumbnail_width*$wi->thumbnail_zoom,$wi->thumbnail_height*$wi->thumbnail_zoom,ratio)}" data-lightbox="lightbox" data-title="<a href='{$oDocument->getPermanentUrl()}'>{$oDocument->getTitleText($wi->subject_cut_size)} &telrec;</a>">
									<load target="css/lightbox.min.css" />
									<load target="js/lightbox.js"/>
									<img src="{$oDocument->getThumbnail($wi->thumbnail_width,$wi->thumbnail_height,$wi->thumbnail_type)}" alt="" class="img-responsive">
								</a>

							<div cond="$wi->display_summary == 'Y'" class="overlay-effect">
								<ul class="social list-inline">
									<li cond="$wi->display_author== 'true'"><i class="far fa-user"></i><a href="#" onclick="return false;" class="member_{$oDocument->get('member_srl')}">{$oDocument->getNickName()}</a></li>
									<li cond="$wi->display_regdate == 'true'"><i class="far fa-clock"></i>{$oDocument->getRegdate('Y m d')}</li>
									<li cond="$wi->display_comment_count== 'Y' && $oDocument->getCommentCount()"><a href="{$oDocument->getPermanentUrl()}#comment"><i class="fa fa-copyright"></i>{$oDocument->getCommentCount()}</a></li>
									<li cond="$wi->display_readed_count== 'Y'"><i class="fa fa-registered" aria-hidden="true"></i>{$oDocument->get('readed_count')}</li>
									<li cond="$wi->display_voted_count== 'Y' && $oDocument->get('voted_count')>0"><i class="fa fa-thumbs-o-up"></i>{$oDocument->get('voted_count')}</li>
								</ul>
								<p cond="$wi->display_summary == 'Y'">
									<a class="sumtext" href="{$oDocument->getPermanentUrl()}#{$oDocument->getCommentCount()}">{$oDocument->getSummary($wi->content_cut_size)}
									</a>
								</p>
							</div>
						</div>

						<div cond="$wi->item_view =='Y'" class="t_area">
							<h3>
								<a cond="$wi->title_visibility =='true'" href="{$oDocument->getPermanentUrl()}#{$oDocument->getCommentCount()}">{$oDocument->getTitleText($wi->title_length)}
								</a>
							</h3>
							<h5 cond="$wi->d_home =='Y'" id="direct" class="direct pr_tooltip" pr_color="{$wi->tooltip_color}" pr_position="{$wi->tooltip_location}" title="{$oDocument->getExtraEidValue('link_url')}">
								<a cond="$oDocument->getExtraEidValue('link_url')" href="{$oDocument->getExtraEidValue('link_url')}" target="<!--@if($wi->d_home_target == 'N')-->_blank<!--@else-->_self<!--@end-->"><i class="fas fa-link"></i><!--@if($wi->d_home_t == '1')--> {$wi->d_home_text}<!--@else-->{$oDocument->getExtraEidValue('link_url')}<!--@end-->
								</a>
							</h5>
						</div>

					</div>
				</div>
				<!--@end-->
			</div>

		</div>
	</div>
</section>

<script>
	"use strict";

	$("#owl-demo").owlCarousel({

	<!--@if(!Mobile::isMobileCheckByAgent() && $wi->navi == "true")-->
	navigation : true,
	navigationText: [
	"<img src='{$tpl_path}/img/left.png' width=15 />",
	"<img src='{$tpl_path}/img/right.png' width=15 />"
	],
	<!--@end-->
	slideSpeed : {$wi->scroll_speed},
	paginationSpeed : 400,
	<!--@if($wi->controls == "true")-->
	autoPlay: true,
	<!--@end-->
	items : {$wi->shown_image_num},
	goToFirst: true,
	goToFirstSpeed:1000 
	});
</script>

<script>
	lightbox.option({
	  'resizeDuration':{$wi->lr_duration},
	  'imageFadeDuration':{$wi->li_duration},
	  'positionFromTop':{$wi->l_top},
	  'disableScrolling':{$wi->l_scrolling},
	  'alwaysShowNavOnTouchDevices':{$wi->lt_nav},
	  'wrapAround':{$wi->l_around}
	})
</script>