</li>

        <li ${is_current('showpullrequest')} data-context="showpullrequest">

          <a href="${h.url('pullrequest_show_all',repo_name=c.repo_name)}" title="${_('Show Pull Requests for %s') % c.repo_name}"> <i class="icon-git-pull-request"></i> ${_('Pull Requests')}

            %if c.repository_pull_requests:

              <span class="badge">${c.repository_pull_requests}</span>

            %endif

          </a>

        </li>

      </ul>

  </div>

  <script type="text/javascript">

    $(document).ready(function() {

      var bcache = {};

      $("#branch_switcher").select2({

          placeholder: '<i class="icon-exchange"></i> ${_('Switch To')} <span class="caret"></span>',

          dropdownAutoWidth: true,

          sortResults: prefixFirstSort,

          formatResult: function(obj) {

              return obj.text;

          },

          formatSelection: function(obj) {

              return obj.text;

          },

          formatNoMatches: function(term) {

              return "${_('No matches found')}";

          },

          escapeMarkup: function(m) {

              // don't escape our custom placeholder

              if (m.substr(0, 29) == '<i class="icon-exchange"></i>') {

                  return m;

              }

              return Select2.util.escapeMarkup(m);

          },

          containerCssClass: "repo-switcher",

          dropdownCssClass: "repo-switcher-dropdown",

          query: function(query) {

              var key = 'cache';

              var cached = bcache[key];

              if (cached) {

                  var data = {

                      results: []

                  };

                  // filter results

                  $.each(cached.results, function() {

                      var section = this.text;

                      var children = [];

                      $.each(this.children, function() {

                          if (query.term.length === 0 || this.text.toUpperCase().indexOf(query.term.toUpperCase()) >= 0) {

                              children.push({

                                  'id': this.id,

                                  'text': this.text,

                                  'type': this.type,

                                  'obj': this.obj

                              });

                          }

                      });

                      if (children.length !== 0) {

                          data.results.push({

                              'text': section,

                              'children': children

                          });

                      }

                  });

                  query.callback(data);

              } else {

                  $.ajax({

                      url: pyroutes.url('repo_refs_data', {

                          'repo_name': '${c.repo_name}'

                      }),

                      data: {},

                      dataType: 'json',

                      type: 'GET',

                      success: function(data) {

                          bcache[key] = data;

                          query.callback(data);

                      }

                  });

              }

          }

      });

      $("#branch_switcher").on('select2-selecting', function(e) {

          e.preventDefault();

          var context = $('#context-bar .current').data('context');

          if (context == 'files') {

              window.location = pyroutes.url('files_home', {

                  'repo_name': REPO_NAME,

                  'revision': e.choice.id,

                  'f_path': '',

                  'at': e.choice.text

              });

          } else if (context == 'changelog') {

              if (e.choice.type == 'tag' || e.choice.type == 'book') {

              }

              $("#branch_filter").val(e.choice.text).change();

          } else {

              window.location = pyroutes.url('changelog_home', {

                  'repo_name': '${c.repo_name}',

                  'branch': e.choice.text

              });

          }

      });

    });

  </script>

  <!--- END CONTEXT BAR -->

</%def>

