{template 'common/header'}
<ol class="breadcrumb we7-breadcrumb">
	<li><a href="javascript:;" onclick="javascript:history.go(-1)"><i class="wi wi-back-circle"></i> 返回</a></li>
</ol>

<link href="../addons/we7_diyspecial/images/app.css" rel="stylesheet">
<script src="../addons/we7_diyspecial/images/special.min.js"></script>
<form action="" method="post" class="form-horizontal" id="design">
	<input type="hidden" name="multiid" value="{$multiid}" />
	<input type="hidden" name="id" value="{$id}" />
	<div class="app clearfix" ng-style="{'margin-left': '-30px'}" ng-controller="MainCtrl" ng-cloak>
		<input type="hidden" name="wapeditor[params]" id="wapeditor-params" value="{{submit.params}}" />
		<input type="hidden" name="wapeditor[html]" id="wapeditor-html" value="{{submit.html}}" />
		<input type="hidden" name="wapeditor[multipage]" id="wapeditor-multipage" value="{{submit.multipage}}" />
		<div class="app-region">
			<div class="panel">
				<div class="panel-body">
					<label class="text-center col-sm-1">基础</label>
					<ul class="app-add-filed clearfix">
						<li ng-repeat="m in modules" ng-if="m.isbase == true" ng-click="addItem(m['id'])"><a id="{{m['id']}}" class="btn btn-default" href="#" ng-bind="m['name']"></a></li>
					</ul>
					<label class="text-center col-sm-1">组件</label>
					<ul class="app-add-filed clearfix">
						<li ng-repeat="m in modules" ng-if="!m.issystem && !m.isbase" ng-click="addItem(m['id'])"><a id="{{m['id']}}" class="btn btn-default" href="#" ng-bind="m['name']"></a></li>
					</ul>
					<div class="js-editor-submit-div">
						<button type="button" class="btn btn-primary js-editor-submit multi-submit">上架</button>
					</div>
				</div>
			</div>		
		</div>
		<div we7-multipage></div>
		<div class="app-header"><div class="app-header-content"></div></div>
		<div class="app-preview">
			<div class="app-content" ng-style="{'background-color' : activeModules[0].params.bgColor, 'height' : activeModules[0].params.pageHeight+'px'}">
				<div class="modules" ng-style="{'height' : activeModules[0].params.pageHeight+'px'}" we7-edit-key-map>
					<div ng-if="module['id']" id="module-{{module.index}}" name="{{module.id}}" index="{{module.index}}" ng-class="{'js-sorttable' : !module.issystem && !module.isbase}" ng-repeat="module in activeModules"	ng-style="{'border' : module.issystem ? 'none' : ''}">
						<div ng-init="displayPanel = ('widget-'+(module['id'].toLowerCase())+'-display.html')" ng-include="displayPanel" ng-mousedown="editItem(module.index)"></div>
					</div>
				</div>
			</div>
			
		</div>
		<div class="app-side">
			<div ng-init="editorPanel = ('widget-'+(activeItem['id'].toLowerCase())+'-editor.html'.toLowerCase())" ng-show="activeItem.id == editorid" ng-repeat="editorid in editors" ng-include="editorPanel" id="editor{{editorid}}" class="editor"></div>
			<div ng-show="activeItem['id'] && activeItem['id'] != 'header'" we7-style></div>
		</div>
		<div class="app-footer"><div we7-pagelength></div></div>
	</div>
	{php echo tpl_ueditor('')}
	<script type="text/javascript">
		$(function(){
			$('.modules').click(function(){
				return false;
			});
			require(['underscore', 'bootstrap', 'jquery.ui', 'hammer', 'datetimepicker'], function() {
				var allPages = {php echo !empty($page['params']) ? $page['params'] : 'null'};
				var multipage = {php echo !empty($page['multipage']) ? $page['multipage'] : 'null'};
				angular.module('specialApp').value('config',{ 
					'allPages' : allPages,	
					'multipage' : multipage
				});
				angular.bootstrap($('#design'), ['specialApp']);
			});
		});
	</script>
</form>
{template 'common/footer'}