}

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: 0 20px;

}

.inline-comments div.rst-block {

    clear: both;

    overflow: hidden;

    margin: 0;

    padding: 0 20px 0px;

}

.inline-comments .comment .comment-wrapp {

    max-width: 978px;

    border: 1px solid #ddd;

    border-radius: 4px;

    margin: 3px 3px 5px 5px;

    background-color: #FAFAFA;

}

.inline-comments .add-comment {

    padding: 2px 4px 8px 5px;

}

.inline-comments .comment .meta {

    background: #f8f8f8;

    padding: 4px;

    border-bottom: 1px solid #ddd;

    min-height: 20px;

    overflow: auto;

}

.inline-comments .comment .meta img {

    vertical-align: middle;

}

.inline-comments .comment .meta .user {

    font-weight: bold;

    float: left;

    padding: 3px;

}

.inline-comments .comment .meta .date {

    float: left;

    padding: 3px;

}

.inline-comments .comment .text {

    background-color: #FAFAFA;

}

.inline-comments .comments-number {

    padding: 0px 0px 10px 0px;

    font-weight: bold;

    color: #666;

    font-size: 16px;

}

.inline-comments-button .add-comment {

    margin: 2px 0px 8px 5px !important

}

.notification-paginator {

    padding: 0px 0px 4px 16px;

}

#context-pages .pull-request span,

.menu_link_notifications {

    padding: 4px 4px !important;

    text-align: center;

    color: #888 !important;

    background-color: #DEDEDE !important;

    border-radius: 4px !important;

}

#context-pages .forks span,

.menu_link_notifications {

    padding: 4px 4px !important;

    text-align: center;

    color: #888 !important;

    background-color: #DEDEDE !important;

    border-radius: 4px !important;

}

.notification-header {

    padding-top: 6px;

}

.notification-header .desc {

    font-size: 16px;

    height: 24px;

    float: left

}

.notification-list .container.unread {

    background: none repeat scroll 0 0 rgba(255, 255, 180, 0.6);

}

.notification-header .gravatar {

    background: none repeat scroll 0 0 transparent;

    padding: 0px 0px 0px 8px;

}

.notification-list .container .notification-header .desc {

    font-weight: bold;

    font-size: 17px;

}

.notification-table {

    border: 1px solid #ccc;

    border-radius: 6px 6px 6px 6px;

    clear: both;

    margin: 0px 20px 0px 20px;

}

.notification-header .delete-notifications {

    float: right;

    padding-top: 8px;

    cursor: pointer;

}

.notification-header .read-notifications {

    float: right;

    padding-top: 8px;

    cursor: pointer;

}

.notification-subject {

    clear: both;

    border-bottom: 1px solid #eee;

    padding: 5px 0px 5px 38px;

}

.notification-body {

    clear: both;

    margin: 34px 2px 2px 8px

}

/****

PULL REQUESTS

*****/

.pullrequests_section_head {

    padding: 10px 10px 10px 0px;

    margin: 0 20px;

    font-size: 16px;

    font-weight: bold;

}

div.pr-details-title.closed {

    color: #555;

    background: #eee;

}

div.pr-details-title {

    font-size: 1.6em;

    padding: 5px 0px 5px 10px;

}

div.pr {

    margin: 0px 20px;

    padding: 4px 4px;

}

div.pr-desc {

    margin: 0px 20px;

}

      <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}">

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

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

      </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>

## 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()">

<div class="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-number">

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

  </div>

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

        %for co in c.comments:

            ${comment_block(co)}

        %endfor

      </div>

</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, id="main_form")}

        <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 notify another user.')))|n}

            </div>

            <div class="mentions-container" id="mentions_container"></div>

            ${h.textarea('text', class_="comment-block-ta")}

            %if change_status:

              <div id="status_block_container" class="status-block">

                %if is_pr:

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

                %else:

                  ${_('Set changeset status')}:

                %endif

                <input type="radio" class="status_change_radio" name="changeset_status" id="changeset_status_unchanged" value="" checked="checked" />

                <label for="changeset_status_unchanged">

                  ${_('No change')}

                </label>

                %for status,lbl in c.changeset_statuses:

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

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

                    </span>

                %endfor

                %if is_pr and ( \

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

                    or c.pull_request.author.user_id == c.authuser.user_id):

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

                  <label id="save_close_label" for="save_close">${_("Close")}</label>

                %endif

              </div>

            %endif

        </div>

        <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(){

      if($('.comment-inline-form textarea[name=text]').size() ||

         $('textarea#text').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.';

      }

   });

   $('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();

       $('#preview-container').show();

       $('#preview-btn').hide();

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

       ajaxPOST(url,post_data,function(html){

           $('#preview-box').html(html);

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

       });

   });

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

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

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

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

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

   });

});

</script>

</%def>