#set ($isReply = $req.getParameter("replyToComment"))
#set ($queryString = $req.getQueryString())
### Using an array placeholder since accessing the split results directly does not work.
#set($queryStringArray = [])
#foreach($q in $queryString.split("&replyToComment"))
    #set($result = $queryStringArray.add($q))
#end

### BEGIN: CODE COPIED FROM CONFLUENCE 6.4.0 SOURCE ###
### confluence-core/confluence-webapp/src/main/webapp/decorators/components/comments.vmd ###
### Classes and IDs have been added the "mobile" prefix. ###
#macro (mobileCommentThread $comment)
    #set ($page = $comment.container)
    <div class="mobile-comment-outer mobile-comment-outer-$comment.id">
        <div class="mobile-comment-avatar">
            <div class="avatar">
                #userLogoBlock($comment.creator)
            </div>
        </div>
        <div class="mobile-comment-body">
            <h3 class="mobile-comment-author-name">
                <span>$action.getText("comment.author.byline", ["#userLink ($comment.creator)"])#if ($page.type == "blogpost" && $comment.creator == $page.creator) <span class="author-lozenge">$i18n.getText('comment.author.lozenge')</span>#end</span>
            </h3>
            <div class="mobile-comment-content mobile-content-container">
                #if ($comment.isTopInlineComment)
                    <blockquote><span class="highlight-content">$action.getXHtmlComments().get($comment)</span></blockquote>
                #else
                    $action.getXHtmlComments().get($comment)
                #end
            </div>
            <ul class="mobile-comment-actions" data-comment-id="$comment.id">
                <li class="fuzzy-time"><a href="$comment.urlPath">$friendlyDateFormatterHelper.format($comment.lastModificationDate)</a></li>
                #if (!$comment.isInlineComment || $comment.isTopInlineComment)
                    <li class="mobile-action-reply-comment" reply-disabled="true">
                    #if ($queryString)
                        <a href="$req.getRequestURI()?$queryStringArray.get(0)&replyToComment=$comment.id&focusedComment=$comment.id#comment-$comment.id" id="reply-comment-$comment.id">
                    #else
                        <a href="$req.contextPath?replyToComment=$comment.id&focusedComment=$comment.id#comment-$comment.id" id="reply-comment-$comment.id">
                    #end
                    <span>$action.getText("comment.reply")</span></a></li>
                #end
            </ul>
        </div>
    </div>

    #if ( $action.threadComments && $action.replyToComment == $comment.id && $permissionHelper.canComment($action.authenticatedUser, $comment.container) && $action.isPrintableVersion()==false )
    <ol class="mobile-comment-threads">
        <li class="mobile-comment-thread">
            <div class="mobile-comment reply">
                ### END: CODE COPIED FROM CONFLUENCE 6.4.0 SOURCE ###
                ### Custom rendering of displayCommentForm macro ###
                <form id="mobile-comment-reply-textform" name="textcommentform" method="post" action="" onsubmit="ThemePress.Mobile.addComment(this, $comment.id);" class="aui">
                    <div id="mobile-comments-text-editor">
                        <textarea name="textContent" placeholder="$brikitCore.text('com.brikit.themepress.mobile.comments.placeholder')"></textarea>
                        <div class="aui-toolbar">
                            <ul class="mobile-toolbar-group">
                                <li class="mobile-toolbar-item">
                                    <button class="toolbar-trigger button" id="text-comment-save" name="confirm" value="$brikitCore.text('com.brikit.themepress.mobile.comments.button.save')" type="submit">$brikitCore.text('com.brikit.themepress.mobile.comments.button.save')</button>
                                    #if ($queryString)
                                        <button class="toolbar-trigger button" id="text-comment-cancel" name="cancel" value="$brikitCore.text('com.brikit.themepress.mobile.comments.button.cancel')" onclick="window.location = '$req.getRequestURI()?$queryStringArray.get(0)'; return false;">$brikitCore.text('com.brikit.themepress.mobile.comments.button.cancel')</button>
                                    #else
                                        <button class="toolbar-trigger button" id="text-comment-cancel" name="cancel" value="$brikitCore.text('com.brikit.themepress.mobile.comments.button.cancel')" onclick="window.location = window.location.pathname; return false;">$brikitCore.text('com.brikit.themepress.mobile.comments.button.cancel')</button>
                                    #end
                                </li>
                                <li>
                                    <button class="button subtle add-mention-button" onclick="ThemePress.Mobile.showUserDelegate(this);" type="button">$brikitCore.text('com.brikit.themepress.mobile.comments.button.mention')</button>
                                </li>
                            </ul>
                        </div>
                    </div>
                </form>
                
                ### BEGIN: CODE COPIED FROM CONFLUENCE 6.4.0 SOURCE ###
            </div>
        </li>
    </ol>
    #end

    #if ($threadComments)
        #if ($comment.children.size() > 0)
        <ol class="mobile-comment-threads">
            #foreach ($childComment in $comment.children)
                #mobileCommentThread($childComment)
            #end
        </ol>
        #end
    #end
