<?php if ($pt->config->comment_system == 'default' || $pt->config->comment_system == 'both') { ?>
	<hr>
    <div class="comments-content pt_video_comments">
        <div class="comments-header">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="21" height="21"><path fill="none" d="M0 0h24v24H0z"/><path fill="currentColor" d="M16.8 19L14 22.5 11.2 19H6a1 1 0 0 1-1-1V7.103a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1V18a1 1 0 0 1-1 1h-5.2zM2 2h17v2H3v11H1V3a1 1 0 0 1 1-1z"/></svg>&nbsp;{{COUNT_COMMENTS}} {{LANG comments}}
            <span class="dropdown sort-comments-dropdown pull-right">
				<span class="dropdown-toggle pointer" type="button" data-toggle="dropdown">
					<i class="material-icons">sort</i>&nbsp;&nbsp;&nbsp;{{LANG sort_by}}
				</span>
				<ul class="dropdown-menu">
          
					<li class="sort-comments" id="1">
						<a href="javascript:void(0);">{{LANG top_commnets}}</a>
					</li>
					<li class="sort-comments" id="2">
						<a href="javascript:void(0);">{{LANG last_commnets}}</a>
					</li>
				</ul>
            </span>
        </div>
        <?php if (($pt->config->sell_videos_system == 'on' && $pt->get_video->sell_video > 0 && $pt->is_paid > 0) || $pt->get_video->sell_video == 0 || ($pt->config->sell_videos_system == 'on' && $pt->get_video->sell_video > 0 && $pt->get_video->is_owner)) {
          if ($pt->get_video->sell_video == 0 || $pt->get_video->is_owner || ($pt->get_video->sell_video > 0 && $pt->is_paid > 0)) { ?>
		<div class="w100 pt_blogcomm_combo yp_video_comment">
			<?php if (IS_LOGGED): ?>
			<img class="avatar" src="{{ME avatar}}" alt="{{ME name}} avatar" />
			<?php endif; ?>
			<textarea name="comment" rows="1" class="form-control jTextarea" id="comment-textarea" placeholder="{{LANG write_your_comment}}"></textarea>
			<button class="btn" onclick="PT_PostComment(this)">{{LANG publish}}&nbsp;&nbsp;&nbsp;<svg xmlns="http://www.w3.org/2000/svg" class="btn btn-main" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z"></path></svg></button>
		</div>
		<br><br>
     <?php } } ?>
        <div class="comment-button">
            <div class="user-comments" id="video-pinned-comments">
				<div id="pinned-comment">
					{{PINNED_COMMENTS}}
				</div>
            </div>
        </div>
        <div class="comments-loading hidden">
			<i class="fa fa-circle-o-notch spin"></i>
        </div>
        <?php if ($pt->config->live_video != 1 || ($pt->config->live_video == 1 && !$pt->get_video->is_still_live) ) { ?>
        <div class="user-comments" id="video-user-comments">
          {{COMMENTS}}
        </div>
        <?php } ?>
        
        <?php if ($pt->count_comments > 0): ?>
            <div class="watch-video-show-more comments-load">
              {{LANG show_more}}
            </div>
        <?php endif; ?>
    </div>
<?php } ?>
<?php if ($pt->config->comment_system == 'fb' || $pt->config->comment_system == 'both') { ?>
    <div class="content">
        <div class="comments-header">
            {{LANG fb_comments}}
        </div>
        <div class="comment-box">
            <div class="fb-comments" data-href="{{URL}}" data-numposts="5" width="100%"></div>
        </div>
    </div>
<?php } ?>
<input type="hidden" id="video-id" value="{{VIDEO_ID}}">

