if (!$forms.length) {

            _comment_div_append_form($comment_div, f_path, line_no);

        }

    } else {

        $forms.remove();

    }

    $buttons.remove();

    if ($comments.length && !show_form) {

        _comment_div_append_add($comment_div, f_path, line_no);

    }

}

// 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-comment"><span class="btn btn-mini">{0}</span></div>'.format(addlabel));

    $comment_div.append($add);

    $add.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) {

    $comment_div.append($form_div);

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

    $form.submit(function(e) {

        e.preventDefault();

        var text = $('#text_'+line_no).val();

        if (!text){

            return;

        }

        $form.find('.submitting-overlay').show();

        var success = function(json_data) {

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

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

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

        };

        var postData = {

            'text': text,

            'f_path': f_path,

            'line': line_no

        };

        ajaxPOST(AJAX_COMMENT_URL, postData, success);

          %endif

      </div>

      <div class="text">

        %if co.status_change:

           <div class="rst-block automatic-comment">

             <p>

               <span title="${_('Changeset status')}" class="changeset-status-lbl">${_("Status change")}: ${co.status_change[0].status_lbl}</span>

               <span class="changeset-status-ico"><i class="icon-circle changeset-status-${co.status_change[0].status}"></i></span>

             </p>

           </div>

        %endif

        %if co.text:

          ${h.rst_w_mentions(co.text)|n}

        %endif

      </div>

    </div>

  </div>

</%def>

## expanded with .format(f_path, line_no)

## TODO: don't assume line_no is globally unique ...

<%def name="comment_inline_form()">

<div id='comment-inline-form-template' style="display:none">

  %if c.authuser.username != 'default':

    ${h.form('#', class_='inline-form')}

      <div id="edit-container_{1}" class="clearfix">

        <div class="comment-help">${_('Commenting on line {1}.')}

          ${(_('Comments parsed using %s syntax with %s support.') % (

                 ('<a href="%s">RST</a>' % h.url('rst_help')),

                   ('<span style="color:#577632" class="tooltip" title="%s">@mention</span>' % _('Use @username inside this text to notify another user'))

               )

            )|n

           }

        </div>

        <div class="mentions-container" id="mentions_container_{1}"></div>

        <textarea id="text_{1}" name="text" class="comment-block-ta yui-ac-input"></textarea>

      </div>

      <div id="preview-container_{1}" class="clearfix" style="display:none">

        <div class="comment-help">

            ${_('Comment preview')}

        </div>

        <div id="preview-box_{1}" class="preview-box"></div>

      </div>

      <div class="comment-button">

        <div class="submitting-overlay">${_('Submitting ...')}</div>

        <input type="hidden" name="f_path" value="{0}">

        <input type="hidden" name="line" value="{1}">

        <div id="preview-container" class="clearfix" style="display:none">

            <div class="comment-help">

                ${_('Comment preview')}

            </div>

            <div id="preview-box" class="preview-box"></div>

        </div>

        <div class="comment-button">

            ${h.submit('save', _('Comment'), class_="btn")}

            <div id="preview-btn" class="preview-btn btn">${_('Preview')}</div>

            <div id="edit-btn" class="edit-btn btn" style="display:none">${_('Edit')}</div>

        </div>

      ${h.end_form()}

    </div>

    %endif

</div>

<script>

$(document).ready(function () {

   MentionsAutoComplete($('#text'), $('#mentions_container'), _USERS_AC_DATA, _GROUPS_AC_DATA);

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

         // 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.';

      }

   });

   $('form#main_form').submit(function(){

      // if no open inline forms, disable the beforeunload check - it would

      // fail in the check for the textarea we are about to submit

      if(!$('.form-open').size()){

          $(window).off('beforeunload');

      }

   });

   $('#preview-btn').click(function(){

       var _text = $('#text').val();

       if(!_text){

           return;

       }

       var post_data = {'text': _text};

       $('#preview-box').addClass('unloaded');

       $('#preview-box').html(_TM['Loading ...']);

       $('#edit-container').hide();

       $('#edit-btn').show();