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

<%inherit file="/base/base.html"/>

<%block name="js_extra">
  <script type="text/javascript" src="${h.url('/codemirror/lib/codemirror.js')}"></script>
  <script type="text/javascript" src="${h.url('/js/mergely.js')}"></script>
</%block>
<%block name="css_extra">
  <link rel="stylesheet" type="text/css" href="${h.url('/codemirror/lib/codemirror.css')}"/>
  <link rel="stylesheet" type="text/css" href="${h.url('/css/mergely.css')}"/>
</%block>

<%block name="title">
    ${_('%s File side-by-side diff') % c.repo_name}
</%block>

<%def name="breadcrumbs_links()">
    ${_('File diff')} ${h.show_id(c.changeset_1)} &rarr; ${h.show_id(c.changeset_2)}
</%def>

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

<%def name="main()">
${self.repo_context_bar('changelog')}
<div class="panel panel-primary">
    <div class="panel-heading clearfix">
        ${self.breadcrumbs()}
    </div>

    <div class="no-padding panel-body">
        <div class="panel panel-default">
            <div class="panel-heading clearfix">
                <div class="changeset_header">
                    <div class="pull-left">
                        ${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="pull-left 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)}" 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=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)}" 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=c.repo_name,f_path=h.safe_unicode(c.node1.path),diff2=c.cs2.raw_id,diff1=c.cs1.raw_id,diff='raw')}" data-toggle="tooltip" title="${_('Raw diff')}">
                          <i class="icon-diff"></i>
                      </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')}" data-toggle="tooltip" title="${_('Download diff')}">
                          <i class="icon-floppy"></i>
                      </a>
                      ${h.checkbox('ignorews', label=_('Ignore whitespace'))}
                      ${h.checkbox('edit_mode', label=_('Edit'))}
                    </div>
                </div>
            </div>
            <div id="compare"></div>
        </div>
    </div>

<script>
var orig1_url = ${h.jshtml(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.jshtml(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: $(window).height() - $('#compare').offset().top - $('#footer').height() - 35,
        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 (${h.js(c.node1.is_binary)}) {
                setValue('Binary file');
            }
            else{
                $.ajax(orig1_url, {dataType: 'text', success: setValue});
            }

        },
        rhs: function(setValue) {
            if (${h.js(c.node2.is_binary)}) {
                setValue('Binary file');
            }
            else{
                $.ajax(orig2_url, {dataType: 'text', success: setValue});
            }
        }
    });
    // recompute width - avoids overflow and horizontal scrollbar
    $('#compare').mergely('resize');

    $('#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');
    });
});
</script>

</div>
</%def>