padding-right: 2px !important;

    width: 30px;

    -moz-user-select: none;

    -webkit-user-select: none;

    border-right: 1px solid #CCC !important;

    border-left: 0px solid #CCC !important;

    border-top: 0px solid #CCC !important;

    border-bottom: none !important;

    vertical-align: middle !important;

    text-align: center;

}

table.code-difftable .lineno.new {

    text-align: right;

}

table.code-difftable .lineno.old {

    text-align: right;

}

table.code-difftable .lineno a {

    color: #aaa !important;

    font: 11px Lucida Console, Consolas, Monaco, Inconsolata, Liberation Mono, monospace !important;

    letter-spacing: -1px;

    padding-left: 10px;

    padding-right: 8px;

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

    cursor: pointer;

    display: block;

    width: 100%;

}

table.code-difftable .lineno-inline {

    background: none repeat scroll 0 0 #FFF !important;

    padding-left: 2px;

    padding-right: 2px;

    text-align: right;

    width: 30px;

    -moz-user-select: none;

    -webkit-user-select: none;

}

/** CODE **/

table.code-difftable .code {

    display: block;

    width: 100%;

}

table.code-difftable .code td {

    margin: 0;

    padding: 0;

}

table.code-difftable .code pre {

    margin: 0 0 0 12px;

    padding: 0;

    min-height: 17px;

    line-height: 17px;

    white-space: pre-wrap;

}

table.code-difftable .del .code pre:before {

    content: "-";

    color: #800;

    float: left;

    left: -1em;

    position: relative;

    width: 0;

}

table.code-difftable .add .code pre:before {

    content: "+";

    color: #080;

    float: left;

    left: -1em;

    position: relative;

    width: 0;

}

table.code-difftable .unmod .code pre:before {

    content: " ";

    float: left;

    left: -1em;

    position: relative;

    width: 0;

}

.add-bubble {

    position: relative;

    display: none;

    float: left;

    width: 0px;

    height: 0px;

    left: -8px;

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

}

    display: block;

    z-index: 1;

}

.add-bubble div {

    background: #577632;

    width: 16px;

    height: 16px;

    cursor: pointer;

    padding: 0 2px 2px 0.5px;

    border: 1px solid #577632;

    border-radius: 3px;

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

}

.add-bubble div:before {

    font-size: 14px;

    color: #ffffff;

    font-family: "kallithea";

    content: '\1f5ea';

}

.add-bubble div:hover {

    transform: scale(1.2, 1.2);

}

div.comment:target>.comment-wrapp {

    border: solid 2px #ee0 !important;

}

.lineno:target a {

    border: solid 2px #ee0 !important;

    margin: -2px;

}

.btn-image-diff-show,

.btn-image-diff-swap {

    margin: 5px;

}

