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

  my $logined = $api->logined;
%>

%= 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', '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');
      });
    % } elsif ($display eq 'branches') {
      $('#rev-btn').on('click', function () {
        $('#rev-popup')
          .css('display', 'block')
          .css('top', '5px')
          .css('left', '0px')
        ;
        $('#rev-close').on('click', function () {
          $('#rev-popup').css('display', 'none');
        });
      });
    % }
  });
% end


<div class="row">
  % 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;
      }
    %>
    <div class="span2">
      <button id="rev-btn" class="btn" style="font-size:13px;padding:2px 10px;margin-right:6px">
        <i class="icon-share-alt"></i><span class="muted"><%= $title %>:</span> <b><%= $rev_short %></b>
      </button>
    </div>
  % }
  % if ($project_page) {
    <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>
  % }
</div>

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