<i class="icon-diff-${change}"></i>

                             ${h.link_to(h.safe_unicode(f), '#' + fid)}

                         </div>

                         <div class="changes">${h.fancy_file_stats(stat)}</div>

                     </div>

                  %endfor

                </div>

                % 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')}</a></h5>

                % endif

         </div>

        ## diff block

        <%namespace name="diff_block" file="/changeset/diff_block.html"/>

        ${diff_block.diff_block_js()}

        %for fid, change, f, stat in c.files:

          ${diff_block.diff_block_simple([c.changes[fid]])}

        %endfor

        % 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,

        query: function(query){

          var key = cache_key;

          var cached = cache[key] ;

          if(cached) {

            var data = {results: []};

            //filter results

            $.each(cached.results, function(){

                var section = this.text;

                var children = [];

                $.each(this.children, function(){

                    if(query.term.length == 0 || this.text.toUpperCase().indexOf(query.term.toUpperCase()) >= 0 ){

                    }

                });

                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)}";