<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">

<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:150px;
    left:100px;
    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>
<iframe 
    type="text/html" 
    src="/js/libs/svg-edit/svg-editor.htm" 
    id="svgedit" 
    onload="init_embed();fetchSvgToEditor({});" 
    width="1024px" height="1500px" style="border-width:0px;"></iframe>
</div>
</form>
[% # vim: set tabstop=4 syntax=html expandtab: -%]
