## -*- coding: utf-8 -*-

<%def name="diff_block(a_repo_name, a_ref_type, a_ref_name, a_rev,
                       cs_repo_name, cs_ref_name, cs_ref_type, cs_rev,
                       file_diff_data)">
<div class="diff-collapse">
    <button data-target="${'diff-container-%s' % (id(file_diff_data))}" class="diff-collapse-button btn btn-link btn-sm">&uarr; ${_('Collapse Diff')} &uarr;</button>
</div>
%for id_fid, url_fid, op, a_filename, cs_filename, diff, stats in file_diff_data:
    ${diff_block_diffblock(id_fid, url_fid, op, diff,
        a_repo_name, a_rev, a_ref_type, a_ref_name, a_filename,
        cs_repo_name, cs_rev, cs_ref_type, cs_ref_name, cs_filename,
        'diff-container-%s' % id(file_diff_data))}
%endfor
</%def>

<%def name="diff_block_diffblock(id_fid, url_fid, op, diff,
    a_repo_name, a_rev, a_ref_type, a_ref_name, a_filename,
    cs_repo_name, cs_rev, cs_ref_type, cs_ref_name, cs_filename, cls)"
>
    <div id="${id_fid}_target"></div>
    <div id="${id_fid}" class="panel panel-default ${cls}">
        <div class="panel-heading clearfix">
                <div class="pull-left">
                    ${cs_filename}
                </div>
                <div class="pull-left diff-actions">
                  <span>
                    %if op == 'A':
                      <span class="no-file" data-toggle="tooltip" title="${_('No file before')}">
                        <i class="icon-minus-circled"></i></span>
                    %else:
                      <a href="${h.url('files_home', repo_name=a_repo_name, f_path=a_filename, revision=a_rev)}" data-toggle="tooltip" title="${_('File before')}">
                        <i class="icon-doc"></i></a>
                    %endif

                    %if op == 'A':
                      <span class="arrow" data-toggle="tooltip" title="${_('Added')}">&#10142;</span>
                    %elif op == 'M':
                      <span class="arrow" data-toggle="tooltip" title="${_('Modified')}">&#10142;</span>
                    %elif op == 'D':
                      <span class="arrow" data-toggle="tooltip" title="${_('Deleted')}">&#10142;</span>
                    %elif op == 'R':
                      <span class="arrow" data-toggle="tooltip" title="${_('Renamed')}">&#10142;</span>
                    %elif op is None:
                      <span class="arrow" data-toggle="tooltip" title="${_('No change')}">&#10142;</span>
                    %else:
                      <span class="arrow" data-toggle="tooltip" title="${_('Unknown operation: %r') % op}">&#10142;</span>
                    %endif

                    %if op == 'D':
                      <span class="no-file" data-toggle="tooltip" title="${_('No file after')}">
                        <i class="icon-minus-circled"></i></span>
                    %else:
                      <a href="${h.url('files_home', repo_name=cs_repo_name, f_path=cs_filename, revision=cs_rev)}" data-toggle="tooltip" title="${_('File after')}">
                        <i class="icon-doc"></i></a>
                    %endif
                  </span>

                  <a href="${h.url('files_diff_home',repo_name=cs_repo_name,f_path=cs_filename,diff2=cs_rev,diff1=a_rev,diff='diff',fulldiff=1)}" data-toggle="tooltip" title="${_('Show full diff for this file')}">
                      <i class="icon-file-code"></i></a>
                  <a href="${h.url('files_diff_2way_home',repo_name=cs_repo_name,f_path=cs_filename,diff2=cs_rev,diff1=a_rev,diff='diff',fulldiff=1)}" data-toggle="tooltip" title="${_('Show full side-by-side diff for this file')}">
                      <i class="icon-docs"></i></a>
                  <a href="${h.url('files_diff_home',repo_name=cs_repo_name,f_path=cs_filename,diff2=cs_rev,diff1=a_rev,diff='raw')}" data-toggle="tooltip" title="${_('Raw diff')}">
                      <i class="icon-diff"></i></a>
                  <a href="${h.url('files_diff_home',repo_name=cs_repo_name,f_path=cs_filename,diff2=cs_rev,diff1=a_rev,diff='download')}" data-toggle="tooltip" title="${_('Download diff')}">
                      <i class="icon-floppy"></i></a>
                  ${c.ignorews_url(request.GET, url_fid)}
                  ${c.context_url(request.GET, url_fid)}
                </div>
                <div class="pull-right">
                    ${_('Show inline comments')}
                    ${h.checkbox('checkbox-show-inline-' + id_fid, checked="checked",class_="show-inline-comments",**{'data-id_for':id_fid})}
                </div>
        </div>
        <div class="no-padding panel-body" data-f_path="${cs_filename}">
            ${diff|n}
            %if op and cs_filename.rsplit('.')[-1] in ['png', 'gif', 'jpg', 'bmp']:
              <div class="btn btn-image-diff-show">Show images</div>
              %if op == 'M':
                <div id="${id_fid}_image-diff" class="btn btn-image-diff-swap" style="display:none">Press to swap images</div>
              %endif
              <div>
                %if op in 'DM':
                  <img id="${id_fid}_image-diff-img-a" class="img-diff img-diff-swapable" style="display:none"
                      realsrc="${h.url('files_raw_home',repo_name=a_repo_name,revision=a_rev,f_path=a_filename)}" />
                %endif
                %if op in 'AM':
                  <img id="${id_fid}_image-diff-img-b" class="img-diff img-diff-swapable" style="display:none"
                      realsrc="${h.url('files_raw_home',repo_name=cs_repo_name,revision=cs_rev,f_path=cs_filename)}" />
                %endif
              </div>
            %endif
        </div>
    </div>
</%def>

<%def name="diff_block_js()">
<script>'use strict';
$(document).ready(function(){
    $('.btn-image-diff-show').click(function(e){
        $('.btn-image-diff-show').hide();
        $('.btn-image-diff-swap').show();
        $('.img-diff-swapable')
            .each(function(i,e){
                    $(e).prop('src', $(e).attr('realsrc'));
                })
            .show();
        });

    $('.btn-image-diff-swap').mousedown(function(e){
        $('#'+e.currentTarget.id+'-img-a.img-diff-swapable')
          .before($('#'+e.currentTarget.id+'-img-b.img-diff-swapable'));
    });
    var reset = function(e){
        $('#'+e.currentTarget.id+'-img-a.img-diff-swapable')
          .after($('#'+e.currentTarget.id+'-img-b.img-diff-swapable'));
    };
    $('.btn-image-diff-swap').mouseup(reset);
    $('.btn-image-diff-swap').mouseleave(reset);

    $('.diff-collapse-button').click(function(e) {
        $('.diff_block').toggleClass('hidden');
        var $button = $(e.currentTarget);
        var $target = $('.' + $button.data('target'));
        if($target.hasClass('hidden')){
            $target.removeClass('hidden');
            $button.html("&uarr; {0} &uarr;".format(_TM['Collapse Diff']));
        }
        else if(!$target.hasClass('hidden')){
            $target.addClass('hidden');
            $button.html("&darr; {0} &darr;".format(_TM['Expand Diff']));
        }
    });
    $('.show-inline-comments').change(function(e){
        var target = e.currentTarget;
        if(target == null){
            target = this;
        }
        var boxid = $(target).data('id_for');
        if(target.checked){
            $('#{0} .inline-comments'.format(boxid)).show();
        }else{
            $('#{0} .inline-comments'.format(boxid)).hide();
        }
    });
});
</script>
</%def>