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

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

<%block name="js_extra">
  <script src="${h.url('/codemirror/lib/codemirror.js')}"></script>
  <script 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 overflow-x-visible">
        <div class="panel panel-default">
            <div class="panel-heading clearfix">
                    <div class="pull-left">
                        ${h.link_to(c.node1.path,h.url('files_home',repo_name=c.repo_name,
                        revision=c.cs2.raw_id,f_path=c.node1.path))}
                    </div>
                    <div class="pull-left diff-actions">
                      <a href="${h.url('files_diff_home',repo_name=c.repo_name,f_path=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=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=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=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 id="compare" class="overflow-x-visible"></div>
        </div>
    </div>

<script>'use strict';
var orig1_url = ${h.jshtml(h.url('files_raw_home',repo_name=c.repo_name,f_path=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=c.node2.path,revision=c.cs2.raw_id))};

$(document).ready(function () {
    $('#compare').mergely({
        width: 'auto',
        /* let the 2 compare panes use all the window space currently available
           below footer (i.e. on an empty page with just header and footer): */
        height: $(window).height()
                - $('.footer').offset().top
                - $('.footer').height(),
        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>