#@layout()
#define script()
<script src="#(CPATH)/static/components/ckeditor/ckeditor.js"></script>
<script src="#(CPATH)/static/components/editable/js/bootstrap-editable.min.js"></script>
<script src="#(CPATH)/static/components/selectize/selectize.min.js"></script>
<script src="#(CPATH)/static/components/highlight/highlight.pack.js"></script>
<script src="#(CPATH)/static/components/simplemde/simplemde.min.js"></script>


<script>

    $(".submitBtn").on("click", function () {
        $("#pageStatus").val($(this).attr("data-status"));
        doSubmit();
    });

    $(".tflag").each(function () {
        $(this).on('click', function () {
            $("#flag").val($(this).text());
        })
    });

    // 全局函数,在CKEditor ctrl + s 快捷键处用到,保留article的status
    window.doSubmit = function () {
        ajaxSubmit("#form", function (data) {
            $("#pageId").attr("value", data.id);
            toastr.success('内容保存成功。');
        });
    }

    $("#removeThumbnail").on("click", function () {
        $("#thumbnail").attr("src", "#(CPATH)/static/commons/img/nothumbnail.jpg");
        $("#articleThumbnail").val("");
    })


    var editMode = "#(editMode ?? 'html')";

    function doChangeEditor(id) {
        if (confirm('确定要切换编辑器吗？切换可能出现前台渲染内容缺失的问题。')) {
            var changeMode = editMode == "html" ? "markdown" : "html";
            if (id != '0') {
                ajaxGet('#(CPATH)/admin/page/doChangeEditMode?id=' + id + "&mode=" + changeMode);
            } else {
                ajaxGet('#(CPATH)/commons/changeEditor/' + changeMode);
            }
        }

    }

    initEditor('editor1', 467, editMode);


</script>
#end
#define css()
<link href="#(CPATH)/static/components/editable/css/bootstrap-editable.css" rel="stylesheet">
<link href="#(CPATH)/static/components/selectize/css/selectize.css" rel="stylesheet">
<link href="#(CPATH)/static/components/selectize/css/selectize.jpress.css" rel="stylesheet">
<link href="#(CPATH)/static/components/highlight/styles/github.css" rel="stylesheet">
<link href="#(CPATH)/static/components/simplemde/simplemde.min.css" rel="stylesheet">
<link href="#(CPATH)/static/components/simplemde/simplemde.jpress.css" rel="stylesheet">

<style>
    .popover-content {
        padding: 9px 14px;
        margin: 0 10px;
    }

    #slug {
        cursor: pointer;
    }

</style>
#end

