<link rel="stylesheet" type="text/css" href="${h.url('/css/codemirror.css')}"/>

<link rel="stylesheet" type="text/css" href="${h.url('/css/mergely.css')}"/>

</%def>

<%def name="title()">

    ${_('%s File side-by-side diff') % c.repo_name}

    %if c.site_name:

        · ${c.site_name}

    %endif

</%def>

<%def name="breadcrumbs_links()">

    ${_('File diff')} ${h.show_id(c.changeset_1)} → ${h.show_id(c.changeset_2)}

</%def>

<%def name="page_nav()">

    ${self.menu('repositories')}

</%def>

<%def name="main()">

${self.repo_context_bar('changelog')}

<div class="box">

    <!-- box / title -->

    <div class="title">

        ${self.breadcrumbs()}

    </div>

    <div class="diff-container" style="overflow-x: hidden">

        <div class="diffblock comm" style="margin:3px; padding:1px">

            <div class="code-header">

                <div class="changeset_header">

                    <div class="changeset_file">

                        ${h.link_to(h.safe_unicode(c.node1.path),h.url('files_home',repo_name=c.repo_name,

                        revision=c.cs2.raw_id,f_path=h.safe_unicode(c.node1.path)))}

                    </div>

                    <div class="diff-actions">

                      <a href="${h.url('files_diff_home',repo_name=c.repo_name,f_path=h.safe_unicode(c.node1.path),diff2=c.cs2.raw_id,diff1=c.cs1.raw_id,diff='diff',fulldiff=1)}" class="tooltip" title="${h.tooltip(_('Show full diff for this file'))}">

                          <img class="icon" src="${h.url('/images/icons/page_white_go.png')}"/>

                      </a>

                      <a href="${h.url('files_diff_2way_home',repo_name=c.repo_name,f_path=h.safe_unicode(c.node1.path),diff2=c.cs2.raw_id,diff1=c.cs1.raw_id,diff='diff',fulldiff=1)}" class="tooltip" title="${h.tooltip(_('Show full side-by-side diff for this file'))}">

                          <img class="icon" src="${h.url('/images/icons/application_double.png')}"/>

                      </a>

                      <a href="${h.url('files_diff_home',repo_name=c.repo_name,f_path=h.safe_unicode(c.node1.path),diff2=c.cs2.raw_id,diff1=c.cs1.raw_id,diff='raw')}" class="tooltip" title="${h.tooltip(_('Raw diff'))}">

                          <img class="icon" src="${h.url('/images/icons/page_white.png')}"/>

                      </a>

                      <a href="${h.url('files_diff_home',repo_name=c.repo_name,f_path=h.safe_unicode(c.node1.path),diff2=c.cs2.raw_id,diff1=c.cs1.raw_id,diff='download')}" class="tooltip" title="${h.tooltip(_('Download diff'))}">

                          <img class="icon" src="${h.url('/images/icons/page_save.png')}"/>

                      </a>

                    </div>

                </div>

            </div>

            <div id="compare"></div>

        </div>

    </div>

<script>

var orig1_url = '${h.url('files_raw_home',repo_name=c.repo_name,f_path=h.safe_unicode(c.node1.path),revision=c.cs1.raw_id)}';

var orig2_url = '${h.url('files_raw_home',repo_name=c.repo_name,f_path=h.safe_unicode(c.node2.path),revision=c.cs2.raw_id)}';

$(document).ready(function () {

    $('#compare').mergely({

        width: 'auto',

        height: '600',

        fgcolor: {a:'#ddffdd',c:'#cccccc',d:'#ffdddd'},

        bgcolor: '#fff',

        viewport: true,

        cmsettings: {mode: 'text/plain', readOnly: true, lineWrapping: false, lineNumbers: true},

        lhs: function(setValue) {

            if("${c.node1.is_binary}" == "True"){

                setValue('Binary file')

            }

            else{

                $.ajax(orig1_url, {dataType: 'text', success: setValue});

            }

        },

        rhs: function(setValue) {

            if("${c.node2.is_binary}" == "True"){

                setValue('Binary file')

            }

            else{

                $.ajax(orig2_url, {dataType: 'text', success: setValue});

            }

        },

    });

    $('#ignorews').change(function(e){

        var val = e.currentTarget.checked;

        $('#compare').mergely('options', {ignorews: val});

        $('#compare').mergely('update');

    })

    $('#edit_mode').change(function(e){

        var val = !e.currentTarget.checked;

        $('#compare').mergely('cm', 'lhs').setOption('readOnly', val);

        $('#compare').mergely('cm', 'rhs').setOption('readOnly', val);

        $('#compare').mergely('update');

    })