$comment_div.append($anchorcomment.children());

            if (f_path && line_no) {

                _comment_div_append_add($comment_div, f_path, line_no);

            } else {

                _comment_div_append_form($comment_div, f_path, line_no);

            }

        } else {

            $anchorcomment.before("<span class='bg-warning'>Comment to {0} line {1} which is outside the diff context:</span>".format(f_path || '?', line_no || '?'));

        }

    });

    linkInlineComments($('.firstlink'), $('.comment:first-child'));

}

// comment bubble was clicked - insert new tr and show form

function show_comment_form($bubble) {

    var children = $bubble.closest('tr.line').children('[id]');

    var line_td_id = children[children.length - 1].id;

    var $comment_div = _get_add_comment_div(line_td_id);

    var f_path = $bubble.closest('[data-f_path]').data('f_path');

    var parts = line_td_id.split('_');

    var line_no = parts[parts.length-1];

    comment_div_state($comment_div, f_path, line_no, true);

}

// return comment div for target_id - add it if it doesn't exist yet

function _get_add_comment_div(target_id) {

    var comments_box_id = 'comments-' + target_id;

    var $comments_box = $('#' + comments_box_id);

    if (!$comments_box.length) {

        var html = '<tr><td id="{0}" colspan="3" class="inline-comments"></td></tr>'.format(comments_box_id);

        $('#' + target_id).closest('tr').after(html);

        $comments_box = $('#' + comments_box_id);

    }

    return $comments_box;

}

// Set $comment_div state - showing or not showing form and Add button.

// An Add button is shown on non-empty forms when no form is shown.

// The form is controlled by show_form_opt - if undefined, form is only shown for general comments.

function comment_div_state($comment_div, f_path, line_no, show_form_opt) {

    var show_form = show_form_opt !== undefined ? show_form_opt : !f_path && !line_no;

    var $forms = $comment_div.children('.comment-inline-form');

    var $buttonrow = $comment_div.children('.add-button-row');

    var $comments = $comment_div.children('.comment:not(.submitting)');

    $forms.remove();

    $buttonrow.remove();

    if (show_form) {

        _comment_div_append_form($comment_div, f_path, line_no);

    } else if ($comments.length) {

        _comment_div_append_add($comment_div, f_path, line_no);

    } else {

        $comment_div.parent('tr').remove();

    }

}

// append an Add button to $comment_div and hook it up to show form

function _comment_div_append_add($comment_div, f_path, line_no) {

    var addlabel = TRANSLATION_MAP['Add Another Comment'];

    var $add = $('<div class="add-button-row"><span class="btn btn-default btn-xs add-button">{0}</span></div>'.format(addlabel));

    $comment_div.append($add);

    $add.children('.add-button').click(function(e) {

        comment_div_state($comment_div, f_path, line_no, true);

    });

}

// append a comment form to $comment_div

function _comment_div_append_form($comment_div, f_path, line_no) {

    var $form_div = $('#comment-inline-form-template').children()

        .clone()

        .addClass('comment-inline-form');

    $comment_div.append($form_div);

    var $preview = $comment_div.find("div.comment-preview");

    var $form = $comment_div.find("form");

    var $textarea = $form.find('textarea');

    $form.submit(function(e) {

        e.preventDefault();

        var text = $textarea.val();

        var review_status = $form.find('input:radio[name=changeset_status]:checked').val();

        var pr_close = $form.find('input:checkbox[name=save_close]:checked').length ? 'on' : '';

        var pr_delete = $form.find('input:checkbox[name=save_delete]:checked').length ? 'delete' : '';

        if (!text && !review_status && !pr_close && !pr_delete) {

            alert("Please provide a comment");

            return false;

        }

        if (pr_delete) {

            if (text || review_status || pr_close) {

                alert('Cannot delete pull request while making other changes');

                return false;

            }

            if (!confirm('Confirm to delete this pull request')) {

                return false;

            }

            if (comments > 0 &&

                !confirm('Confirm again to delete this pull request with {0} comments'.format(comments))) {

                return false;

            }

        }

        if (review_status) {

            var $review_status = $preview.find('.automatic-comment');

            var review_status_lbl = $("#comment-inline-form-template input.status_change_radio[value='" + review_status + "']").parent().text().strip();

            $review_status.find('.comment-status-label').text(review_status_lbl);

            $review_status.show();

        }

        $preview.find('.comment-text div').text(text);

        $preview.show();

        $textarea.val('');

        if (f_path && line_no) {

            $form.hide();

        }

        var postData = {

            'text': text,

            'f_path': f_path,

            'line': line_no,

            'changeset_status': review_status,

            'save_close': pr_close,

            'save_delete': pr_delete

        };

        var success = function(json_data) {

            if (pr_delete) {

                location = json_data['location'];

            } else {

                $comment_div.append(json_data['rendered_text']);

                comment_div_state($comment_div, f_path, line_no);

                linkInlineComments($('.firstlink'), $('.comment:first-child'));

                if ((review_status || pr_close) && !f_path && !line_no) {

                    // Page changed a lot - reload it after closing the submitted form

                    comment_div_state($comment_div, f_path, line_no, false);

                    location.reload(true);

                }

            }

        };

        var failure = function(x, s, e) {

            $preview.removeClass('submitting').addClass('failed');

            var $status = $preview.find('.comment-submission-status');

            $('<span>', {

                'title': e,

                text: _TM['Unable to post']

            }).replaceAll($status.contents());

            $('<div>', {

                'class': 'btn-group'

            }).append(

                $('<button>', {

                    'class': 'btn btn-default btn-xs',

                    text: _TM['Retry']

                }).click(function() {

                    $status.text(_TM['Submitting ...']);

                    $preview.addClass('submitting').removeClass('failed');

                    ajaxPOST(AJAX_COMMENT_URL, postData, success, failure);

                }),

                $('<button>', {

                    'class': 'btn btn-default btn-xs',

                    text: _TM['Cancel']

                }).click(function() {

                    comment_div_state($comment_div, f_path, line_no);

                })

            ).appendTo($status);

        };

        ajaxPOST(AJAX_COMMENT_URL, postData, success, failure);

    });

    // add event handler for hide/cancel buttons

    $form.find('.hide-inline-form').click(function(e) {

        comment_div_state($comment_div, f_path, line_no);

    });

    tooltip_activate();

    if ($textarea.length > 0) {

        MentionsAutoComplete($textarea);

    }

    if (f_path) {

        $textarea.focus();

    }

}

