font-weight: bold;

    color: #666;

    font-size: 16px;

}

/** comment form **/

.status-block {

    min-height: 80px;

    clear: both

}

div.comment-form {

    margin-top: 20px;

}

.comment-form strong {

    display: block;

    margin-bottom: 15px;

}

.comment-form textarea {

    width: 100%;

    height: 100px;

    font-family: 'Monaco', 'Courier', 'Courier New', monospace;

}

form.comment-form {

    margin-top: 10px;

    margin-left: 10px;

}

.comment-inline-form .comment-block-ta,

.comment-form .comment-block-ta {

    border: 1px solid #ccc;

    border-radius: 3px;

    box-sizing: border-box;

}

.comment-form-submit {

    margin-top: 5px;

    margin-left: 525px;

}

.file-comments {

    display: none;

}

.comment-form .comment {

    margin-left: 10px;

}

.comment-form .comment-help {

    padding: 5px 5px 5px 5px;

    color: #666;

}

.comment-form .comment-help .preview-btn,

.comment-form .comment-help .edit-btn {

    float: right;

    margin: -6px 0px 0px 0px;

}

.comment-form .preview-box.unloaded,

.comment-inline-form .preview-box.unloaded {

    height: 50px;

    text-align: center;

    padding: 20px;

    background-color: #fafafa;

}

.comment-form .comment-button {

    padding-top: 5px;

}

.add-another-button {

    margin-left: 10px;

    margin-top: 10px;

    margin-bottom: 10px;

}

.comment .buttons {

    float: right;

    margin: -1px 0px 0px 0px;

}

.show-inline-comments {

    position: relative;

    top: 1px

}

/** comment inline form **/

.comment-inline-form {

    margin: 4px;

}

    display: none;

    font-size: 16px;

    opacity: 0.5;

}

.comment-inline-form .clearfix,

.comment-form .clearfix {

    background: #EEE;

    -webkit-border-radius: 4px;

    border-radius: 4px;

    padding: 5px;

    margin: 0px;

}

div.comment-inline-form {

    padding: 4px 0px 6px 0px;

}

.comment-inline-form strong {

    display: block;

    margin-bottom: 15px;

}

.comment-inline-form textarea {

    width: 100%;

    height: 100px;

    font-family: 'Monaco', 'Courier', 'Courier New', monospace;

}

form.comment-inline-form {

    margin-top: 10px;

    margin-left: 10px;

}

.comment-inline-form-submit {

    margin-top: 5px;

    margin-left: 525px;

}

.file-comments {

    display: none;

}

.comment-inline-form .comment {

    margin-left: 10px;

}

.comment-inline-form .comment-help {

    padding: 5px 5px 5px 5px;

    color: #666;

}

.comment-inline-form .comment-help .preview-btn,

.comment-inline-form .comment-help .edit-btn {

    float: right;

    margin: -6px 0px 0px 0px;

}

.comment-inline-form .comment-button {

    padding-top: 5px;

}

/** comment inline **/

.inline-comments {

    padding: 10px 20px;

}

.inline-comments div.rst-block {

    clear: both;

    overflow: hidden;

    margin: 0;

    padding: 0 20px 0px;

}

.inline-comments .comment {

    border: 1px solid #ddd;

    -webkit-border-radius: 4px;

    border-radius: 4px;

    margin: 3px 3px 5px 5px;

    background-color: #FAFAFA;

}

.inline-comments .add-comment {

    padding: 2px 4px 8px 5px;

}

.inline-comments .comment-wrapp {

    padding: 1px;

}

.inline-comments .comment .meta {

    background: #f8f8f8;

    padding: 4px;

    border-bottom: 1px solid #ddd;

    height: 20px;

}

.inline-comments .comment .meta img {

    vertical-align: middle;

}

