{assign var="publicCount" value=0}
{assign var="modsAndAuthorsCount" value=0}
{assign var="modsCount" value=0}

{foreach from=$postResponses item=cComment key=cKey}
{if $cComment->moderationStatus eq 0 && $cComment->lvl eq 1}
  {assign var="publicCount" value=$publicCount + 1}
{else if $cComment->moderationStatus eq 6 && $cComment->lvl eq 1}
  {assign var="modsAndAuthorsCount" value=$modsAndAuthorsCount + 1}
{else if $cComment->moderationStatus eq 7 && $cComment->lvl eq 1}
  {assign var="modsCount" value=$modsCount + 1}
{/if}
{/foreach}

<div class="b-single-idea__user-tag-resultHidden" style="display: none">
<img src="{$vars.resourcesUrl}profile_counter22.png" />
<span></span>
</div>

<div class="mdl-panel mdl-comment-form">
  <div class="b-single-idea__comments-menu">
    <ul>
      <li class="-active">
        <a id="comments-public" href="#" data-target=".filter-public">{"Public"|gettext} ({$publicCount})</a>
      </li>
      {if $isCurrentUserAuthor || $currentUserCanModerateComments}
        <li>
          <a id="comments-mods-and-authors" href="#" data-target=".filter-mods-and-authors">{"Moderators and authors"|gettext} ({$modsAndAuthorsCount})</a>
        </li>
      {/if}
      {if $currentUserCanModerateComments}
        <li>
          <a id="comments-mods" href="#" data-target=".filter-mods">{"Moderators only"|gettext} ({$modsCount})</a>
        </li>
      {/if}
    </ul>
    <div class="line"></div>
  </div>


                    <form id="commentForm" class="commentForm mdl-form" method="post" action="/post/addcomment/{$cPost->data.post_id}?ak={$user->getActionKey()}">
            <div class="b-single-idea__new-comment">
            <input type="hidden" name="idea_id" value="{$cPost->id}" id="idea_id" />
            <input type="hidden" name="allAuthors" id="allAuthors" value="{$allAuthors}" />
            {if $allowComment}
              <input name="post_user" value="{$user->id}" type="hidden" />
              <input name="comment_userTags" id="comment_userTags" value="" type="hidden" />
              <input name="commentForm_userTags" id="commentForm_userTags" value="" type="hidden" />
              <input name="comment_userScreennames" id="comment_userScreennames" value="" type="hidden" />
              <input name="comment_type" id="comment_type" value="comment-public" type="hidden" />
              <input type="hidden" name="post_immediateParent" value="{$cPost->id}" id="commentform_post_immediateParent" />
              {if $current_milestone_id}
                <input type="hidden" name="current_milestone_id" value="{$current_milestone_id}" />
              {/if}
              <input type="hidden" name="action" value="addComment" />
              <input type="hidden" class="maxUserTags" name="maxUserTags" value="{$vars.maxUserTags}" />
              <input type="hidden" name="forPhase" value="{$smarty.request.forPhase|intval}" />


                <div class="mdl-comment-form__comment">
                  <div class="mdl-comment__wrapper">
                    <div class="b-single-idea__comment-left">
                      {assign var='selectedFile' value=$user->joined.obj_user_profilepic}
                      <img class="b-image--rounded mdl-comment-form__comment__author__avatar" src="{if intval($selectedFile->data.file_id) ne 0}{$selectedFile->getCloudinaryURL(96, 96)}{else}{$vars.resourcesUrl}profile_counter110.png{/if}" alt="{$cPost->joined.obj_post_user->user_displayName|escape}" />
                    </div>

                    <div class="b-single-idea__comment-right">
                      <div class="b-single-idea__new-comment-area-outer msg_textrea_wrapper mdl-comment-form__comment__top {if $uploadsHidden}-full-border{/if}">
                        <label class="hidden" for="new-comment">{"Comment"|gettext}</label>
                        <textarea name="commentform_post_text" placeholder="{"Type your comment here"|gettext}" id="new-comment" class="requireValidUser b-single-idea__new-comment-area"></textarea>
                      </div>

                <!-- Comments Upload -->
                    {if !$uploadsHidden}
                            <div class="b-single-post--file b-single-post--filesInput mdl-comment-form__comment__bottom">
                                <p class="label"><label for="new-comment-upload">{"Drag and drop or click button to attach files"|gettext}</label></p>
                                <p class="buttonContainer">
                                    <a class="non-ie89 buttonElement mdl-button" onclick="jQuery(this).siblings('input.cloudinary-fileupload[type=file], input.mirp-fileupload[type=file]').click(); return false;" href="#">{"Attach files"|gettext}</a>
                                    {if isset($mirpURL)}
                                      <input class="mirp-idea-files-upload mirp-fileupload hidden" accept="{implode(File::getAllowedExtensions(), ',')}" multiple='1' onchange="Post.uploadMirp(event, '{$mirpURL}', false, 'commentForm', '{$authToken}', '{$communityId}', '{$db_code}')" name="file" type="file" />
                                    {else}
                                      {cl_image_upload_tag('image_id', ['callback' => $vars.cloudinaryConfig.callback, 'use_filename'=>true, 'allowed_formats' =>File::$allowedExtensions, 'html' => ['multiple'=>true, 'class'=>'cloudinary-idea-files-upload', 'id'=>'new-comment-upload']])}
                                    {/if}
                                  </p>


                                  <input type="hidden" name="fileHashes[nonHeader]" value="{','|implode:$fileHashes.nonHeader}" />
              
                                  
                                </div>
                                
                    <div class="b-single-post--file-list">
                        <div class="b-single-post--file-item templateItem" style="display:none;">
                            <img src="{$vars.resourcesUrl}filetypes/22/txt.png" alt="File type icon" />
                            <div class="b-single-post--file-item-name">fileName.pdf</div>
                            <a href="#" class="remove-file right" style="display:none;"><span class="mdl-icon -s"><svg><use href="#cancel"></use></svg></span></a>
                            <div class="b-single-post--file-item-bar"><!--IE--></div>
                        </div>
                    </div>
                    {/if}

                    <div style="clear:both;"></div>
                    <script type="text/javascript">
                        Post.initForm('commentForm');
                    </script>
                    <div id="user_tag_results" class="b-single-idea__user-tag-results">

                    </div>
                    <div class="post_button_wrapper mdl-comment-form__comment__notify-users">
                        <div class="b-single-idea__new-comment-area-bottom" id="b-single-idea__new-comment-area-bottom-0" {if $hubbub->hubbub_arrOptions.userTagsEnabledOnComments eq 0}style="visibility:hidden;"{/if}>
                            <div>
                              <span>@</span><input type="text" name="user_tag_input" class="user_tag_input" id="user_tag_input" placeholder="{"Notify individual users"|gettext}" />
                            </div>
                        </div>
                        <div class="requireValidUser b-single-idea__new-comment-button"><!--Post Button-->
                            <button class="mdl-button -primary">
                              <span id="postButtonTitle">{"Post publicly"|gettext}</span>
                            </button>
                        </div>
                    </div>

                <!-- end Comments Upload -->
                  </div>
                </div>

                <div class="clear"></div>
                {if !$isCurrentPhase && $allowCommentBecauseModerator}
                    <div class="form_button_marginTop"><span class="icon-info"> </span> {"As a moderator, you can add comments to ideas in previous phases."|gettext}</div>
                {else if $allowCommentBecauseModerator}
                    <div class="form_button_marginTop"><span class="icon-info"> </span> {"Comments are closed, but you can still post because you are a moderator."|gettext}</div>
                {/if}
                <div class="clear"><!--IE--></div>
				</div>

			{else}
                <div class="b-single-idea__new-comment-closed">
                    {"Commenting is closed"|gettext}
                </div>

                        {/if} {* if user signed in *}
                <div class="clear"></div>
                <div class="b-single-idea__comment-filters mdl-flex__row">
                  <ul id="comment_only_mods" class="mdl-form__group mdl-filter__items {if in_array($activeTab, 'comments-mods-and-authors', 'comments-mods')}hidden{/if}">
                    <li class="mdl-form__item">
                      <label class="mdl-form__label -inline">
                        <input type="checkbox" class="mdl-form__input -checkbox" id="show_only_moderator_comments">
                        {"Only show comments from moderators"|gettext}
                      </label>
                    </li>
                  </ul>
                  <div class="b-single-idea__comments-menu-sort mdl-comment__sort mdl-filter__items -end">
                    <label for="comments-sort" class="hidden">{"Sort comments"|gettext}</label>
                    <select id="comments-sort" name="comments-sort" class="i-mix-sort b-single-idea__comments-sort">
                      <option value="posted:asc">{"Oldest first"|gettext}</option>
                      <option value="posted:desc">{"Newest first"|gettext}</option>
                      <option value="votes:desc">{"Top Voted"|gettext}</option>
                    </select>
                  </div>
                  <div class="clear"></div>
                </div>

			</div>
                        <div class="clear"></div>
		</form>

        <input type="hidden" name="active-tab" id="active-tab" value="{$activeTab}" />
		<div id="comment_list_container">
			{include file=Template::get('post/comment_list.html') post_id=$cPost->id uploadsHidden=$uploadsHidden}
		</div>

		<script>
            jQuery(function() {
                var search_timeout = undefined;

                jQuery('#user_tag_input').keyup(function(e) {
                    var query = jQuery(this).val();
                    var self = this;

                    if(search_timeout != undefined) {
                        clearTimeout(search_timeout);
                    }

                    search_timeout = setTimeout(function() {
                        search_timeout = undefined;
                        searchUsersForCommentCreation(query);
                    }, 200);
                });
			
			function searchUsersForCommentCreation(userName) {
					if(userName.length > 2) {
                        console.log('searchUsersForCommentCreation');
                        var excludeIds = {$user->data.user_id};
                        jQuery('#commentForm .user-tag-selected').each( function() {
                            excludeIds += ',' + jQuery(this).attr("data-id");
                        });

                        var categoryId = jQuery('#cCategoryId').val() || 0;
                        var allAuthors = jQuery('#allAuthors').val() || '';
                        var commentType = jQuery('#comment_type').val() || '';
                        var postId = jQuery('#idea_id').val() || 0;

                        var requestData = ' { "query":" { users (searchQuery: \\"' +userName+ '\\", searchType: \\"userTag\\", exclude: \\"' + excludeIds + '\\", categoryId: ' + categoryId + ', coAuthors: \\"' + allAuthors + '\\", postId: ' + postId + ', commentType: \\" ' + commentType + '\\" ) { userId screenName userAvatar { fileHash } } }"} ';
                        jQuery.ajax("{$api4url}", {
                            headers: { "CWD-community-id" :  "{(int)$hubbubId}", "Authorization" : "Bearer {$authToken}", "Accept" : "application/json"},
                            type: "post",
                            contentType: 'application/json',
                            data: requestData,
                            success: function(responseData) {
                                jQuery('#user_tag_results').html('').hide();
                                if(responseData.data.users.length !== 0) {
                                    var div = jQuery('.b-single-idea__user-tag-resultHidden');

                                    for (var index = 0; index < responseData.data.users.length; index ++) {
                                        var objCopy = jQuery(div.clone());
                                        objCopy.removeClass('b-single-idea__user-tag-resultHidden').addClass('b-single-idea__user-tag-result mdl-button -s -inline-block');
                                        objCopy.attr('data-screenname', responseData.data.users[index].screenName);
                                        objCopy.attr('data-id', responseData.data.users[index].userId);

                                        if (responseData.data.users[index].userAvatar){
                                            objCopy.find("img").attr("src", "{$cloudinaryuploads}/w_22,h_22,c_fill/" + responseData.data.users[index].userAvatar.fileHash);
                                        }

                                        objCopy.find("span").text(responseData.data.users[index].screenName);
                                        objCopy.find("span").attr('id', 'username-' + responseData.data.users[index].userId);
                                        objCopy.find("span").addClass('username_' + responseData.data.users[index].userId);

                                        objCopy.show();
                                        jQuery('#user_tag_results').append(objCopy);
                                    }
                                    jQuery('#user_tag_results').append('<div class="clear"></div>').show();

                                  // bind "click" events to the newly created rows
                                  jQuery('.b-single-idea__user-tag-result').each(function() {
                                    jQuery(this).click(function() {

                                      var userId = jQuery(this).data('id');

                                      if(jQuery(this).hasClass('user-tag-selected')) {
                                        jQuery('#comment_userTags').val(jQuery('#comment_userTags').val().replace(userId, ''));
                                        jQuery(this).remove();
                                      } else {
                                        var userScreenname = jQuery(this).data('screenname');

                                        jQuery(this).addClass('user-tag-selected', 1);

                                        jQuery('.b-single-idea__new-comment-area-bottom div.clear').each(function() {
                                          jQuery(this).remove();
                                        });

                                        var clear = document.createElement('div');
                                        jQuery(clear).addClass('clear');

                                        jQuery('#comment_userTags').val(jQuery('#comment_userTags').val() + ',' + userId);
                                        jQuery('#comment_userScreennames').val(jQuery('#comment_userScreennames').val() + ',' + userScreenname);
                                        jQuery('#b-single-idea__new-comment-area-bottom-0').append(this);
                                        jQuery('#b-single-idea__new-comment-area-bottom-0').append(clear);
                                        jQuery('#user_tag_input').val('');
                                        jQuery('#user_tag_results').html('').hide();
                                      }
                                    });
                                  });
                                }
                              }
                            });
                          }
            }

            jQuery(function(){
                // On first load, we let the comments be hidden, as they should,
                // to prevent the wierd gliding effect as comments fly into
                // position (if the layout changes from late-loading images)
                jQuery(".b-single-idea__comments-list-item").addClass('mixHide');
                Comment.resetCommentList();
            });


			jQuery('#commentForm').submit(function(e) {
				e.preventDefault();
				jQuery(this).find('.b-single-idea__new-comment-button').hide();
				var ideaId = jQuery('#idea_id').val();

				jQuery.ajax('/post/addcomment/{$cPost->data.post_id}?ak={$user->getActionKey()}', {
					data: jQuery('#commentForm').serialize(),
					type: 'post',
					success: function(data) {
                        if (data.success == 1) {
                            var newCommentId = data.post_id;
                            jQuery('.b-single-idea__new-comment-button').show();
                            Comment.commentsReload(ideaId, 0, newCommentId, newCommentId, 0, {$smarty.request.forPhase|intval});
                        } else {
                            var message="";
                            var errorList="";
                            if (data.errors!=undefined){
                                var errors=data.errors;
                                for (var key in errors) {
                                    if (errors.hasOwnProperty(key)) {
                                        //alert(key + " -> " + p[key]);
                                        errorList=errorList+errors[key]+". ";
                                    }
                                }
                                message=errorList;
                            } else {
                                message = data.message;
                            }
                            jQuery('.b-single-idea__new-comment-button').show();
                            alert(message);
                        }
					}
				});

				return false;
			});

      processMdlInputs();
  });
  //# sourceURL=commentsHtmlSearch
		</script>