function deleteComment(comment_id) {

    var url = AJAX_COMMENT_DELETE_URL.replace('__COMMENT_ID__', comment_id);

    var postData = {};

    var success = function(o) {

        $('#comment-'+comment_id).remove();

        // Ignore that this might leave a stray Add button (or have a pending form with another comment) ...

    }

    ajaxPOST(url, postData, success);

}

                        <input type="radio" class="status_change_radio" name="changeset_status" id="${status}" value="${status}">

                        ${lbl}<i class="icon-circle changeset-status-${status}"></i>

                    </label>

                %endfor

                %if c.pull_request is not None and ( \

                    h.HasPermissionAny('hg.admin')() or h.HasRepoPermissionLevel('admin')(c.repo_name) \

                    or c.pull_request.owner_id == request.authuser.user_id):

                <div>

                  ${_('Finish pull request')}:

                  <label class="checkbox-inline">

                    <input id="save_close" type="checkbox" name="save_close" class="status_change_checkbox">

                    ${_("Close")}

                  </label>

                  <label class="checkbox-inline">

                    <input id="save_delete" type="checkbox" name="save_delete" value="delete" class="status_change_checkbox">

                    ${_("Delete")}

                  </label>

                </div>

                %endif

        </div>

      </div>

      <div class="comment-button">

        ${h.submit('save', _('Comment'), class_='btn btn-default btn-sm save-inline-form')}

        ${h.reset('hide-inline-form', _('Cancel'), class_='btn btn-default btn-sm hide-inline-form')}

      </div>

    ${h.end_form()}

  %else:

      ${h.form('')}

      <div class="clearfix">

          <div class="comment-help">

            ${_('You need to be logged in to comment.')} <a href="${h.url('login_home', came_from=request.path_qs)}">${_('Login now')}</a>

          </div>

      </div>

      <div class="comment-button">

      ${h.reset('hide-inline-form', _('Hide'), class_='btn btn-default btn-sm hide-inline-form')}

      </div>

      ${h.end_form()}

  %endif

  </div>

</div>

</%def>

## show comment count as "x comments (y inline, z general)"

<%def name="comment_count(inline_cnt, general_cnt)">

    ${'%s (%s, %s)' % (

        ungettext("%d comment", "%d comments", inline_cnt + general_cnt) % (inline_cnt + general_cnt),

        ungettext("%d inline", "%d inline", inline_cnt) % inline_cnt,

        ungettext("%d general", "%d general", general_cnt) % general_cnt

    )}

    <span class="firstlink"></span>

</%def>

## generate inline comments and the main ones

<%def name="generate_comments()">

## original location of comments ... but the ones outside diff context remains here

<div class="comments inline-comments">

  %for f_path, lines in c.inline_comments:

    %for line_no, comments in lines.iteritems():

      <div class="comments-list-chunk" data-f_path="${f_path}" data-line_no="${line_no}" data-target-id="${h.safeid(h.safe_unicode(f_path))}_${line_no}">

        %for co in comments:

            ${comment_block(co)}

        %endfor

      </div>

    %endfor

  %endfor

      <div class="comments-list-chunk" data-f_path="" data-line_no="" data-target-id="general-comments">

        %for co in c.comments:

            ${comment_block(co)}

        %endfor

      </div>

</div>

<div class="comments-number">

    ${comment_count(c.inline_cnt, len(c.comments))}

</div>

</%def>

## MAIN COMMENT FORM

<%def name="comments(change_status=True)">

<div class="inline-comments inline-comments-general

            ${'show-general-status' if change_status else ''}">

  <div id="comments-general-comments" class="">

  ## comment_div for general comments

  </div>

</div>

<script>

$(document).ready(function () {

   $(window).on('beforeunload', function(){

      var $textareas = $('.comment-inline-form textarea[name=text]');

         $textareas.val()) {

         // this message will not be displayed on all browsers

         // (e.g. some versions of Firefox), but the user will still be warned

         return 'There are uncommitted comments.';

      }

   });

});

</script>

</%def>