<script>
jQuery(document).ready(function($) {

    var sort_comments_by = 2;

    $("li.sort-comments").click(function(event) {
      sort_comments_by = $(this).attr('id');
      var video_id     = $('#video-id').val();
      var data_obj     = {
        video_id:video_id,
        sort_by:sort_comments_by
      };

      $('#video-user-comments').empty();
      $(".comments-loading").removeClass('hidden');

      $.post('{{LINK aj/sort-comments}}',data_obj, function(data, textStatus, xhr) {
        if (data.status == 200) {
          PT_Delay(function(){
            $(".comments-loading").addClass('hidden');
            $('#video-user-comments').html(data.comments);
          },200);
        }
        else{
          PT_Delay(function(){
            $(".comments-loading").addClass('hidden');
          },200);
        }
      }); 

    });

    $.fn.scrollTo = function (speed) {
      if (typeof(speed) === 'undefined')
          speed = 500;

      $('html, body').animate({
          scrollTop: ($(this).offset().top - 100)
      }, speed);

      return $(this);
    };

    <?php if (!empty($_GET['cl']) && is_numeric($_GET['cl'])): ?>
      if ($('#comment-<?php echo($_GET['cl']); ?>').length) {
        var comment = $('#comment-<?php echo($_GET['cl']); ?>');
        comment.scrollTo().find('p.comment-text').addClass('active');
        PT_Delay(function(){
          comment.find('p.comment-text').removeClass('active')
        },2000);
      }
      else{
        $('#video-user-comments').scrollTo();
      }
    <?php elseif(!empty($_GET['rl']) && is_numeric($_GET['rl'])): ?>
      if ($('#reply-<?php echo($_GET['rl']); ?>').length) {
        var reply  = $('#reply-<?php echo($_GET['rl']); ?>');
        reply.scrollTo().find('p.reply-text').addClass('active');
        PT_Delay(function(){
          reply.find('p.reply-text').removeClass('active');
        },2000);
      }
      else{
        $('#video-user-comments').scrollTo();
      }
    <?php endif; ?>

    $('#comment-textarea').on('click', function(event) {
      event.preventDefault();
      var logged = $('#main-container').attr('data-logged');
      if (!logged) {
        window.location.href = "{{LINK login?to=<?php echo $pt->page_url_;?>}}";
        return false;
      }
      $(this).css('border', '1px solid #888');
    });

    $('.comments-load').on('click', function(event) {
      event.preventDefault();
      var last_id  = $('.main-comment:last').attr('data-id');
      var video_id = $('#video-id').val();
      var data_obj = {
        last_id: last_id,
        video_id:video_id,
        sort_by:sort_comments_by
      };

      if (sort_comments_by == 1) {
        var comment_ids      = [];
        $('.main-comment').each(function(index, el) {
          comment_ids.push($(el).attr('data-id'));
        });

        data_obj['comments'] = comment_ids.join()      
      }

      $.post('{{LINK aj/load-more-comments}}',data_obj, function(data, textStatus, xhr) {
        if (data.status == 200) {
          $('#video-user-comments').append(data.comments);
        } 

        else {
          $('.comments-load').text(data.message);
        }
      });      
   });
});

function PT_PostComment(button) {
   var text = $('#comment-textarea').val();
   if (!text) {
      return false;
   }
   var video_id = $('#video-id').val();
   if (!video_id) {
      return false;
   }
   if ($('#live_post_comments_'+video_id+' .live_comments').length >= 4) {
      $('#live_post_comments_'+video_id+' .live_comments').first().remove();
    }
      $('#live_post_comments_'+video_id).append('<div class="main-comment live_comments" live_comment_id=""><div class="main-comment-data-sp"><div class="user-avatar pull-left"><img src="{{ME avatar}}" alt="{{ME name}}"></div><div class="user-name"><a href="{{ME url}}" data-load="?link1=timeline&id={{ME username}}">{{ME name}}</a><?php if ($pt->user->verified == 1): ?><i class="fa fa-check-circle fa-fw verified"></i><?php endif; ?></div><div class="user-comment"><p class="comment-text">'+text+'</p></div><div class="clear"></div></div><div class="clear"></div></div>');
   $(button).attr('disabled', true);
   $.post('{{LINK aj/add-comment}}', {video_id: video_id, text: text}, function(data, textStatus, xhr) {
      if (data.status == 200) {
         if ($('.no-comments-found').length > 0) {
            $('.no-comments-found').remove();
         }
         $('#comment-textarea').val('').css('height', '49px');;
         $('#video-user-comments').prepend(data.comment);
      }
      else{
        $('#live_post_comments_'+video_id).find("[live_comment_id='']").remove();
      }
      $(button).attr('disabled', false);
   });
}

function PT_DeleteComment(id) {
  if (!id) { return false; }
  if (!confirm('{{LANG delete_confirmation}}')) { return false; }
  $('#comment-' + id).slideUp('fast');
  $.post('{{LINK aj/delete-comment}}', {id: id});
}

function PT_PinComment(id,pin){
  if (!id) { return false; }
  let pinned_comments = $('#pinned-comment');

  if (pin) {
    $("#comment-" + id).slideUp(200,function(){
		Snackbar.show({text: '{{LANG comment_pinned}}'});
    })
  }
  else{
    pinned_comments.empty();
	Snackbar.show({text: '{{LANG comment_unpinned}}'});
  } 
  
  $.post('{{LINK aj/pin-comment}}', {id: id},function(data){
    if (data.status == 200) {

      $("#comment-" + id).slideUp(100,function(){
        $(this).remove();
        pinned_comments.scrollTo();
      });

      pinned_comments.html(data.html);
    }

    else if(data.status == 304){
      $("#video-user-comments").append(data.html);
    } 
  });
}
</script>