<%
  my $display = stash('display') || '';
  my $rev = stash('rev');
  $rev = '' unless defined $rev;
  my $branches = stash('branches');
  my $branches_count = app->git->branches_count($user, $project);
  my $default_branch_name = app->manager->default_branch($user, $project);
  my $tags_count = app->git->tags_count($user, $project);
%>

%= javascript begin
  $(document).ready(function () {
  
    % if ($display eq 'files' || $display eq 'commits') {
      % my $type = $display eq 'files' ? 'tree' : 'commits';
      
      // Switch branches and tags
      var revs_init = false;
      $('#rev-btn').on('click', function () {
        
        if (!revs_init) {
          $.get('<%= url_for("/$user/$project/api/revs") %>', function (result) {
            var branch_names = result.branch_names;
            var tag_names = result.tag_names;
            var style = 'style="border-top-left-radius:0px;border-top-right-radius:0px;"';
            
            if (branch_names.length === 0) {
              $('#branch-names-list').append(
                '<li><a ' + style + ' href="#">No branches</a></li>'
              );
            }
            else {
              for (var i = 0; i < branch_names.length; i++) {
                var branch_name = branch_names[i];
                $('#branch-names-list').append(
                  '<li><a ' + style + ' href="<%= url_for("/$user/$project/$type/") %>' + branch_name + '">' + branch_name + '</a></li>'
                );
              }
            }
            
            if (tag_names.length === 0) {
              $('#tag-names-list').append(
                '<li><a ' + style + ' href="#">No tags</a></li>'
              );
            }
            else {
              for (var i = 0; i < tag_names.length; i++) {
                var tag_name = tag_names[i];
                $('#tag-names-list').append(
                  '<li><a ' + style + ' href="<%= url_for("/$user/$project/$type/") %>' + tag_name + '">' + tag_name + '</a></li>'
                );
              }
            }
            $('#rev-popup')
              .css('display', 'block')
              .css('top', '40px')
              .css('left', '0px')
            ;
          });
          revs_init = true;
        }
        else {
          $('#rev-popup')
            .css('display', 'block')
            .css('top', '40px')
            .css('left', '0px')
          ;
        }
      });

      $('#revs-tab a').click(function (e) {
        e.preventDefault();
        $(this).tab('show');
      })
      
      $('#rev-close').on('click', function () {
        $('#rev-popup').css('display', 'none');
      });
    % } elsif ($display eq 'branches') {
      $('#rev-btn').on('click', function () {
        $('#rev-popup')
          .css('display', 'block')
          .css('top', '40px')
          .css('left', '0px')
        ;
        $('#rev-close').on('click', function () {
          $('#rev-popup').css('display', 'none');
        });
      });
    % }
  });
% end



<div style="position:relative">
  <ul class="nav nav-tabs" style="margin-bottom:20px">
    % if ($display eq 'files' || $display eq 'commits' || $display eq 'branches') {
      <%
        my $title;
        my $rev_short;
        if (defined $rev && length $rev == 40) {
          $title = 'tree';
          $rev_short = substr($rev, 0, 10);
        }
        else {
          $title = 'branch';
          $rev_short = $rev;
        }
      %>
      <li style="padding-right:10px">
        <button id="rev-btn" class="btn" style="font-size:13px;padding:2px 10px;margin-top:5px;margin-right:6px">
          <i class="icon-share-alt"></i><span class="muted"><%= $title %>:</span> <b><%= $rev_short %></b>
        </button>
      </li>
    % }
    <li class="<%= $display eq 'files' ? 'active' : '' %>">
      % if ($display eq 'tags' || $rev eq $default_branch_name) {
        <a href="<%= url_for("/$user/$project") %>">Files</a>
      % } else {
        <a href="<%= url_for("/$user/$project/tree/$rev") %>">Files</a>
      % }
    </li>
    <li class="<%= $display eq 'commits' ? 'active' : '' %>">
      % if (length $rev) {
        <a href="<%= url_for("/$user/$project/commits/$rev") %>">Commits</a>
      % } else {
        <a href="<%= url_for("/$user/$project/commits/$default_branch_name") %>">Commits</a>
      % }
    </li>
    <li class="<%= $display eq 'branches' ? 'active' : '' %>">
      <a href="<%= url_for("/$user/$project/branches") %>">
        Branches
        <span class="badge"><%= $branches_count %></span>
      </a>
    </li>
    <li class="<%= $display eq 'tags' ? 'active' : '' %>">
      <a href="<%= url_for("/$user/$project/tags") %>">
        Tags
        <span class="badge"><%= $tags_count > 999 ? '999+' : $tags_count %></span>
      </a>
    </li>
  </ul>
  
  % if ($display eq 'files' || $display eq 'commits') {
    <div id="rev-popup" style="display:none;width:330px;position:absolute">
      <div class="radius-top border-gray" style="background:#E6E6FA;padding:10px">
        <div class="row">
          <div class="span3">
            <b>Switch branches/tags</b>
          </div>
          <div class="text-right">
            <i id="rev-close" class="icon-remove-circle"></i>
          </div>
        </div>
      </div>
      <ul class="nav nav-tabs" id="revs-tab" style="background:#F5F5F5;margin-bottom:0">
        <li class="active"><a href="#branches">Branches</a></li>
        <li><a href="#tags">Tags</a></li>
      </ul>
      <div class="tab-content">
        <div class="tab-pane active" id="branches" style="background:white;max-height:300px;overflow:auto;margin-top:0">
          <ul id="branch-names-list" class="nav nav-tabs nav-stacked">
          </ul>
        </div>
        <div class="tab-pane" id="tags" style="background:white;max-height:300px;overflow:auto;margin-top:0">
          <ul id="tag-names-list" class="nav nav-tabs nav-stacked">
          </ul>
        </div>
      </div>
    </div>
  % } else {
    <div id="rev-popup" style="display:none;width:330px;position:absolute">
      <div class="radius-top border-gray" style="background:#E6E6FA;padding:10px">
        <div class="row">
          <div class="span3">
            <b>Switch branches</b>
          </div>
          <div class="text-right">
            <i id="rev-close" class="icon-remove-circle"></i>
          </div>
        </div>
      </div>
      <ul class="nav nav-tabs" style="background:#F5F5F5;margin-bottom:0">
        <li class="active"><a href="#branches">Branches</a></li>
      </ul>
      <ul id="rev-names-list" class="nav nav-tabs nav-stacked" style="background:white">
        % for my $branch (@$branches) {
          <li>
            <a style="border-top-left-radius:0px;border-top-right-radius:0px;" href="<%= url_for("/$user/$project/branches/$branch->{name}") %>">
              <%= $branch->{name} %>
            </a>
          </li>
        % }
      </ul>
    </div>
  % }
  
</div>