## -*- coding: utf-8 -*-
<%inherit file="/base/base.html"/>

<%block name="title">
    %if c.compare_home:
        ${_('%s Compare') % c.repo_name}
    %else:
        ${_('%s Compare') % c.repo_name} - ${'%s@%s' % (c.a_repo.repo_name, c.a_ref_name)} &gt; ${'%s@%s' % (c.cs_repo.repo_name, c.cs_ref_name)}
    %endif
</%block>

<%def name="breadcrumbs_links()">
  ${_('Compare Revisions')}
</%def>

<%block name="header_menu">
    ${self.menu('repositories')}
</%block>

<%def name="main()">
${self.repo_context_bar('changelog')}
<div class="panel panel-primary">
    <!-- box / title -->
    <div class="panel-heading clearfix">
        ${self.breadcrumbs()}
    </div>
    <div class="table">
        <div id="body" class="diffblock">
            <div class="compare-revision-selector">
                ## divs are "inline-block" and cannot have whitespace between them.
                <div>
                    ${h.hidden('compare_org')}
                </div><div>
                    <i class="icon-right"></i>
                </div><div>
                    ${h.hidden('compare_other')}
                </div><div>
                    %if not c.compare_home:
                        <a class="btn btn-default btn-sm" href="${c.swap_url}"><i class="icon-arrows-cw"></i> ${_('Swap')}</a>
                    %endif
                    <div id="compare_revs" class="btn btn-default btn-sm"><i class="icon-git-compare"></i> ${_('Compare Revisions')}</div>
                </div>
            </div>
        </div>

    %if c.compare_home:
        <div id="changeset_compare_view_content">
         <div class="text-muted" style="font-size: 18px">${_('Compare revisions, branches, bookmarks, or tags.')}</div>
        </div>
    %else:
        <div id="changeset_compare_view_content">
                ##CS
                <div style="font-size:1.1em;font-weight: bold;clear:both;padding-top:10px">${ungettext('Showing %s commit','Showing %s commits', len(c.cs_ranges)) % len(c.cs_ranges)}</div>
                <%include file="compare_cs.html" />

                ## FILES
                <div style="font-size:1.1em;font-weight: bold;clear:both;padding-top:10px">

                % if c.limited_diff:
                    ${ungettext('%s file changed', '%s files changed', len(c.file_diff_data)) % len(c.file_diff_data)}:
                % else:
                    ${ungettext('%s file changed with %s insertions and %s deletions','%s files changed with %s insertions and %s deletions', len(c.file_diff_data)) % (len(c.file_diff_data),c.lines_added,c.lines_deleted)}:
                %endif

                ${c.ignorews_url(request.GET)}
                ${c.context_url(request.GET)}

                </div>
                <div class="cs_files">
                  %if not c.file_diff_data:
                     <span class="empty_data">${_('No files')}</span>
                  %endif
                  %for fid, url_fid, op, a_path, path, diff, stats in c.file_diff_data:
                    <div class="cs_${op}">
                      <div class="node">
                          <i class="icon-diff-${op}"></i>
                          ${h.link_to(h.safe_unicode(path), '#%s' % fid)}
                      </div>
                      <div class="changes">${h.fancy_file_stats(stats)}</div>
                    </div>
                  %endfor
                  %if c.limited_diff:
                    <h5>${_('Changeset was too big and was cut off...')} <a href="${h.url.current(fulldiff=1, **request.GET.mixed())}">${_('Show full diff anyway')}</a></h5>
                  %endif
                </div>
         </div>

        ## diff block
        <%namespace name="diff_block" file="/changeset/diff_block.html"/>
        ${diff_block.diff_block_js()}
        ${diff_block.diff_block(c.a_repo.repo_name, c.a_ref_type, c.a_ref_name, c.a_rev,
                                c.cs_repo.repo_name, c.cs_ref_type, c.cs_ref_name, c.cs_rev, c.file_diff_data)}
        % if c.limited_diff:
          <h4>${_('Changeset was too big and was cut off...')} <a href="${h.url.current(fulldiff=1, **request.GET.mixed())}">${_('Show full diff')}</a></h4>
        % endif
    %endif
    </div>

</div>
    <script type="text/javascript">

   $(document).ready(function(){
    var cache = {};

    function make_revision_dropdown(css_selector, placeholder, repo_name, cache_key) {
      $(css_selector).select2({
        placeholder: placeholder,
        formatSelection: function(obj){
            return '{0}@{1}'.format(repo_name, obj.text);
        },
        dropdownAutoWidth: true,
        maxResults: 50,
        query: function(query){
          var key = cache_key;
          var cached = cache[key] ;
          if(cached) {
            var data = {results: []};
            var queryLower = query.term.toLowerCase();
            //filter results
            $.each(cached.results, function(){
                var section = this.text;
                var children = [];
                $.each(this.children, function(){
                    if(children.length < 50 ?
                       ((queryLower.length == 0) || (this.text.toLowerCase().indexOf(queryLower) >= 0)) :
                       ((queryLower.length != 0) && (this.text.toLowerCase().indexOf(queryLower) == 0))) {
                        children.push(this);
                    }
                });
                children = branchSort(children, undefined, query)
                data.results.push({'text': section, 'children': children});
            });
            //push the typed in changeset
            data.results.push({'text':_TM['Specify changeset'],
                               'children': [{'id': query.term, 'text': query.term, 'type': 'rev'}]});
            query.callback(data);
          }else{
              $.ajax({
                url: pyroutes.url('repo_refs_data', {'repo_name': repo_name}),
                data: {},
                dataType: 'json',
                type: 'GET',
                success: function(data) {
                  cache[key] = data;
                  query.callback(data);
                }
              });
          }
        }
    });
    }

    make_revision_dropdown("#compare_org",   "${'%s@%s' % (c.a_repo.repo_name, c.a_ref_name)}",   "${c.a_repo.repo_name}",  'cache');
    make_revision_dropdown("#compare_other", "${'%s@%s' % (c.cs_repo.repo_name, c.cs_ref_name)}", "${c.cs_repo.repo_name}", 'cache2');

    var values_changed = function() {
        var values = $('#compare_org').select2('data') && $('#compare_other').select2('data');
        if (values) {
             $('#compare_revs').removeClass("disabled");
             // TODO: the swap button ... if any
        } else {
             $('#compare_revs').addClass("disabled");
             // TODO: the swap button ... if any
        }
    }
    values_changed();
    $('#compare_org').change(values_changed);
    $('#compare_other').change(values_changed);
    $('#compare_revs').on('click', function(e){
        var org = $('#compare_org').select2('data');
        var other = $('#compare_other').select2('data');
        if (!org || !other) {
            return;
        }

        var compare_url = "${h.url('compare_url',repo_name=c.repo_name,org_ref_type='__other_ref_type__',org_ref_name='__org__',other_ref_type='__org_ref_type__',other_ref_name='__other__', other_repo=c.cs_repo.repo_name)}";
        var u = compare_url.replace('__other_ref_type__',org.type)
                           .replace('__org__',org.text)
                           .replace('__org_ref_type__',other.type)
                           .replace('__other__',other.text);
        window.location = u;
    });
   });
    </script>
</%def>