#end
### END: CODE COPIED FROM CONFLUENCE 6.4.0 SOURCE ###

<div class="mobile-comments">
    ### BEGIN: CODE COPIED FROM CONFLUENCE 6.4.0 SOURCE ###
    ### confluence-core/confluence-webapp/src/main/webapp/decorators/components/comments.vmd ###
    ### Classes and IDs have been added the "mobile" prefix. ###
    #if ($page.pageLevelComments.size() > 0)
        #if ($threadComments)
            #set ($topLevelComments = $page.topLevelComments)
        #else
            #set ($topLevelComments = $pageLevelComments)
        #end
    <ol class="mobile-comment-list nested" id="mobile-page-comments">
        #foreach ($comment in $topLevelComments)
            #mobileCommentThread($comment)
        #end
    </ol>
    #end
    <div>
        #if ($permissionHelper.canComment($remoteUser, $page) && !$isReply)
        ### END: CODE COPIED FROM CONFLUENCE 6.4.0 SOURCE ###
        ### Custom rendering of displayCommentForm macro ###
        <form id="mobile-comment-textform" name="textcommentform" method="post" action="" onsubmit="ThemePress.Mobile.addComment(this);" class="aui">
            <div id="mobile-comments-text-editor">
                <textarea name="textContent" placeholder="$brikitCore.text('com.brikit.themepress.mobile.comments.placeholder')"></textarea>
                <div class="aui-toolbar">
                    <ul class="mobile-toolbar-group">
                        <li class="mobile-toolbar-item">
                            <!-- Save button -->
                            <button class="toolbar-trigger button" id="text-comment-save" name="confirm" value="$brikitCore.text('com.brikit.themepress.mobile.comments.button.save')" type="submit">$brikitCore.text('com.brikit.themepress.mobile.comments.button.save')</button>
                            #if ($queryString)
                                <button class="toolbar-trigger button" id="text-comment-cancel" name="cancel" value="$brikitCore.text('com.brikit.themepress.mobile.comments.button.cancel')" onclick="window.location = '$req.getRequestURI()?$queryStringArray.get(0)'; return false;">$brikitCore.text('com.brikit.themepress.mobile.comments.button.cancel')</button>
                            #else
                                <button class="toolbar-trigger button" id="text-comment-cancel" name="cancel" value="$brikitCore.text('com.brikit.themepress.mobile.comments.button.cancel')" onclick="window.location = window.location.pathname; return false;">$brikitCore.text('com.brikit.themepress.mobile.comments.button.cancel')</button>
                            #end
                        </li>
                        <li>
                            <button class="button subtle add-mention-button" onclick="ThemePress.Mobile.showUserDelegate(this);" type="button">$brikitCore.text('com.brikit.themepress.mobile.comments.button.mention')</button>
                        </li>
                    </ul>
                </div>
            </div>
        </form>
        <!-- @ mention button. When pressed the @ mention selector panel is displayed. -->
        
        ### BEGIN: CODE COPIED FROM CONFLUENCE 6.4.0 SOURCE ###
        #end
    </div>
    ### END: CODE COPIED FROM CONFLUENCE 6.4.0 SOURCE ###
</div>

<!-- User selector -->
<div id="mobile-user-delegate-selector" class="field-group brikit-expander-content">
    <input id="mobile-user-delegate-field" class="autocomplete-user-or-group text" type="text" name="userDelegate"
           placeholder="$brikitCore.text('com.brikit.themepress.mobile.comments.mention.user.help')"
           data-none-message="$brikitCore.text('com.brikit.themepress.mobile.comments.mention.no.results.found')" autocomplete="off" onclick=""/>
</div>

<script>
    <!-- Need to find more information about why on iOS none of these events will work unless they are part of this file. -->
    $("#mobile-user-delegate-selector")
        .initializeExpander()
        .on("click mousedown", ".aui-dd-parent a", ThemePress.Mobile.changeUserDelegateDeferred)
        .on("focusout touchcancel", "#mobile-user-delegate-field", ThemePress.Mobile.cancelUserDelegate);

    // Resize the edit labels dialog.
    AJS.bind("show.dialog", ThemePress.Mobile.resizeLabelsEditor);
</script>