<script src="${base}/resource/plugins/marked/marked.min.js"></script>
<form action="file/doImport" method="post" autocomplete="off" enctype="multipart/form-data" class="pageForm required-validate" onsubmit="return iframeCallback(this, $.bringBack)">
    <input type="hidden" name="_csrf" value="<@tools.csrfToken admin=true/>"/>
    <input type="hidden" name="titleField" value="${titleField!'title'}"/>
    <input type="hidden" name="field" value="${field!'text'}"/>
    <div class="pageFormContent layoutBox" layoutH>
        <dl class="nowrap">
            <dt><@t.page 'file'/>:</dt>
            <dd>
                <input type="file" name="file" class="required" size="30" accept="application/pdf,application/vnd.ms-powerpoint,application/vnd.openxmlformats-officedocument.presentationml.presentation,application/msword,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,*.md"/>
                <label><input type="checkbox" name="overrideTitle" class="form-check-input"<#if !field?has_content> checked="checked"</#if>><@t.page 'title.override'/></label>
                <span class="info"><@t.page 'import_doc.support_type'/></span>
            </dd>
        </dl>
        <dl class="nowrap iframe hide">
            <dt><@t.page 'iframe'/>:</dt>
            <dd>
                <p><label><input type="checkbox" name="useIframe" class="form-check-input"><@t.page 'upload.useIframe'/></label></p>
                <div class="iframeSize hide">
                    <label><@t.page 'width'/></label><input name="width" data-required="true" type="text" value="100%"/>
                    <label><@t.page 'height'/></label><input name="height" data-required="true" type="text" value="800px"/>
                </div>
            </dd>
        </dl>
        <dl class="nowrap font hide">
            <dt><@t.page 'default_font'/>:</dt>
            <dd>
                <select name="defaultFontFamily" class="combox">
                    <#list getFontList() as font>
                    <option value="${font}">${font}</option>
                    </#list>
                </select>
                <span class="info"><@t.page 'default_font.description'/></span>
            </dd>
        </dl>
        <dl class="nowrap marked hide">
            <dt><@t.page 'markdown'/>:</dt>
            <dd>
                <textarea cols="80" rows="8"></textarea>
            </dd>
        </dl>
    </div>
    <div class="formBar">
        <ul>
            <li><button type="button" class="buttonActive mdImport hide"><@t.page 'import'/></button></li>
            <li><button type="submit" class="buttonActive" title="ctrl+s"><@t.page 'import'/></button></li>
            <li><button type="button" class="button close"><@t.page 'button.close'/></button></li>
        </ul>
    </div>
</form>
<script>
if(marked){
    $(".marked",$.pdialog.getCurrent()).removeClass("hide");
}
$(".pageFormContent",$.pdialog.getCurrent()).on("change","input[type=file],textarea",function(){
    if($(this).length && $(this)[0].files){
        var filenames=$(this)[0].files[0].name.toLowerCase().split('.');
        if('pdf' == filenames[filenames.length-1]){
            $('.iframe',$.pdialog.getCurrent()).show();
            $('input[name=useIframe]',$.pdialog.getCurrent()).trigger("click");
        } else {
            $('.iframe',$.pdialog.getCurrent()).hide();
        }
        if('pptx' == filenames[filenames.length-1]||'ppt' == filenames[filenames.length-1]){
            $('.font',$.pdialog.getCurrent()).show();
        } else {
            $('.font',$.pdialog.getCurrent()).hide();
        }
        if('md' == filenames[filenames.length-1] && marked){
            var reader = new FileReader();
            reader.onload = function(e) {
                $(".pageFormContent",$.pdialog.getCurrent()).val(e.target.result);
            };
            reader.readAsText($(this)[0].files[0]);
            $("button[type=submit]",$.pdialog.getCurrent()).prop("disabled",true).addClass("hide");
            $(".mdImport",$.pdialog.getCurrent()).removeClass("hide");
        } else {
            $("button[type=submit]",$.pdialog.getCurrent()).prop("disabled",false).removeClass("hide");
            $(".mdImport",$.pdialog.getCurrent()).addClass("hide");
        }
    }else if($(this).val() && marked){
        $("button[type=submit]",$.pdialog.getCurrent()).prop("disabled",true).addClass("hide");
        $(".mdImport",$.pdialog.getCurrent()).removeClass("hide");
    }
});
$(".mdImport",$.pdialog.getCurrent()).on("click", function(){
    $.bringBack({"${field!'text'}":marked.parse($("textarea",$.pdialog.getCurrent()).val())});
});
$('input[name=useIframe]',$.pdialog.getCurrent()).on("click", function(){
    if($(this).is(':checked')) {
        $('.iframeSize',$.pdialog.getCurrent()).show();
        $('.iframeSize input[data-required=true]',navTab.getCurrentPanel()).addClass('required');
    } else {
        $('.iframeSize',$.pdialog.getCurrent()).hide();
        $('.iframeSize input[data-required=true]',navTab.getCurrentPanel()).removeClass('required');
    }
});
</script>