<style type='text/css'>
    #poster {
        width:320px;height:504px;border:1px solid #ccc;position:relative
    }
    #poster .bg { position:absolute;width:100%;z-index:0}
    #poster .drag[type=img] img,#poster .drag[type=thumb] img { width:100%;height:100%; }
    #poster .drag { position: absolute; width:80px;height:80px; border:1px solid #000; }
    #poster .drag[type=nickname] { width:80px;height:40px; font-size:16px; font-family: 黑体;}
    #poster .drag img {position:absolute;z-index:0;width:100%; }
    #poster .rRightDown,.rLeftDown,.rLeftUp,.rRightUp,.rRight,.rLeft,.rUp,.rDown{  position:absolute;  width:7px;  height:7px;  z-index:1;  font-size:0;  }
    #poster .rRightDown,.rLeftDown,.rLeftUp,.rRightUp,.rRight,.rLeft,.rUp,.rDown{  background:#C00;  }
    .rLeftDown,.rRightUp{cursor:ne-resize;}
    .rRightDown,.rLeftUp{cursor:nw-resize;}
    .rRight,.rLeft{cursor:e-resize;}
    .rUp,.rDown{cursor:n-resize;}
    .rLeftDown{left:-4px;bottom:-4px;}
    .rRightUp{right:-4px;top:-4px;}
    .rRightDown{right:-4px;bottom:-4px;}
    .rLeftUp{left:-4px;top:-4px;}
    .rRight{right:-4px;top:50%;margin-top:-4px;}
    .rLeft{left:-4px;top:50%;margin-top:-4px;}
    .rUp{top:-4px;left:50%;margin-left:-4px;}
    .rDown{bottom:-4px;left:50%;margin-left:-4px;}
    .context-menu-layer { z-index:9999;}
    .context-menu-list { z-index:9999;}
    .context-menu-list {
        margin:0;
        padding:0;
        min-width: 120px;
        max-width: 250px;
        display: inline-block;
        position: absolute;
        list-style-type: none;
        border: 1px solid #DDD;
        background: #EEE;
        -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
        -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
        -ms-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
        -o-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 11px;
    }
    .context-menu-item {
        padding: 2px 2px 2px 24px;
        background-color: #EEE;
        position: relative;
        -webkit-user-select: none;
        -moz-user-select: -moz-none;
        -ms-user-select: none;
        user-select: none;
    }
    .context-menu-separator {
        padding-bottom:0;
        border-bottom: 1px solid #DDD;
    }
    .context-menu-item > label > input,
    .context-menu-item > label > textarea {
        -webkit-user-select: text;
        -moz-user-select: text;
        -ms-user-select: text;
        user-select: text;
    }
    .context-menu-item.hover {
        cursor: pointer;
        background-color: #39F;
    }
    .context-menu-item.disabled {
        color: #666;
    }
    .context-menu-input.hover,
    .context-menu-item.disabled.hover {
        cursor: default;
        background-color: #EEE;
    }
    .context-menu-submenu:after {
        content: ">";
        color: #666;
        position: absolute;
        top: 0;
        right: 3px;
        z-index: 1;
    }
    .context-menu-item.icon { min-height: 18px; background-repeat: no-repeat; background-position: 4px 2px; }
    /* vertically align inside labels */
    .context-menu-input > label > * { vertical-align: top; }
    /* position checkboxes and radios as icons */
    .context-menu-input > label > input[type="checkbox"],
    .context-menu-input > label > input[type="radio"] {
        margin-left: -17px;
    }
    .context-menu-input > label > span {
        margin-left: 5px;
    }
    .context-menu-input > label,
    .context-menu-input > label > input[type="text"],
    .context-menu-input > label > textarea,
    .context-menu-input > label > select {
        display: block;
        width: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        -o-box-sizing: border-box;
        box-sizing: border-box;
    }
    .context-menu-input > label > textarea {
        height: 100px;
    }
    .context-menu-item > .context-menu-list {
        display: none;
        right: -5px;
        top: 5px;
    }
    .context-menu-item.hover > .context-menu-list {
        display: block;
    }
    .context-menu-accesskey {
        text-decoration: underline;
    }
    .n-msg{display: none!important;}
</style>