<%def name="menu(current=None)">

  <%

  def is_current(selected):

      if selected == current:

          return h.literal('class="current"')

  %>

  <ul id="quick" class="horizontal-list">

    <!-- repo switcher -->

    <li ${is_current('repositories')}>

      <input id="repo_switcher" name="repo_switcher" type="hidden">

    </li>

    ##ROOT MENU

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

      <li ${is_current('journal')}>

        <a class="menu_link" title="${_('Show recent activity')}"  href="${h.url('journal')}">

          <i class="icon-book"></i> ${_('Journal')}

        </a>

      </li>

    %else:

      <li ${is_current('journal')}>

        <a class="menu_link" title="${_('Public journal')}"  href="${h.url('public_journal')}">

          <i class="icon-book"></i> ${_('Public journal')}

        </a>

      </li>

    %endif

      <li ${is_current('gists')} class="dropdown">

        <a class="menu_link dropdown-toggle" data-toggle="dropdown" role="button" title="${_('Show public gists')}"  href="${h.url('gists')}">

          <i class="icon-clippy"></i> ${_('Gists')} <span class="caret"></span>

        </a>

          <ul class="dropdown-menu" role="menu">

            <li><a href="${h.url('new_gist', public=1)}"><i class="icon-paste"></i> ${_('Create New Gist')}</a></li>

            <li><a href="${h.url('gists')}"><i class="icon-globe"></i> ${_('All Public Gists')}</a></li>

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

              <li><a href="${h.url('gists', public=1)}"><i class="icon-user"></i> ${_('My Public Gists')}</a></li>

              <li><a href="${h.url('gists', private=1)}"><i class="icon-keyhole-circled"></i> ${_('My Private Gists')}</a></li>

            %endif

          </ul>

      </li>

    <li ${is_current('search')}>

        <a class="menu_link" title="${_('Search in repositories')}"  href="${h.url('search')}">

          <i class="icon-search"></i> ${_('Search')}

        </a>

    </li>

    % if h.HasPermissionAll('hg.admin')('access admin main page'):

      <li ${is_current('admin')} class="dropdown">

        <a class="menu_link dropdown-toggle" data-toggle="dropdown" role="button" title="${_('Admin')}" href="${h.url('admin_home')}">

          <i class="icon-gear"></i> ${_('Admin')} <span class="caret"></span>

        </a>

        ${admin_menu()}

      </li>

    % elif c.authuser.repositories_admin or c.authuser.repository_groups_admin or c.authuser.user_groups_admin:

    <li ${is_current('admin')} class="dropdown">

        <a class="menu_link dropdown-toggle" data-toggle="dropdown" role="button" title="${_('Admin')}">

          <i class="icon-gear"></i> ${_('Admin')}

        </a>

        ${admin_menu_simple(c.authuser.repositories_admin,

                            c.authuser.repository_groups_admin,

                            c.authuser.user_groups_admin or h.HasPermissionAny('hg.usergroup.create.true')())}

    </li>

    % endif

    <li ${is_current('my_pullrequests')}>

      <a class="menu_link" title="${_('My Pull Requests')}" href="${h.url('my_pullrequests')}">

        <i class="icon-git-pull-request"></i> ${_('My Pull Requests')}

        %if c.my_pr_count != 0:

          <span class="badge">${c.my_pr_count}</span>

        %endif

      </a>

    </li>

    ## USER MENU

    <li class="dropdown">

      <a class="menu_link dropdown-toggle" data-toggle="dropdown" role="button" id="quick_login_link"

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

          href="${h.url('notifications')}"

        %endif

      >

          ${h.gravatar_div(c.authuser.email, size=20, div_class="icon", div_style="display:inline")}

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

            <span class="menu_link_user">${c.authuser.username}</span>

                </div>

                <div class="textarea text-area editor">

                    ${h.textarea('pullrequest_desc',size=30,placeholder=_('Write a short description on this pull request'))}

                </div>

            </div>

            <div class="field">

                <div class="label label-textarea">

                    <label for="pullrequest_desc">${_('Changeset flow')}:</label>

                </div>

                <div class="input">

                    ##ORG

                    <div>

                        <div>

                            <div style="padding:5px 3px 3px 3px;">

                            <b>${_('Origin repository')}:</b> <span id="org_repo_desc">${c.db_repo.description.split('\n')[0]}</span>

                            </div>

                            <div>

                            ${h.select('org_repo','',c.cs_repos,class_='refs')}:${h.select('org_ref',c.default_cs_ref,c.cs_refs,class_='refs')}

                            </div>

                            <div style="padding:5px 3px 3px 3px;">

                            <b>${_('Revision')}:</b> <span id="org_rev_span">-</span>

                            </div>

                        </div>

                    </div>

                    ##OTHER, most Probably the PARENT OF THIS FORK

                    <div style="border-top: 1px solid #EEE; margin: 5px 0px 0px 0px">

                        <div>

                            ## filled with JS

                            <div style="padding:5px 3px 3px 3px;">

                            <b>${_('Destination repository')}:</b> <span id="other_repo_desc">${c.a_repo.description.split('\n')[0]}</span>

                            </div>

                            <div>

                            ${h.select('other_repo',c.a_repo.repo_name,c.a_repos,class_='refs')}:${h.select('other_ref',c.default_a_ref,c.a_refs,class_='refs')}

                            </div>

                            <div style="padding:5px 3px 3px 3px;">

                            <b>${_('Revision')}:</b> <span id="other_rev_span">-</span>

                            </div>

                        </div>

                    </div>

                    <div style="clear:both"></div>

                </div>

            </div>

            <div class="field">

                <div class="buttons">

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

                    ${h.reset('reset',_('Reset'),class_="btn")}

               </div>

            </div>

        </div>

        <div style="clear:both;padding: 0 0 30px 0;"></div>

        <h4>${_('Changesets')}</h4>

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

           ## overview pulled by ajax

           <div style="float:left" id="pull_request_overview"></div>

        </div>

        <div style="clear:both;"></div>

    </div>

    ${h.end_form()}

