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

  my $logined = $api->logined;

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

  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;
  }
  
%>

%= 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');
    });
    
    
    // Repository URL buttons
    var http_rep_url = '<%= url_for("$user/$project.git")->to_abs %>';
    
    var logined = <%= $logined ? 'true' : 'false' %>;
    var ssh_rep_url = '<%= $ssh_rep_url %>';
    
    // Click HTTP button
    $('#btn_http').on('click', function () {
      $('#rep_url').val(http_rep_url);
      $('#btn_http').addClass('btn-info');
      $('#btn_ssh').removeClass('btn-info');
    });

    // Click SSH button
    $('#btn_ssh').on('click', function () {
      $('#rep_url').val(ssh_rep_url);
      $('#btn_http').removeClass('btn-info');
      $('#btn_ssh').addClass('btn-info');
    });

    // Initialize
    if (logined) {
      $('#btn_ssh').trigger('click');
    }
    else {
      $('#btn_http').trigger('click');
    }
  });
% end

<div class="branch-select-container">
  <div class="branch-select-left-container <%= $display eq 'tree' || $display eq 'blob' ? 'branch-select-left-container-page-path' : '' %>">
    <button id="rev-btn" class="btn btn-small">
      <span><%= $title %>:</span> <b><%= $rev_short %></b> <i class="icon-arrow-down"></i>
    </button>
    % if ($display eq 'tree' || $display eq 'blob') {
        %= include '/include/page_path', Path => $path;
    % }
  </div>
    % if ($display eq 'tree_top') {
      <div class="branch-select-right-container">
        <ul class="git-url-container">
          % if ($logined) {
            <li>
              <button class="btn btn-small btn-success" id="btn_ssh">SSH</button>
            </li>
          % }
          <li>
            <button class="btn btn-small <%= !$logined ? 'btn-success' : '' %>" id="btn_http"><%= $self->req->is_secure ? 'HTTPS' : 'HTTP' %></button>
          </li>
          <li>
            <input id="rep_url" type="text">
          </li>
          <li>
            <div class="donwload-zip">
              <a title="Download ZIP" class="btn btn-small" href="<%= url_for("/$user/$project/archive/$rev.zip") %>">
                ZIP
              </a>
              <a title="Download tar.gz" class="btn btn-small" href="<%= url_for("/$user/$project/archive/$rev.tar.gz") %>">
                tar.gz
              </a>
            </div>
          </li>
        </ul>
      </div>
    % }
</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 style="overflow:hidden">
        <div style="float:left;width:90%">
          <b>Switch branches/tags</b>
        </div>
        <div style="width:10%;float:right;text-align: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>