.img-diff {

    max-width: 45%;

    height: auto;

    margin: 5px;

    /* http://lea.verou.me/demos/css3-patterns.html */

    background-image:

        linear-gradient(45deg, #888 25%, transparent 25%, transparent),

        linear-gradient(-45deg, #888 25%, transparent 25%, transparent),

        linear-gradient(45deg, transparent 75%, #888 75%),

        linear-gradient(-45deg, transparent 75%, #888 75%);

    background-size: 10px 10px;

    background-color: #999;

}

.img-preview {

    max-width: 100%;

    height: auto;

    margin: 5px;

}

div.comment-prev-next-links div.prev-comment,

div.comment-prev-next-links div.next-comment {

    display: inline-block;

    min-width: 150px;

    margin: 3px 6px;

}

#help_kb {

    display: none;

}

.icon-only-links i {

    color: white;

}

                </div>

                <div class="comments-number" style="float:right;padding-right:5px">

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

                </div>

            </div>

        </div>

        <div id="changeset_content">

            <div class="container">

                <div class="right">

                    <div class="changes">

                        % if (len(c.changeset.affected_files) <= c.affected_files_cut_off) or c.fulldiff:

                         <span class="removed" title="${_('Removed')}">${len(c.changeset.removed)}</span>

                         <span class="changed" title="${_('Changed')}">${len(c.changeset.changed)}</span>

                         <span class="added" title="${_('Added')}">${len(c.changeset.added)}</span>

                        % else:

                         <span class="removed" title="${_('Affected %s files') % len(c.changeset.affected_files)}">!</span>

                         <span class="changed" title="${_('Affected %s files') % len(c.changeset.affected_files)}">!</span>

                         <span class="added"   title="${_('Affected %s files') % len(c.changeset.affected_files)}">!</span>

                        % endif

                    </div>

                    <span class="logtags">

                        %if len(c.changeset.parents)>1:

                        <span class="merge">${_('Merge')}</span>

                        %endif

                        %if h.is_hg(c.db_repo_scm_instance):

                          %for book in c.changeset.bookmarks:

                          <span class="booktag" title="${_('Bookmark %s') % book}">

                             ${h.link_to(book,h.url('changeset_home',repo_name=c.repo_name,revision=c.changeset.raw_id))}

                          </span>

                          %endfor

                        %endif

                        %for tag in c.changeset.tags:

                         <span class="tagtag"  title="${_('Tag %s') % tag}">

                         ${h.link_to(tag,h.url('changeset_home',repo_name=c.repo_name,revision=c.changeset.raw_id))}</span>

                        %endfor

                        %if c.changeset.branch:

                         <span class="branchtag" title="${_('Branch %s') % c.changeset.branch}">

                         ${h.link_to(c.changeset.branch,h.url('changelog_home',repo_name=c.repo_name,branch=c.changeset.branch))}

                         </span>

                        %endif

                    </span>

                </div>

                <div class="left">

                     <div class="author">

                         <div class="gravatar">

                           ${h.gravatar(h.email_or_none(c.changeset.author), size=20)}

                         </div>

                         <span><b>${h.person(c.changeset.author,'username_and_name')}</b> - ${h.age(c.changeset.date,True)} ${h.fmt_date(c.changeset.date)}</span><br/>

                         <span>${h.email_or_none(c.changeset.author)}</span><br/>

                     </div>

                     <% rev = c.changeset.extra.get('source') %>

                     %if rev:

                     <div>

                       ${_('Grafted from:')} ${h.link_to(h.short_id(rev),h.url('changeset_home',repo_name=c.repo_name,revision=rev))}

                     </div>

                     %endif

                     <% rev = c.changeset.extra.get('transplant_source', '').encode('hex') %>

                     %if rev:

                     <div>

                       ${_('Transplanted from:')} ${h.link_to(h.short_id(rev),h.url('changeset_home',repo_name=c.repo_name,revision=rev))}

                     </div>

                     %endif

                     <div class="message">${h.urlify_commit(c.changeset.message, c.repo_name)}</div>

                </div>

            </div>

            <div class="changes_txt">

            % if c.limited_diff:

            ${ungettext('%s file changed','%s files changed',len(c.changeset.affected_files)) % (len(c.changeset.affected_files))}:

            % else:

            ${ungettext('%s file changed with %s insertions and %s deletions','%s files changed with %s insertions and %s deletions', len(c.changeset.affected_files)) % (len(c.changeset.affected_files),c.lines_added,c.lines_deleted)}:

            %endif

            </div>

            <div class="cs_files">

              %for FID, (cs1, cs2, change, path, diff, stats) in c.changes[c.changeset.raw_id].iteritems():

                  <div class="cs_${change}">

                        <div class="node">

                            <i class="icon-diff-${change}"></i>

                            <a href="#${FID}">${h.safe_unicode(path)}</a>

                        </div>

                    <div class="changes">${h.fancy_file_stats(stats)}</div>

                  </div>

              %endfor

              % if c.limited_diff:

                <h5>${_('Changeset was too big and was cut off...')} <a href="${h.url.current(fulldiff=1, **request.GET.mixed())}">${_('Show full diff anyway')}</a></h5>

              % endif

            </div>

        </div>

    </div>

    ## diff block

    <%namespace name="diff_block" file="/changeset/diff_block.html"/>

    ${diff_block.diff_block_js()}

    ${diff_block.diff_block(c.changes[c.changeset.raw_id])}

    % if c.limited_diff:

      <h4>${_('Changeset was too big and was cut off...')} <a href="${h.url.current(fulldiff=1, **request.GET.mixed())}">${_('Show full diff anyway')}</a></h4>

    % endif

    ## template for inline comment form

    ${comment.comment_inline_form()}

    ## render comments and inlines

    ${comment.generate_comments()}

    ## main comment form and it status

    ${comment.comments(h.url('changeset_comment', repo_name=c.repo_name, revision=c.changeset.raw_id),

                       h.changeset_status(c.db_repo, c.changeset.raw_id))}

    ## FORM FOR MAKING JS ACTION AS CHANGESET COMMENTS

    <script type="text/javascript">

      $(document).ready(function(){

          $('.show-inline-comments').change(function(e){

              var target = e.currentTarget;

              if(target == null){

                  target = this;

              }

              var boxid = $(target).attr('id_for');

              if(target.checked){

                  $('#{0} .inline-comments'.format(boxid)).show();

                  $('#{0} .inline-comments-button'.format(boxid)).show();

              }else{

                  $('#{0} .inline-comments'.format(boxid)).hide();

                  $('#{0} .inline-comments-button'.format(boxid)).hide();

              }

          });

          $('.add-bubble').click(function(e){

              var tr = e.currentTarget;

              if(tr == null){

                  tr = this;

              }

              injectInlineForm(tr.parentNode.parentNode);

          });

          // inject comments into they proper positions

          var file_comments = $('.inline-comment-placeholder').toArray();

          renderInlineComments(file_comments);

          linkInlineComments($('.firstlink'), $('.comment'));

          pyroutes.register('changeset_home',

                            "${h.url('changeset_home', repo_name='%(repo_name)s', revision='%(revision)s')}",

                            ['repo_name', 'revision']);

          //next links

          $('#child_link').on('click', function(e){

              //fetch via ajax what is going to be the next link, if we have

              //>1 links show them to user to choose

              if(!$('#child_link').hasClass('disabled')){

                  $.ajax({

                    url: '${h.url('changeset_children',repo_name=c.repo_name, revision=c.changeset.raw_id)}',

                    success: function(data) {

                      if(data.results.length === 0){

                          $('#child_link').addClass('disabled');

                          $('#child_link').html('${_('No revisions')}');

                      }

                      if(data.results.length === 1){

                          var commit = data.results[0];

                          window.location = pyroutes.url('changeset_home', {'repo_name': '${c.repo_name}','revision': commit.raw_id});

                      }

                      else if(data.results.length === 2){

                          $('#child_link').addClass('disabled');

                          $('#child_link').addClass('double');

                          var _html = '';

                          _html +='<a title="__title__" href="__url__">__rev__</a> <i style="color:#036185" class="icon-right-open"></i>'

                                  .replace('__rev__','r{0}:{1}'.format(data.results[0].revision, data.results[0].raw_id.substr(0,6)))

                                  .replace('__title__', data.results[0].message)

                                  .replace('__url__', pyroutes.url('changeset_home', {'repo_name': '${c.repo_name}','revision': data.results[0].raw_id}));

                          _html +='<br/>'

                          _html +='<a title="__title__" href="__url__">__rev__</a> <i style="color:#036185" class="icon-right-open"></i>'

                                  .replace('__rev__','r{0}:{1}'.format(data.results[1].revision, data.results[1].raw_id.substr(0,6)))

                                  .replace('__title__', data.results[1].message)

                                  .replace('__url__', pyroutes.url('changeset_home', {'repo_name': '${c.repo_name}','revision': data.results[1].raw_id}));

                          $('#child_link').html(_html);

                      }

                    }

                  });

              e.preventDefault();

              }

          });

          //prev links

          $('#parent_link').on('click', function(e){

              //fetch via ajax what is going to be the next link, if we have

              //>1 links show them to user to choose

              if(!$('#parent_link').hasClass('disabled')){

                  $.ajax({

                    url: '${h.url('changeset_parents',repo_name=c.repo_name, revision=c.changeset.raw_id)}',

                    success: function(data) {

                      if(data.results.length === 0){

                          $('#parent_link').addClass('disabled');

                          $('#parent_link').html('${_('No revisions')}');

                      }

                      if(data.results.length === 1){

          <div>

            ${_('Click to add the repository owner as reviewer:')}

          </div>

          <ul style="margin-top: 10px">

            %for u in [c.pull_request.other_repo.user]:

              <li>

                <a class="missing_reviewer missing_reviewer_${u.user_id}"

                  user_id="${u.user_id}"

                  fname="${u.name}"

                  lname="${u.lastname}"

                  nname="${u.username}"

                  gravatar_lnk="${h.gravatar_url(u.email, size=28)}"

                  gravatar_size="14"

                  title="Click to add reviewer to the list, then Save Changes.">${u.full_name}</a>

              </li>

            %endfor

          </ul>

        </div>

        %endif

    </div>

    <div class="form" style="clear:both">

      <div class="fields">

        %if editable:

          <div class="buttons">

            ${h.submit('pr-form-save',_('Save Changes'),class_="btn btn-small")}

            ${h.submit('pr-form-clone',_('Save as New Pull Request'),class_="btn btn-small",disabled='disabled')}

            ${h.reset('pr-form-reset',_('Cancel Changes'),class_="btn btn-small")}

          </div>

        %endif

      </div>

    </div>

  ${h.end_form()}

</div>

<div class="box">

    <div class="title">

      <div class="breadcrumbs">${_('Pull Request Content')}</div>

    </div>

    <div class="table">

          <div id="changeset_compare_view_content">

              <div style="font-size:1.1em;font-weight: bold;clear:both;padding-top:10px">

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

              </div>

              ##CS

              <div style="font-size:1.1em;font-weight: bold;clear:both;padding-top:10px">

                ${ungettext('Showing %s commit','Showing %s commits', len(c.cs_ranges)) % len(c.cs_ranges)}

              </div>

              <%include file="/compare/compare_cs.html" />

              <div style="font-size:1.1em;font-weight: bold;clear:both;padding-top:10px">

              ${_('Common ancestor')}:

              ${h.link_to(h.short_id(c.a_rev),h.url('changeset_home',repo_name=c.a_repo.repo_name,revision=c.a_rev))}

              </div>

              ## FILES

              <div style="font-size:1.1em;font-weight: bold;clear:both;padding-top:10px">

              % if c.limited_diff:

                  ${ungettext('%s file changed', '%s files changed', len(c.files)) % len(c.files)}

              % else:

                  ${ungettext('%s file changed with %s insertions and %s deletions','%s files changed with %s insertions and %s deletions', len(c.files)) % (len(c.files),c.lines_added,c.lines_deleted)}:

              %endif

              </div>

              <div class="cs_files">

                %if not c.files:

                   <span class="empty_data">${_('No files')}</span>

                %endif

                %for fid, change, f, stat in c.files:

                    <div class="cs_${change}">

                      <div class="node">

                          <i class="icon-diff-${change}"></i>

                          ${h.link_to(h.safe_unicode(f),'#' + fid)}

                      </div>

                      <div class="changes">${h.fancy_file_stats(stat)}</div>

                    </div>

                %endfor

              </div>

              % if c.limited_diff:

                <h5>${_('Changeset was too big and was cut off...')} <a href="${h.url.current(fulldiff=1, **request.GET.mixed())}">${_('Show full diff anyway')}</a></h5>

              % endif

          </div>

    </div>

    <script>

    var _USERS_AC_DATA = ${c.users_array|n};

    var _GROUPS_AC_DATA = ${c.user_groups_array|n};

    // TODO: switch this to pyroutes

    AJAX_COMMENT_URL = "${url('pullrequest_comment',repo_name=c.repo_name,pull_request_id=c.pull_request.pull_request_id)}";

    AJAX_COMMENT_DELETE_URL = "${url('pullrequest_comment_delete',repo_name=c.repo_name,comment_id='__COMMENT_ID__')}";

    pyroutes.register('pullrequest_comment', "${url('pullrequest_comment',repo_name='%(repo_name)s',pull_request_id='%(pull_request_id)s')}", ['repo_name', 'pull_request_id']);

    pyroutes.register('pullrequest_comment_delete', "${url('pullrequest_comment_delete',repo_name='%(repo_name)s',comment_id='%(comment_id)s')}", ['repo_name', 'comment_id']);

    </script>

    ## diff block

    <%namespace name="diff_block" file="/changeset/diff_block.html"/>

    ${diff_block.diff_block_js()}

    %for fid, change, f, stat in c.files:

      ${diff_block.diff_block_simple([c.changes[fid]])}

    %endfor

    % if c.limited_diff:

      <h4>${_('Changeset was too big and was cut off...')} <a href="${h.url.current(fulldiff=1, **request.GET.mixed())}">${_('Show full diff anyway')}</a></h4>

    % endif

    ## template for inline comment form

    ${comment.comment_inline_form()}

    ## render comments and inlines

    ${comment.generate_comments()}

    ## main comment form and it status

    ${comment.comments(h.url('pullrequest_comment', repo_name=c.repo_name,

                              pull_request_id=c.pull_request.pull_request_id),

                       c.current_voting_result,

                       is_pr=True, change_status=c.allowed_to_change_status)}

    <script type="text/javascript">

      $(document).ready(function(){

          PullRequestAutoComplete('user', 'reviewers_container', _USERS_AC_DATA, _GROUPS_AC_DATA);

          $('.add-bubble').click(function(e){

              var tr = e.currentTarget;

              injectInlineForm(tr.parentNode.parentNode);

          });

          var avail_jsdata = ${c.avail_jsdata|n};

          var avail_r = new BranchRenderer('avail_graph_canvas', 'updaterevs-table', 'chg_available_');

          avail_r.render(avail_jsdata,40);

          // inject comments into they proper positions

          var file_comments = $('.inline-comment-placeholder').toArray();

          renderInlineComments(file_comments);

          linkInlineComments($('.firstlink'), $('.comment'));

          $('#updaterevs input').change(function(e){

              var update = !!e.target.value;

              $('#pr-form-save').prop('disabled',update);

              $('#pr-form-clone').prop('disabled',!update);

          });

          var $org_review_members = $('#review_members').clone();

          $('#pr-form-reset').click(function(e){

              $('#pr-edit-form').hide();

              $('.pr-not-edit').show();

              $('#pr-form-save').prop('disabled',false);

              $('#pr-form-clone').prop('disabled',true);

              $('#review_members').html($org_review_members);

          });

          // hack: re-navigate to target after JS is done ... if a target is set and setting href thus won't reload

          if (window.location.hash != "") {

              window.location.href = window.location.href;

          }

          $('.missing_reviewer').click(function(){

            var $this = $(this);

            addReviewMember($this.attr('user_id'), $this.attr('fname'), $this.attr('lname'), $this.attr('nname'), $this.attr('gravatar_lnk'), $this.attr('gravatar_size'));

          });

      });

    </script>

</div>

</%def>