<?php if ($pt->config->comment_system == 'default' || $pt->config->comment_system == 'both') { ?>
    <div class="comments-content content pt_shadow pt_video_comments">
        <div class="comments-header">
            <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> {{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> {{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>
		<div class="w100 pt_blogcomm_combo">
			<?php if (IS_LOGGED): ?>
			<img class="avatar" src="{{ME avatar}}" alt="{{ME name}} avatar" />
			<?php endif; ?>
			<textarea name="comment" class="form-control" id="comment-textarea" placeholder="{{LANG write_your_comment}}"></textarea>

			<button class="btn pull-right btn-main" onclick="PT_PostComment(this)" data-toggle="tooltip" title="{{LANG publish}}">
				<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-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
			</button>
		</div>
        <div class="comment-button">
            <hr>
            <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>
        <div class="user-comments" id="video-user-comments">
          {{COMMENTS}}
        </div>
        
        <?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->actual_link;?>}}";
        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) {
      $('#comment-textarea').css('border', '1px solid red');
      return false;
   }
   var video_id = $('#video-id').val();
   if (!video_id) {
      return false;
   }
   $(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('');
         $('#video-user-comments').prepend(data.comment);
      }
      $(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>