<%
  my $api = gitprep_api;
  
  my $display = stash('display') || '';
  my $rev = stash('rev');
  $rev = '' unless defined $rev;
  my $branches = stash('branches');

  my $logined = $api->logined;

  my $type
    = $display eq 'tree' || $display eq 'tree_top' || $display eq 'blob'
    ? 'tree' : 'commits';
  
  my $path = stash('Path');
%>

%= javascript begin
  $(document).ready(function () {
  
    // 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', '5px')
            .css('left', '0px')
          ;
        });
        revs_init = true;
      }
      else {
        $('#rev-popup')
          .css('display', 'block')
          .css('top', '5px')
          .css('left', '0px')
        ;
      }
    });

    $('#revs-tab a').click(function (e) {
      e.preventDefault();
      $(this).tab('show');
    })
    
    $('#rev-close').on('click', function () {
      $('#rev-popup').css('display', 'none');
    });
  });
% end


<div class="row">
  <%
    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;
    }
  %>
  <div class="span2">
    <button id="rev-btn" class="btn" style="font-size:13px;padding:2px 10px;margin-right:6px">
      <span class="muted"><%= $title %>:</span> <b><%= $rev_short %></b> <i class="icon-arrow-down"></i>
    </button>
  </div>
  % if ($display eq 'tree_top') {
    <div class="span10" style="text-algin:right;overflow:hidden">
      <a class="btn" style="margin-left:5px;float:right;font-size:12px;font-weight:bold;color:#333;padding:3px 6px" href="<%= url_for("/$user/$project/archive/$rev.zip") %>">
        Download ZIP
      </a>
      <div class="input-append" style="float:right">
        <div class="btn-group" data-toggle="buttons-radio">
          <button class="btn" id="btn_http" style="margin-left:5px;padding:3px 6px;border-top-right-radius:0px; border-bottom-right-radius:0px"><%= $self->req->is_secure ? 'HTTPS' : 'HTTP' %></button>
          % if ($logined) {
            <button class="btn" id="btn_ssh" style="padding:3px 7px;border-radius:0">SSH</button>
          % }
        </div>
        <input id="rep_url" type="text" style="width:550px;border-radius:0;padding:3px 7px;border-top-right-radius:3px;border-bottom-right-radius:3px">
      </div>
    </div>
  % } elsif ($display eq 'tree' || $display eq 'blob') {
    %= include '/include/page_path', Path => $path;
  % }
</div>

<div style="position:relative">
  <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>
</div>