.inline-comments .comment .meta .user {

    var nodes = nodes;

    var $q_filter_field = $('#' + target);

    var F = YAHOO.namespace(target);

    $q_filter_field.keyup(function(e){

        clearTimeout(F.filterTimeout);

        F.filterTimeout = setTimeout(F.updateFilter, 600);

    });

    F.filterTimeout = null;

    F.updateFilter  = function() {

        // Reset timeout

        F.filterTimeout = null;

        var obsolete = [];

        var req = $q_filter_field.val().toLowerCase();

        var l = nodes.length;

        var i;

        var showing = 0;

        for (i=0; i<l; i++ ){

            var n = nodes[i];

            var target_element = display_element(n)

            if(req && n.innerHTML.toLowerCase().indexOf(req) == -1){

                $(target_element).hide();

            }

            else{

                $(target_element).show();

                showing += 1;

            }

        }

        $('#repo_count').html(showing); /* FIXME: don't hardcode */

    }

};

/* return jQuery expression with a tr with body in 3rd column and class cls and id named after the body */

var _table_tr = function(cls, body){

    // like: <div class="comment" id="comment-8" line="o92"><div class="comment-wrapp">...

    // except new inlines which are different ...

    var comment_id = ($(body).attr('id') || 'comment-new').split('comment-')[1];

    var tr_id = 'comment-tr-{0}'.format(comment_id);

    return $(('<tr id="{0}" class="{1}">'+

                  '<td class="lineno-inline new-inline"></td>'+

                  '<td class="lineno-inline old-inline"></td>'+

                  '<td>{2}</td>'+

                 '</tr>').format(tr_id, cls, body));

};

/** return jQuery expression with new inline form based on template **/

var _createInlineForm = function(parent_tr, f_path, line) {

    var $tmpl = $('#comment-inline-form-template').html().format(f_path, line);

    var $form = _table_tr('comment-form-inline', $tmpl)

    // create event for hide button

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

        var newtr = e.currentTarget.parentNode.parentNode.parentNode.parentNode.parentNode;

        if($(newtr).next().hasClass('inline-comments-button')){

            $(newtr).next().show();

        }

        $(newtr).remove();

        $(parent_tr).removeClass('form-open');

        $(parent_tr).removeClass('hl-comment');

    });

    return $form

};

/**

 * Inject inline comment for an given TR. This tr should always be a .line .

 * The form will be inject after any comments.

 */

var injectInlineForm = function(tr){

    $tr = $(tr);

    if(!$tr.hasClass('line')){

        return

    }

    var submit_url = AJAX_COMMENT_URL;

    var $td = $tr.find('.code');

    if($tr.hasClass('form-open') || $tr.hasClass('context') || $td.hasClass('no-comment')){

        return

    }

    $tr.addClass('form-open hl-comment');

    var $node = $tr.parent().parent().parent().find('.full_f_path');

    var f_path = $node.attr('path');

    var lineno = _getLineNo(tr);

    var $form = _createInlineForm(tr, f_path, lineno, submit_url);

    var $parent = $tr;

    while ($parent.next().hasClass('inline-comments')){

        var $parent = $parent.next();

    }

    $form.insertAfter($parent);

    var $inlineform = $form.find('.inline-form');

    $form.submit(function(e){

        e.preventDefault();

        if(lineno === undefined){

            alert('missing line !');

            return

        }

        if(f_path === undefined){

            alert('missing file path !');

            return

        }

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

        if(text == ""){

            return

        }

        var success = function(o){

            $tr.removeClass('form-open');

            $form.remove();

            var json_data = JSON.parse(o.responseText);

            _renderInlineComment(json_data);

        };

        var postData = {

                'text': text,

                'f_path': f_path,

                'line': lineno

        };

        ajaxPOST(submit_url, postData, success);

    });

    $('#preview-btn_'+lineno).click(function(e){

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

        if(!text){

            return

        }

        $('#preview-box_'+lineno).addClass('unloaded');

        $('#preview-box_'+lineno).html(_TM['Loading ...']);

        $('#edit-container_'+lineno).hide();

        $('#preview-container_'+lineno).show();

        var url = pyroutes.url('changeset_comment_preview', {'repo_name': REPO_NAME});

        var post_data = {'text': text};

        ajaxPOST(url, post_data, function(o){

            $('#preview-box_'+lineno).html(o.responseText);

            $('#preview-box_'+lineno).removeClass('unloaded');

        })

    })

    $('#edit-btn_'+lineno).click(function(e){

        $('#edit-container_'+lineno).show();

        $('#preview-container_'+lineno).hide();

    })

    setTimeout(function(){

        // callbacks

        tooltip_activate();

        MentionsAutoComplete('text_'+lineno, 'mentions_container_'+lineno,

                             _USERS_AC_DATA, _GROUPS_AC_DATA);

        $('#text_'+lineno).focus();

    },10)

};

