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

##usage:

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

## ${diff_block.diff_block(change)}

##

<%def name="diff_block(change)">

<div class="diff-collapse">

    <span target="${'diff-container-%s' % (id(change))}" class="diff-collapse-button">&uarr; ${_('Collapse Diff')} &uarr;</span>

</div>

<div class="diff-container" id="${'diff-container-%s' % (id(change))}">

%for id_fid, (a_rev, cs_rev, op, filename, diff, stats) in change.iteritems():

    <%

    %>

    <div id="${id_fid}_target" style="clear:both;margin-top:25px"></div>

    <div id="${id_fid}" class="diffblock margined comm">

        <div class="code-header">

            <div class="changeset_header">

                <div class="changeset_file">

                    ${h.safe_unicode(filename)} |

                    ## TODO: link to ancestor and head of other instead of exactly other

                    %if op == 'A':

                      ${_('Added')}

                      <a class="spantag" href="${h.url('files_home', repo_name=cs_repo_name, f_path=filename, revision=cs_rev)}">${h.short_ref(cs_ref_type, cs_ref_name)}</a>

                    %elif op == 'M':

                      <a class="spantag" href="${h.url('files_home', repo_name=a_repo_name, f_path=filename, revision=a_rev)}">${h.short_ref(a_ref_type, a_ref_name)}</a>

                      <i class="icon-right"></i>

                      <a class="spantag" href="${h.url('files_home', repo_name=cs_repo_name, f_path=filename, revision=cs_rev)}">${h.short_ref(cs_ref_type, cs_ref_name)}</a>

                    %elif op == 'D':

                      ${_('Deleted')}

                      <a class="spantag" href="${h.url('files_home', repo_name=a_repo_name, f_path=filename, revision=a_rev)}">${h.short_ref(a_ref_type, a_ref_name)}</a>

                    %elif op == 'R':

                      ${_('Renamed')}

                      <a class="spantag" href="${h.url('files_home', repo_name=a_repo_name, f_path=filename, revision=a_rev)}">${h.short_ref(a_ref_type, a_ref_name)}</a>

                      <i class="icon-right"></i>

                      <a class="spantag" href="${h.url('files_home', repo_name=cs_repo_name, f_path=filename, revision=cs_rev)}">${h.short_ref(cs_ref_type, cs_ref_name)}</a>

                    %else:

                      ${op}???

                    %endif

                </div>

                <div class="diff-actions">

                  <a href="${h.url('files_diff_home',repo_name=cs_repo_name,f_path=h.safe_unicode(filename),diff2=cs_rev,diff1=a_rev,diff='diff',fulldiff=1)}" class="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=h.safe_unicode(filename),diff2=cs_rev,diff1=a_rev,diff='diff',fulldiff=1)}" class="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=h.safe_unicode(filename),diff2=cs_rev,diff1=a_rev,diff='raw')}" class="tooltip" title="${_('Raw diff')}">

                      <i class="icon-diff"></i>

                  </a>

                  <a href="${h.url('files_diff_home',repo_name=cs_repo_name,f_path=h.safe_unicode(filename),diff2=cs_rev,diff1=a_rev,diff='download')}" class="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>

                <span style="float:right;margin-top:-3px">

                    <label>

                        ${_('Show inline comments')}

                        ${h.checkbox('',checked="checked",class_="show-inline-comments",id_for=url_fid)}

                    </label>

                </span>

            </div>

        </div>

        <div class="code-body full_f_path" data-f_path="${h.safe_unicode(filename)}">

            ${diff|n}

            %if 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 style="font-size: 0">

                %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=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=filename)}" />

                %endif

              </div>

            %endif

        </div>

    </div>

</%def>

<%def name="diff_block_js()">

<script type="text/javascript">

$(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) {

        var $button = $(e.currentTarget);

        var $target = $('#' + $button.attr('target'));

        if($target.hasClass('hidden')){

            $target.removeClass('hidden');

            $button.html("↑ {0} ↑".format(_TM['Collapse Diff']));

        }

        else if(!$target.hasClass('hidden')){

            $target.addClass('hidden');

            $button.html("↓ {0} ↓".format(_TM['Expand Diff']));

        }

    });

    $('.show-inline-comments').change(function(e){

        var target = e.currentTarget;

        if(target == null){

            target = this;

        }

        var boxid = $(target).attr('id_for');

        if(target.checked){

            $('#{0} .inline-comments'.format(boxid)).show();

        }else{

            $('#{0} .inline-comments'.format(boxid)).hide();