</div>

<script type="text/javascript" src="${h.url('/js/graph.js', ver=c.kallithea_version)}"></script>

<script type="text/javascript">

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

  var pendingajax = undefined;

  var otherrepoChanged = function(){

      var $other_ref = $('#other_ref');

      $other_ref.prop('disabled', true);

      var repo_name = $('#other_repo').val();

      if (pendingajax) {

          pendingajax.abort();

          pendingajax = undefined;

      }

      pendingajax = ajaxGET(pyroutes.url('pullrequest_repo_info', {"repo_name": repo_name}),

          function(data){

              pendingajax = undefined;

              $('#other_repo_desc').html(data.description);

              // replace options of other_ref with the ones for the current other_repo

              $other_ref.empty();

              for(var i = 0; i < data.refs.length; i++)

              {

                var $optgroup = $('<optgroup/>').prop('label', data.refs[i][1]);

                var options = data.refs[i][0];

                var length = options.length;

                for(var j = 0; j < length; j++)

                {

                }

                $other_ref.append($optgroup);

              }

              $other_ref.val(data.selected_ref);

              // re-populate the select2 thingy

              $("#other_ref").select2({

                  dropdownAutoWidth: true

              });

              $other_ref.prop('disabled', false);

              loadPreview();

          });

  };

  var loadPreview = function(){

      //url template

      var url = "${h.url('compare_url',

                         repo_name='__other_repo__',

                         org_ref_type='rev',

                         org_ref_name='__other_ref_name__',

                         other_repo='__org_repo__',

                         other_ref_type='rev',

                         other_ref_name='__org_ref_name__',

                         as_form=True,

                         merge=True,

                         )}";

      var org_repo = $('#pull_request_form #org_repo').val();

      var org_ref = $('#pull_request_form #org_ref').val().split(':');

      ## TODO: make nice link like link_to_ref() do

      $('#org_rev_span').html(org_ref[2].substr(0,12));

      var other_repo = $('#pull_request_form #other_repo').val();

      var other_ref = $('#pull_request_form #other_ref').val().split(':');

      $('#other_rev_span').html(other_ref[2].substr(0,12));

      var rev_data = {

          '__org_repo__': org_repo,

          '__org_ref_name__': org_ref[2],

          '__other_repo__': other_repo,

          '__other_ref_name__': other_ref[2]

      }; // gather the org/other ref and repo here

      for (k in rev_data){

          url = url.replace(k,rev_data[k]);

      }

      if (pendingajax) {

          pendingajax.abort();

          pendingajax = undefined;

      }

      pendingajax = asynchtml(url, $('#pull_request_overview'), function(o){

          pendingajax = undefined;

          var jsdata = eval('('+$('#jsdata').html()+')'); // TODO: just get json

          var r = new BranchRenderer('graph_canvas', 'graph_content_pr', 'chg_');

          r.render(jsdata,100);

      });

  }

  $(document).ready(function(){

      $("#org_repo").select2({

          dropdownAutoWidth: true

      });

      ## (org_repo can't change)

      $("#org_ref").select2({

          dropdownAutoWidth: true,

          sortResults: branchSort

      });

      $("#org_ref").on("change", function(e){

          loadPreview();

      });

      $("#other_repo").select2({

          dropdownAutoWidth: true

      });

      $("#other_repo").on("change", function(e){

          otherrepoChanged();

      });

      $("#other_ref").select2({

          dropdownAutoWidth: true,

          sortResults: branchSort

      });

      $("#other_ref").on("change", function(e){

          loadPreview();

      });

      //lazy load overview after 0.5s

      setTimeout(loadPreview, 500);

  });

</script>

</%def>