var deleteComment = function(comment_id){

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

    var postData = {'_method':'delete'};

    var success = function(o){

        var $deleted = $('#comment-tr-'+comment_id);

        var $prev = $deleted.prev('tr');

        $deleted.remove();

        _placeAddButton($prev);

    }

    ajaxPOST(url,postData,success);

}

var _getLineNo = function(tr) {

    var line;

    var o = $(tr).children()[0].id.split('_');

    var n = $(tr).children()[1].id.split('_');

    if (n.length >= 2) {

        line = n[n.length-1];

    } else if (o.length >= 2) {

        line = o[o.length-1];

    }

    return line

};

var _placeAddButton = function($line_tr){

    var $tr = $line_tr;

    while ($tr.next().hasClass('inline-comments')){

        $tr.find('.add-comment').remove();

        $tr = $tr.next();

    }

    $tr.find('.add-comment').remove();

    var label = TRANSLATION_MAP['Add another comment'];

    var $html_el = $('<div class="add-comment"><span class="btn btn-mini">{0}</span></div>'.format(label));

    $html_el.click(function(e) {

        injectInlineForm($line_tr);

    });

    $tr.find('.comment').after($html_el);

};

/**

 * Places the inline comment into the changeset block in proper line position

 */

var _placeInline = function(target_id, lineno, html){

    var $td = $("#{0}_{1}".format(target_id, lineno));

    // check if there are comments already !

    var $line_tr = $td.parent(); // the tr

    var $after_tr = $line_tr;

## -*- coding: utf-8 -*-

## usage:

## <%namespace name="comment" file="/changeset/changeset_file_comment.html"/>

## ${comment.comment_block(co)}

##

<%def name="comment_block(co)">

  <div class="comment" id="comment-${co.comment_id}" line="${co.line_no}">

    <div class="comment-wrapp">

      <div class="meta">

        <div style="float:left"> <img src="${h.gravatar_url(co.author.email, 20)}" /> </div>

          <div class="user">

              ${co.author.username}

          </div>

          <div class="date">

              ${h.age(co.modified_at)}

          </div>

       <div style="float:left;padding:4px 0px 0px 5px">

        <span class="">

         %if co.pull_request:

            <a href="${h.url('pullrequest_show',repo_name=co.pull_request.other_repo.repo_name,pull_request_id=co.pull_request.pull_request_id)}">

            %if co.status_change:

              ${_('Vote on pull request #%s') % co.pull_request.pull_request_id}:

            %else:

              ${_('Comment on pull request #%s') % co.pull_request.pull_request_id}

            %endif

            </a>

         %else:

            %if co.status_change:

              ${_('Status change on changeset')}:

            %else:

              ${_('Comment on changeset')}

            %endif

         %endif

        </span>

       </div>

        %if co.status_change:

           <div  style="float:left" class="changeset-status-container">

             <div style="float:left;padding:10px 2px 0px 2px"></div>

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

             <div class="changeset-status-ico"><img src="${h.url(str('/images/icons/flag_status_%s.png' % co.status_change[0].status))}" /></div>

           </div>

        %endif

      <a class="permalink" href="#comment-${co.comment_id}">&para;</a>

      %if h.HasPermissionAny('hg.admin')() or h.HasRepoPermissionAny('repository.admin')(c.repo_name) or co.author.user_id == c.authuser.user_id:

          <div onClick="deleteComment(${co.comment_id})" class="buttons delete-comment btn btn-mini">${_('Delete')}</div>

      %endif

      </div>

      <div class="text">

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

      </div>

    </div>

  </div>

</%def>

<%def name="comment_inline_form()">

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

  <div class="comment-inline-form ac">

  %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 send notification to this Kallithea user'))

               )

            )|n

           }

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

          </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 id="edit-btn_{1}" class="edit-btn btn btn-mini">${_('Edit')}</div>

          </div>

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

      </div>

      <div class="comment-button">

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

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

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

      ${h.reset('hide-inline-form', _('Cancel'), class_='btn btn-small 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=h.url.current())}">${_('Login now')}</a>

          </div>

      </div>

      <div class="comment-button">

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

      </div>

      ${h.end_form()}

  %endif

  </div>

</div>

</%def>

## generates inlines taken from c.comments var

<%def name="inlines()">

    <div class="comments-number">${ungettext("%d comment", "%d comments", len(c.comments)) % len(c.comments)} ${ungettext("(%d inline)", "(%d inline)", c.inline_cnt) % c.inline_cnt}</div>

    %for path, lines in c.inline_comments:

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

            <div style="display:none" class="inline-comment-placeholder" path="${path}" target_id="${h.safeid(h.safe_unicode(path))}">

            %for co in comments:

                ${comment_block(co)}

            %endfor

            </div>

        %endfor

    %endfor

</%def>

## generate inline comments and the main ones

<%def name="generate_comments(include_pr=False)">

<div class="comments">

    <div id="inline-comments-container">

    ## generate inlines for this changeset

     ${inlines()}

    </div>

    %for co in c.comments:

        <div id="comment-tr-${co.comment_id}">

          ## only render comments that are not from pull request, or from

          ## pull request and a status change

          %if not co.pull_request or (co.pull_request and co.status_change) or include_pr:

          ${comment_block(co)}

          %endif

        </div>

    %endfor

</div>

</%def>

## MAIN COMMENT FORM

<%def name="comments(post_url, cur_status, is_pr=False, change_status=True)">

<div class="comments">

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

    <div class="comment-form ac">

        ${h.form(post_url)}

        <div id="edit-container" class="clearfix">

            <div class="comment-help">

                ${(_('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 send notification to this Kallithea user')))|n}

              %if change_status:

                | <a id="show_changeset_link" onClick="change_status_show();">

                  %if is_pr:

                    ${_('Vote for pull request status')}

                  %else:

                    ${_('Change changeset status')}

                  %endif

                  </a>

                  <input id="show_changeset_status_box" type="checkbox" name="change_changeset_status" style="display: none;" />

              %endif

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

            </div>

            %if change_status:

            <div id="status_block_container" class="status-block" style="display:none">

                %for status,lbl in c.changeset_statuses:

                    <div class="">

                        <img src="${h.url('/images/icons/flag_status_%s.png' % status)}" />

                        <input ${'checked="checked"' if status == cur_status else ''}" type="radio" class="status_change_radio" name="changeset_status" id="${status}" value="${status}">

                        <label for="${status}">${lbl}</label>

                    </div>

                %endfor

                %if is_pr and change_status:

                <input id="save_close" type="checkbox" name="save_close" disabled="${'1' if cur_status in ['not_reviewed','under_review'] else ''}">

                <label id="save_close_label" for="save_close" class="${'disabled' if cur_status in ['not_reviewed','under_review'] else ''}">${_("Close (when approved or rejected)")}</label>

                %endif

            </div>