<script>
function formToUri(q){
    return q+'?'+$('form[id=template_editor]').serialize();
}
function formSerialize(){
    return $('form[id=template_editor]').serialize();
}
</script>

<form name="template_editor" id="template_editor" action="[% c.uri_for_action('/invoicetemplate/get_content_ajax', [tmpl.id]) -%]"  class="form-horizontal" enctype="multipart/form-data" method="post">

[% UNLESS framed -%]
<span>
    <a class="btn btn-primary btn-small" href="[% c.uri_for('/back') %]"><i class="icon-arrow-left"></i> [% c.loc('Back') %]</a>
</span>
[% back_created = 1 -%]
[% END -%]

<span>
    <a class="btn btn-primary btn-small" onclick="saveTemplate({}, refreshMessagesAjax );void(0);"><i class="icon-download-alt"></i>[% c.loc('Save SVG')%]</a>
</span>

<span>
    <a class="btn btn-primary btn-small" target="_blank" href="[% c.uri_for_action('/invoicetemplate/preview_content', [ tmpl.id ]) %]"><i class="icon-eye-open"></i> [% c.loc('Preview as PDF')%]</a>
</span>

<span id="load_saved_control">
    <a class="btn btn-secondary btn-small"  data-confirm="[%c.loc('Discard');%]" href="javascript:fetchInvoiceTemplateData({});void(0);" cancel-hide="1"><i class="icon-trash"></i> [% c.loc('Discard Changes')%]</a>
</span>

<span>
    <a class="btn btn-tertiary btn-small" onclick="
        var divId = '#template_variables_help';
        $(divId).draggable({
            handle: '.modal-header',
            cursor: 'crosshair',
        }).css('display','block').find($('.mod_close')).click(function(event) {
            $(divId).css('display','none');
        });
        void(0);"><i class="icon-info-sign"></i> [% c.loc('Show Variables')%]</a>
</span>

<style>
#template_variables_help{
    display:none;
    position:absolute;
    top:350px;
    left:920px;
    width: 250px;
    height: 500px;
}
.variablekey{
    font-weight:bold;
    color:#2222FF;
    font-style:italic;
}
.variable{
    font-weight:bold;
}
</style>
<div id="template_variables_help" class="modal ngcp-modal">
    <div class="modal-header">
        <h3>[%c.loc('Template variables')%]
        <button type="button" class="close mod_close">×</button>
        </h3>
    </div>
    <div style="overflow:auto;height:85%;">

    [% FOREACH varname IN ['rescontact', 'customer', 'custcontact', 'billprof', 'invoice']; %]

        <ul> <span class="variable">[% varname %]</span>
        [% FOREACH key IN ${varname}.keys().sort(); -%]
            <li>[% varname %].<span class="variablekey">[%key%]</span></li>
        [% END -%]
    </ul>
    [% END -%]

    </div>
    <div class="modal-footer">
        <a class="mod_close btn btn-primary btn-small">[%c.loc('Close')%]</a>
    </div>
</div>

[%initial = 'saved'%]
<div class="ngcp-separator"></div>
<div id="svgedit_container"></div>
<script>
    var svgedit_path = '/js/libs/svg-edit/svg-editor.htm';
    var iframe_svgedit =  '<iframe ' +
'    type="text/html" ' +
'    src="'+ svgedit_path +'" ' +
'    id="svgedit" ' +
'    onload="init_embed();fetchSvgToEditor({});" ' +
'    width="1024px" height="1500px" style="border-width:0px;"></iframe>' +
'</div>';
    var $svgedit_container = $('#svgedit_container');
    if ( $svgedit_container.length ) {
        $svgedit_container.append(iframe_svgedit);
    }
</script>
</form>
[% # vim: set tabstop=4 syntax=html expandtab: -%]
