<?php 
$query = $wo['story']['id'];
$image = Wo_GetMedia($wo['story']['postFile']);
if (strpos($wo['story']['postFile'],',') !== false) {
    $explode = @explode(',', $wo['story']['postFile']);
    $image = Wo_GetMedia($explode[0]);
}
?>
<div class="lightbox-backgrond" onclick="Wo_CloseLightbox();"></div>
<div class="lightbox-content post wo_imagecombo_lbox lightpost-<?php echo $wo['story']['id'];?>" id="post-<?php echo $wo['story']['id'];?>" data-post-id="<?php echo $wo['story']['id'];?>">
	<div class="story-img">
		<div class="wo_lbox_topbar">
			<span class="lbox_topbar_child <?php echo Wo_RightToLeft('pull-left');?>">
				<span onclick="Wo_CloseLightbox();">
					<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
				</span>
			</span>
			<span class="lbox_topbar_child <?php echo Wo_RightToLeft('pull-right');?>">

				<?php
				$fileType = strtolower(substr($image, strrpos($image, '.') + 1));
				if ( $wo['user']['user_id'] == $wo['story']['publisher']['user_id'] && ( $fileType == 'jpg' || $fileType == 'jpeg' || $fileType == 'png') ){?>
				<span onclick="rotate(<?php echo $wo['story']['id'];?>)">
					<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-rotate-ccw"><polyline points="1 4 1 10 7 10"></polyline><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"></path></svg>
				</span>
				<?php } ?>

				<span onclick="window.open('<?php echo $image;?>', '_blank')">
					<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-airplay"><path d="M5 17H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-1"></path><polygon points="12 15 17 21 7 21 12 15"></polygon></svg>
				</span>
				<span>
					<a href="<?php echo $image;?>" download>
					<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-download"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>
					</a>
				</span>
				<span onclick="zoomin(<?php echo $wo['story']['id'];?>)">
					<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-zoom-in"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line><line x1="11" y1="8" x2="11" y2="14"></line><line x1="8" y1="11" x2="14" y2="11"></line></svg>
				</span>
				<span onclick="zoomout(<?php echo $wo['story']['id'];?>)">
					<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-zoom-out"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line><line x1="8" y1="11" x2="14" y2="11"></line></svg>
				</span>
				<?php
				$fileType = strtolower(substr($image, strrpos($image, '.') + 1));
				if ( $wo['user']['user_id'] == $wo['story']['publisher']['user_id'] && ( $fileType == 'jpg' || $fileType == 'jpeg' || $fileType == 'png') && $wo['story']['multi_image_post']){?>
				<span class="<?php echo Wo_RightToLeft('pull-right');?> close-lightbox" onclick="Wo_DeletePost(<?php echo $wo['story']['id'];?>);">
					<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
				</span>
				<?php } ?>
			</span>
		</div>
		<span class="changer previous-btn" onclick="Wo_PreviousPicture(<?php echo $query;?>);">
			<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-left" color="#fff"><polyline points="15 18 9 12 15 6"></polyline></svg>
		</span>
		<span class="changer next-btn" onclick="Wo_NextPicture(<?php echo $query;?>);">
			<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right" color="#fff"><polyline points="9 18 15 12 9 6"></polyline></svg>
		</span>
		<div id="draggableHelper" style="display: table-cell;vertical-align: middle;">
			<?php if ($wo['story']['blur'] == 1) { ?>
				<button class='btn btn-main image_blur_btn remover_blur_btn_<?php echo $wo['story']['id']; ?>' onclick='Wo_RemoveBlur(this,<?php echo $wo['story']['id']; ?>)'><?php echo $wo['lang']['view_image']; ?></button>
				<img src="<?php echo $image. "?cache=" . time();?>" alt="media"class="image_blur remover_blur_<?php echo $wo['story']['id']; ?>" id="wo_zoom_<?php echo $wo['story']['id'];?>">
	      	<?php }else{ ?>
	      		<img src="<?php echo $image. "?cache=" . time();?>" alt="media"class="" id="wo_zoom_<?php echo $wo['story']['id'];?>">
	      	<?php } ?>
		</div>
	</div>
	<div class="comment-section">
		<div class="comment-section-inner">
			<div class="comment-inner-header">
				<div class="<?php echo Wo_RightToLeft('pull-right');?> close-lightbox" onclick="Wo_CloseLightbox();">
					<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x" style="margin-top: 0px;width: 24px;height: 24px;"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
				</div>
				<div class="user-avatar <?php echo Wo_RightToLeft('pull-left');?>">
					<img src="<?php echo $wo['story']['publisher']['avatar'];?>" alt="">
				</div>
				<div class="user-name h5">
					<span class="user-popover" data-type="<?php echo $wo['story']['publisher']['type']; ?>" data-id="<?php echo $wo['story']['publisher']['id']; ?>">
						<a href="<?php echo $wo['story']['publisher']['url'];?>"><?php echo $wo['story']['publisher']['name'];?></a>
					</span>
				</div>
				<h6>
					<div class="time" style="color:#9197a3">
						<span class="ajax-time" title="<?php echo date('c',$wo['story']['time']); ?>">
							<?php echo Wo_Time_Elapsed_String($wo['story']['time']); ?> 
						</span>
					</div>
				</h6>
			</div>
			<div class="clear"></div>
			<div class="comment-inner-middle">
				<div class="post-info">
					<div class="post-text">
						<p><?php echo $wo['story']['postText'];?> </p>
					</div>
				</div>

				<div class="stats buttons" style="display: flex;">
					<?php if ($wo['config']['second_post_button'] == 'reaction') { ?>
						<div class="like-stat  stat-item post-like-status" style="    width: inherit;">
						<span class="like-emo post-reactions-icons-<?php echo $wo['story']['id']; ?>" onclick="Wo_OpenPostReactedUsers(<?php echo $wo['story']['id']; ?>);">
						<?php echo Wo_GetPostReactions($wo['story']['id']);?>
						</span>
						<!-- <span class="like-details">Arkaprava Majumder and 1k others</span> -->
						</div>
					<?php }?>
				</div>
				<div class="stats" id="wo_post_stat_button">
					<?php if ($wo['loggedin'] == true) { $wo['story']['viewmode'] = "lightbox";  echo Wo_LoadPage('buttons/like-wonder');}?>
				</div>
			</div>
			<div class="comment-inner-footer lightbox-post-footer <?php echo ($wo['story']['comments_status'] == 0) ? 'hidden' : '';?>">
				<div id="hidden_inputbox_comment_lighbox"></div>
				<?php if($wo['story']['post_comments'] > 3 && $wo['story']['limited_comments'] === true && $wo['story']['comments_status'] == 1) { ?>
				<!--<div class="view-more-wrapper load-more-comments page-margin" onclick="Wo_loadAllCommentslightbox(<?php echo $wo['story']['id']; ?>);">
					<span><?php echo $wo['lang']['view_more_comments'];?></span>
					<div class="ball-pulse <?php echo Wo_RightToLeft('pull-right');?>" style="line-height: 20px;"><div></div><div></div><div></div></div>
				</div>-->
				<?php } ?>
				<div class="comments-list comments-list-lightbox">
					<div class="comment comment-container"></div>
					<div class="comment comment-container"></div>
					<?php 
						foreach($wo['story']['get_post_comments'] as $wo['comment']) {
							echo Wo_LoadPage('comment/lightbox-content');
						}
					?>
					<?php  if (empty($wo['story']['get_post_comments'])) { ?>
					<div class="lightbox-no-comments">
						<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-message-circle"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path></svg>
						<h5><?php echo $wo['lang']['no_comments_found'];?></h5>
					</div>
					<?php } ?>
				</div>
			</div>
		</div>
		<div class="lightbox-post-footer post-comments <?php echo ($wo['story']['comments_status'] == 0) ? 'hidden' : '';?>" id="post-comments-<?php echo $wo['story']['id'];?>">
			<div class="post-commet-textarea dropup">
				<textarea class="form-control lighbox comment-textarea textarea" placeholder="<?php echo $wo['lang']['write_comment'];?>" type="text" onkeyup="Wo_RegisterComment(this.value,<?php echo $wo['story']['id']; ?>,<?php echo $wo['story']['publisher']['user_id']; ?>, event, <?php echo (!empty($wo['story']['publisher']['page_id'])) ? $wo['story']['publisher']['page_id'] : '0'; ?>)"  onkeydown="textAreaAdjust(this, 30,'lightbox')" dir="auto"></textarea>
				<span class="input-group-btn emo-comment dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" >
					<span class="btn btn-file">
						<svg fill="#009da0" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" class="feather feather-user-plus"><path d="M0 0h24v24H0z" fill="none"/><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z"/></svg>
					</span>
				</span>
				<div class="emo-post-container dropdown-menu" role="menu">
					<?php  
					foreach ($wo['emo'] as $code => $name) {
					$code   = $code;
					echo  '<span onclick="Wo_AddEmoToCommentInput(' . $wo["story"]["id"] . ', \'' . $code . '\', \'lightbox-post-footer\');"><i class="pointer twa-lg twa twa-' . $name . '"></i></span>'; 
					} 
					?>
				</div>
			</div>
		</div>
		<div class="clear"></div>
	</div>