#define content()
<div class="content-wrapper">

    <section class="content-header">
        <h1>
            写页面
        </h1>
    </section>

    <section class="content">
        <form action="#(CPATH)/admin/page/doWriteSave" method="post" id="form">
            <input type="hidden" id="pageStatus" name="page.status" value='#(page.id ?? "normal")'>
            <input type="hidden" id="pageId" name="page.id" value="#(page.id ??)">
            <input type="hidden" id="editModeId" name="page.edit_mode" value="#(editMode ??)">
            <div class="row">
                <div class="col-lg-9">

                    <!-- /.box-header -->
                    <!-- form start -->
                    <div class="form-horizontal">
                        <div class="form-group">
                            <div class="col-sm-12">
                                <input type="input" class="form-control input-lg" name="page.title"
                                       placeholder="请输入标题"
                                       id="page-title"
                                       value="#(page.title ??)">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-12" style="padding-bottom: 2px">
                                网址：<span class="domainSpan">#option('web_domain')</span>/<span id="slug"
                                                                                               class="slugSpan"
                                                                                               for-input="page-slug">#(page.slug ??)</span>#if(option("web_fake_static_enable"))#option('web_fake_static_suffix')#end

                                #if(page && page.isNormal())
                                （<a href="#(page.url)" target="_blank">访问</a>）
                                #end
                                <input type="hidden" id="page-slug" name="page.slug" value="#(page.slug ??)">
                                <a href="javascript:;" style="float: right;padding: 5px 0" onclick="doChangeEditor('#(page.id ?? 0)')">
                                    #if(editMode && editMode == 'html')
                                    使用 markdown 编辑
                                    #else
                                    可视化编辑
                                    #end
                                </a>
                            </div>
                            <div class="col-sm-12" style="z-index: 9999;">
                                <textarea id="editor1" name="page.content"
                                          style="height: 467px;width: 100%;background-color: white">#EditorContent(page.orignalContent ??)</textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-12">
                                <div class="box box-solid">
                                    <div class="box-header with-border">
                                        <h3 class="box-title">属性设置</h3>

                                        <div class="box-tools">
                                            <button type="button" class="btn btn-box-tool" data-widget="collapse">
                                                <i class="fa fa-minus"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <!-- /.box-header -->
                                    <div class="box-body ">
                                        <!-- Custom Tabs -->

                                        <form class="form-horizontal" autocomplete="off">
                                            <div class="box-body ">

                                                <div class="form-group">
                                                    <label class="col-sm-2 control-label">SEO关键字</label>

                                                    <div class="col-sm-6">
                                                    <textarea rows="3" class="form-control" name="page.meta_keywords"
                                                              placeholder="请输入">#(page.meta_keywords ??)</textarea>
                                                    </div>
                                                </div>

                                                <div class="form-group">
                                                    <label class="col-sm-2 control-label">SEO描述</label>

                                                    <div class="col-sm-6">
                                                    <textarea rows="3" class="form-control"
                                                              name="page.meta_description"
                                                              placeholder="请输入">#(page.meta_description ??)</textarea>
                                                    </div>
                                                </div>

                                            </div>

                                        </form>
                                        <!-- nav-tabs-custom -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

                <div class="col-lg-3">
                    <div class="box box-solid">
                        <div class="box-body ">
                            <button type="button" data-status="normal" class="btn btn-primary btn-sm submitBtn ">发布
                            </button>
                            <button type="button" data-status="draft" class="btn btn-default btn-sm submitBtn">草稿
                            </button>
                            <a href="javascript:;" data-status="trash" class="pull-right submitBtn"
                               style="padding-top: 5px;">移至垃圾箱</a>
                        </div>
                    </div>


                    <div class="box box-solid">
                        <div class="box-header with-border ">
                            <h3 class="box-title">模板样式</h3>
                        </div>
                        <div class="box-body ">
                            #if(styles && styles.size() > 0 )
                            <div class="form-group">
                                <select class="form-control" name="page.style">
                                    <option value="">默认样式</option>
                                    #for(style : styles)
                                    <option value="#(style)" #selectedIf(page && page.style== style)>
                                        #(style)
                                    </option>
                                    #end
                                </select>
                            </div>
                            #end

                            <div class="form-group">
                                <input type="text" class="form-control" name="page.flag"
                                       placeholder="展示标识" value="#(page.flag ??)" id="flag"/>
                                #if(flags && flags.size() > 0)
                                <p class="help-block">当前模板支持的展示标识有：</p>
                                <div class="tags">
                                    #for(flag : flags ??)
                                    <a href="javascript:;" class="tflag">#(flag)</a>
                                    #end
                                </div>
                                #end
                            </div>

                        </div>
                    </div>


                    <div class="box box-solid">
                        <div class="box-header with-border ">
                            <h3 class="box-title">缩略图</h3>
                        </div>
                        <div class="box-body no-padding">
                            <img src="#(CPATH)#(page.thumbnail ?? '/static/commons/img/nothumbnail.jpg')"
                                 style="width: 100%;height: 200px"
                                 id="thumbnail">
                            <input type="hidden" value="#(page.thumbnail ??)" name="page.thumbnail"
                                   id="articleThumbnail">
                        </div>
                        <div class="box-footer">
                            <button type="button" class="btn-image-browser btn btn-default btn-sm "
                                    for-src="thumbnail"
                                    for-input="articleThumbnail">选择图片
                            </button>
                            <a href="javascript:;" style="padding-left: 15px" id="removeThumbnail">移除</a>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </section>

</div>
#end
