@(branch: String,
  treeId: String,
  repository: gitbucket.core.service.RepositoryService.RepositoryInfo
  )(implicit context: gitbucket.core.controller.Context)
@import gitbucket.core.view.helpers
@gitbucket.core.html.main(s"${repository.owner}/${repository.name}", Some(repository)) {
  @gitbucket.core.html.menu("files", repository, Some(branch)){

<div>
  <div class="find-input">
    <span class="bold"><a href="@helpers.url(repository)/tree/@helpers.encodeRefName(branch)">@repository.name</a></span>
    /
    <input type="text" name="query" autocomplete="off" spellcheck="false" autofocus id="tree-finder-field" />
  </div>
</div>

<div class="alert alert-info">
  <button type="button" class="close" data-dismiss="alert">&times;</button>
  You've activated the <em>file finder</em>
  by pressing <code>t</code>.
  Start typing to filter the file list. Use <code>↑</code> and
  <code>↓</code> to navigate,
  <code>enter</code> to view files.
</div>
<table id="tree-finder-results" class="table table-file-list" data-url="@helpers.url(repository)/tree-list/@treeId">
  <tbody class="tree-browser-result-template">
    <tr class="tree-browser-result">
      <td class="icon"><span class="octicon octicon-chevron-right"></span></td>
      <td class="icon"><i class="octicon octicon-file-text"></i></td>
      <td>
        <a href="@helpers.url(repository)/blob/@helpers.encodeRefName(branch)"></a>
      </td>
    </tr>
  </tbody>
  <tbody class="no-results" style="display:none">
    <tr><th colspan="3">No matching files</th><tr>
  </tbody>
</table>
<script>
$(function(){
  var paths = [];
  var template = $('.tree-browser-result-template tr').clone();
  var res = $('.tree-browser-result-template');
  var cursor = 0;
  var pathBase = template.find("a").attr("href");
  var preKeyword;
  $.ajax({
    url:$('#tree-finder-results').data('url'),
    cache: true,
    dataType: 'json',
    success:function(data){
      paths = data.paths;
      filter();
    }
  });
  var timer;
  $("#tree-finder-field").keydown(function(e){
    var target = $(this);
    if(e.keyCode == 40){ // DOWN
      e.preventDefault();
      e.stopPropagation();
      changeCursor(cursor + 1);
    }else if(e.keyCode == 38){ // UP
      e.preventDefault();
      e.stopPropagation();
      changeCursor(cursor - 1);
    }else if(e.keyCode == 13){ // ENTER
      e.preventDefault();
      e.stopPropagation();
      target = $(".tree-browser-result.navigation-focus a");
      if(target[0]){
        target[0].click();
      }
    }else if(e.keyCode == 27){ // ESC
      e.preventDefault();
      e.stopPropagation();
      history.back();
    }else{
      clearTimeout(timer);
      timer=setTimeout(filter,300);
    }
  });
  function changeCursor(newPos){
    if(!$(".tree-browser-result")[newPos]){
      return $(".tree-browser-result.navigation-focus");
    }
    $(".tree-browser-result.navigation-focus").removeClass("navigation-focus");
    cursor=newPos;
    scrollIntoView($($(".tree-browser-result")[cursor]).addClass("navigation-focus"));
  }
  function filter(){
    var v = $('#tree-finder-field').val();
    if(v == preKeyword || paths.length == 0){
      return;
    }
    scrollIntoView('#tree-finder-field');
    preKeyword = v;
    cursor = 0;
    var p = string_score_sort(v, paths, 50);
    res.html("");
    if(p.length == 0){
      $(".no-results").show();
      return;
    }else{
      $(".no-results").hide();
      for(var i = 0; i < p.length; i++){
        var row = template.clone();
        row.find("a").attr("href", pathBase + "/" + p[i].string).html(string_score_highlight(p[i], '<b>'));
        if(cursor == i){
          row.addClass("navigation-focus");
        }
        row.appendTo(res);
      }
    }
  }
});
</script>
  }
}