<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">

    <div class="tab-pane active" id="tab_design">
        <div class="form-group">
            <div class="col-sm-12">
                <table style="width:100%;">
                    <tbody>
                    <tr>
                        <td style="width:320px;padding:10px;" valign="top">
                            <div id="poster">
                                <img src='{$row.bg_image|htmlentities}' class='bg'/>
                                {if !empty($row['data'])}
                                {foreach name="row.data" item="d"}
                                <div class="drag" type="{$d['type']}" index="{++$key}" style="zindex:{$key};left:{$d['left']};top:{$d['top']};width:{$d['width']};height:{$d['height']}" src="{$d['src']|default=''}" size="{$d['size']|default='15px'}" color="{$d['color']|default='#000'}" qr_table="{$d['qr_table']|default=''}" qr_field="{$d['qr_field']|default=''}" qr_relation="{$d['qr_relation']|default=''}">
                                    {if $d['type']=='qr'}
                                    <img src="/assets/addons/poster/images/qr.jpg" />
                                    {elseif $d['type']=='head'}
                                    <img src="/assets/addons/poster/images/head.jpg" />
                                    {elseif $d['type']=='img'}
                                    {if empty($d['src'])}
                                    <img src="/assets/addons/poster/images/img.jpg" />
                                    {else}
                                    <img src="{$d['src']}" />
                                    {/if}
                                    {elseif $d['type']=='nickname'}
                                    <div class="text" style="font-size:{$d.size|default='15px'};color:{$d.color|default='#000'}">昵称</div>
                                    {/if}
                                    <div class="rRightDown"></div>
                                    <div class="rLeftDown"></div>
                                    <div class="rRightUp"></div>
                                    <div class="rLeftUp"></div>
                                    <div class="rRight"></div>
                                    <div class="rLeft"></div>
                                    <div class="rUp"></div>
                                    <div class="rDown"></div>
                                </div>
                                {/foreach}
                                {/if}
                            </div>
                        </td>
                        <td valign="top" style="padding:10px;">
                            <div class="panel panel-default">
                                <div class="panel-body">
                                    <div class="form-group">
                                        <label class="control-label col-xs-12 col-sm-3">{:__('Title')}:</label>
                                        <div class="col-xs-12 col-sm-8">
                                            <input id="c-title" data-rule="required" class="form-control" name="row[title]" type="text" placeholder="此项必须填写" value="{$row.title|htmlentities}">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label col-xs-12 col-sm-3">{:__('Waittext')}:</label>
                                        <div class="col-xs-12 col-sm-8">
                                            <input id="c-waittext" class="form-control" name="row[waittext]" type="text" placeholder="例如：您的专属海报正在拼命生成中，请等待片刻..." value="{$row.waittext|htmlentities}">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label col-xs-12 col-sm-3">{:__('Status')}:</label>
                                        <div class="col-xs-12 col-sm-8">
                                            <div class="radio">
                                                {foreach name="statusList" item="vo"}
                                                <label for="row[status]-{$key}"><input id="row[status]-{$key}" name="row[status]" type="radio" value="{$key}" {in name="key" value="$row.status"}checked{/in} /> {$vo}</label>
                                                {/foreach}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="c-weigh" class="control-label col-xs-12 col-sm-3">{:__('Weigh')}:</label>
                                        <div class="col-xs-12 col-sm-8">
                                            <input id="c-weigh" class="form-control" name="row[weigh]" type="number" value="{$row.weigh}">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label col-xs-12 col-sm-3">{:__('Bg_image')}:</label>
                                        <div class="col-xs-12 col-sm-8">
                                            <div class="input-group">
                                                <input id="c-bg_image" class="form-control" size="50" name="row[bg_image]" type="text" value="{$row.bg_image|htmlentities}">
                                                <div class="input-group-addon no-border no-padding">
                                                    <span><button type="button" id="plupload-bg_image" class="btn btn-danger plupload" data-input-id="c-bg_image" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp" data-multiple="false" data-preview-id="p-bg_image"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
                                                    <span><button type="button" id="fachoose-bg_image" class="btn btn-primary fachoose" data-input-id="c-bg_image" data-mimetype="image/*" data-multiple="false"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
                                                </div>
                                                <span class="msg-box n-right" for="c-bg_image"></span>
                                            </div>
                                            <ul class="row list-inline plupload-preview" id="p-bg_image"></ul>
                                        </div>
                                        <label class="control-label col-xs-12 col-sm-3"></label>
                                        <div class="col-xs-12 col-sm-8">
                                            <span class="help-block">背景图片尺寸: 640 * 1008</span>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="control-label col-xs-12 col-sm-3">{:__('Poster elements')}:</label>
                                        <div class="col-xs-12 col-sm-8">
                                            <button class="btn btn-default btn-com" type="button" data-type="head">头像</button>
                                            <button class="btn btn-default btn-com" type="button" data-type="nickname">昵称</button>
                                            <button class="btn btn-default btn-com" type="button" data-type="qr">二维码</button>
                                            <button class="btn btn-default btn-com" type="button" data-type="img">图片</button>
                                        </div>
                                    </div>

                                    <div class="form-group nameset" style='display:none'>
                                        <label class="control-label col-xs-12 col-sm-3">{:__('Nickname color')}:</label>
                                        <div class="col-xs-12 col-sm-8">
                                            <div class="row">
                                                <div class="col-sm-8 col-xs-12">
                                                    <input id="c-color" data-rule="required" class="form-control" name="color" type="text" value="" style="width: 50%">
                                                    <span class="input-group-btn" style="display: unset;">
                                                    <button type="button" class="btn btn-default btn-color colorpicker" style="padding:0;margin-left:1px;" title="选择颜色"><img src="__CDN__/assets/addons/poster/images/colorful.png" height="29" alt=""></button>
                                                    <span class="msg-box n-right" for="c-color"></span>
                                                </div>
                                                <div class="col-sm-4"></div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group nameset" style='display:none'>
                                        <label class="control-label col-xs-12 col-sm-3">{:__('Nickname size')}:</label>
                                        <div class="col-xs-12 col-sm-8">
                                            <input type="text" id="namesize" data-rule="required" class="form-control namesize" placeholder="例如: 14,16" style="width: 90%;"/>
                                            <div class="input-group-addon" style="display: contents;">px</div>
                                        </div>
                                    </div>


                                    <div class="form-group qrset" style='display:none'>
                                        <label class="control-label col-xs-12 col-sm-3">{:__('Qr_table')}:</label>
                                        <div class="col-xs-12 col-sm-8">
                                            {:build_select('qr_table',$tableList,'',['class'=>'form-control selectpicker']);}
                                        </div>
                                    </div>

                                    <div class="form-group qrset" style='display:none'>
                                        <label class="control-label col-xs-12 col-sm-3">{:__('Qr_field')}:</label>
                                        <div class="col-xs-12 col-sm-8">
                                            <select id="c-qr_field" data-rule="required" style="height:30px;" class="form-control selectpicker"></select>
                                        </div>
                                    </div>

                                    <div class="form-group qrset" style='display:none'>
                                        <label class="control-label col-xs-12 col-sm-3">{:__('Qr_relation')}:</label>
                                        <div class="col-xs-12 col-sm-8">
                                            <select id="c-qr_relation" data-rule="required" style="height:30px;" class="form-control selectpicker"></select>
                                        </div>
                                    </div>

                                    <div class="form-group imgset" style='display:none'>
                                        <label class="control-label col-xs-12 col-sm-3">{:__('Graphics Settings')}:</label>
                                        <div class="col-xs-12 col-sm-8">
                                            <div class="input-group">
                                                <input id="c-img" data-rule="required" class="form-control" size="50" name="img" type="text" value="">
                                                <div class="input-group-addon no-border no-padding">
                                                    <span><button type="button" id="plupload-img" class="btn btn-danger plupload" data-input-id="c-img" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp" data-multiple="false" data-preview-id="p-img"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
                                                    <span><button type="button" id="fachoose-img" class="btn btn-primary fachoose" data-input-id="c-img" data-mimetype="image/*" data-multiple="false"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
                                                </div>
                                                <span class="msg-box n-right" for="c-img"></span>
                                            </div>
                                            <ul class="row list-inline plupload-preview" id="p-img"></ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <input type="hidden" name="row[data]" value="" />
            <button type="submit" class="btn btn-success btn-embossed disabled">{:__('OK')}</button>
            <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
        </div>
    </div>
</form>