<%
  my $user = param('user');
  my $project = param('project');
  my $branch = param('rev1');
  my $rev2_abs = param('rev2_abs');
  my ($remote_user, $remote_project, $remote_branch) = split /\//, $rev2_abs, 3;
  
  my $commits = app->git->get_commits(app->rep_info($user, $project), $branch, 100);
  my $remote_commits = app->git->get_commits(
    app->rep_info($remote_user, $remote_project),
    $remote_branch,
    100
  );
  
  my $merged_commits_h = {};
  for my $commit (@$commits) {
    my $id = $commit->{id};
    $merged_commits_h->{$id} ||= {};
    $merged_commits_h->{$id}{age} = $commit->{age};
    $merged_commits_h->{$id}{age_string_date_local} = $commit->{age_string_date_local};
    $merged_commits_h->{$id}{title} = $commit->{title};
    $merged_commits_h->{$id}{type} = 'local';
  }
  for my $commit (@$remote_commits) {
    my $id = $commit->{id};
    if ($merged_commits_h->{$id}) {
      $merged_commits_h->{$id}{type} = 'same';
    }
    else {
      $merged_commits_h->{$id} ||= {};
      $merged_commits_h->{$id}{age} = $commit->{age};
      $merged_commits_h->{$id}{age_string_date_local} = $commit->{age_string_date_local};
      $merged_commits_h->{$id}{title} = $commit->{title};
      $merged_commits_h->{$id}{type} = 'remote';
    }
  }
  
  my $merged_commits = [];
  for my $id (
    sort { $merged_commits_h->{$b}{age} <=> $merged_commits_h->{$a}{age}}
    keys %$merged_commits_h)
  {
    my $commit = {%{$merged_commits_h->{$id}}};
    $commit->{id} = $id;
    push @$merged_commits, $commit;
  }

  layout 'common', title => "Network Graph $user/$project/$branch...$rev2_abs";
%>

  %= include 'include/header';
  
  %= javascript begin
    $('document').ready(function () {
      // Scroll to right
      $('#graph').scrollLeft(1000);
    });
  % end
  
  <div class="container">
    <h3 class="topic1">Graph</h3>
    <div style="margin-bottom:20px">Compare 100 commits.</div>
    <div style="margin-bottom:10px">
      <span style="color:blue;font-size:22px"><%= "$user / $project / $branch" %></span>
    </div>
    <div id="graph" class="graph-diff">
      <table>
        % for my $type (qw/local same remote/) {
          <tr style="height:40px">
            % for (my $i = 0; $i < @$merged_commits; $i++) {
              % my $commit = $merged_commits->[$i];
              % my $color
              %   = $type eq 'local' ? 'blue'
              %   : $type eq 'same' ? 'gray'
              %   : 'green';

              % if ($commit->{type} eq $type) {
                <td>
                  <a style="color:<%= $color %>" href="<%= url_for("/$user/$project/commit/$commit->{id}") %>" title="<%= "$commit->{title}($commit->{age_string_date_local})" %>">●</a>
                </td>
              % } else {
                <td></td>
              % }
              <td style="color:#ddd">-</td>
            % }
          </tr>
        % }
      </table>
    </div>
    
    <div class="graph-document">
      <div style="margin-bottom:30px">
        <span style="color:green;font-size:22px"><%= "$remote_user / $remote_project / $remote_branch" %></span>
      </div>
      <hr>
      <div style="margin-bottom:15px">
        <h4 class="topic1">Merging via command line</h4>
        you can perform a manual merge on the command line.
      </div>

      <b>Step 1:</b> If you don't add user remote repository, add it.
      <pre>
git remote add <%= $remote_user %> <%= url_for("/$remote_user/$remote_project.git")->to_abs %>
      </pre>

      <b>Step 2:</b> From your project repository, bring in the changes and test.
      <pre class="well" style="background:#333333;color:white;padding:20px 20px 0px 20px;">
git remote update
git fetch
git checkout -b <%= "$remote_user-$remote_branch" %> <%= "$remote_user/$remote_branch" %>
git merge <%= $branch %>
      </pre>
      
      <b>Step 3:</b> Merge the changes and update on GitHub.
      <pre class="well" style="background:#333333;color:white;padding:20px 20px 0px 20px;">
git checkout <%= $branch %>
git merge <%= "$remote_user-$remote_branch" %>
git push origin <%= $branch %>
      </pre>
    </div>
  </div>
  
  %= include '/include/footer';