</div>
<script>
$(document).keydown(function(e) {
    if (e.keyCode == 27) {
        Wo_CloseLightbox();
    }
    $(".lighbox.textarea").triggeredAutocomplete({
       hidden: '#hidden_inputbox_comment_lighbox',
       source: Wo_Ajax_Requests_File() + "?f=mention",
       trigger: "@" 
    });
});
$( ".story-img" ).mouseover(function() {
  $( ".changer" ).fadeIn(200);
});
$( ".story-img" ).mouseleave(function() {
  $( ".changer" ).fadeOut(200);
});

function zoomin(id){
	var myImg = document.getElementById("wo_zoom_<?php echo $wo['story']['id'];?>");
	$(myImg).addClass("double_zoom");
	$('#draggableHelper').draggable({ cursor: "move", revert: true, disabled: false });
}
function zoomout(id){
	var myImg = document.getElementById("wo_zoom_<?php echo $wo['story']['id'];?>");
	$(myImg).removeClass("double_zoom");
	$('#draggableHelper').draggable({ disabled: true, revert: true });
}

var angle = 0;
function rotate(id){
	angle += 90;
	$('#wo_zoom_<?php echo $wo['story']['id'];?>').css({'transform': 'rotate(-' + angle + 'deg)'});
	$.get(Wo_Ajax_Requests_File(), {
		f: 'rotate_image',
		angle: angle,
		image: '<?php echo $wo['story']['id'];?>'
	}, function (data) {
		
	});
}
</script>