{template 'common/header'}
<ol class="breadcrumb we7-breadcrumb">
	<a href="{php echo url('site/style')}"><i class="wi wi-back-circle"></i> </a>
	<li><a href="{php echo url('site/style')}">微官网模板</a></li>
	<li><a href="#">设计风格</a></li>
</ol>
<form action="" method="post" class="article-post">
	<input type="hidden" name="styleid" value="{$styleid}">
	<div class="we7-form" id="js-wesite-tpl-post" ng-controller="WesiteTplPost" ng-cloak>
		<div class="form-group">
			<label for="" class="control-label col-sm-2">风格名称</label>
			<div class="form-controls col-sm-8">
				<input type="text" class="form-control" name="name" ng-model="style.name">
				<span class="help-block"></span>
			</div>
		</div>
		<div class="form-group">
			<label for="" class="control-label col-sm-2">模板路径</label>
			<div class="form-controls col-sm-8">
				<input type="text" name="cname" class="form-control" disabled value="./app/themes/{{template.name}}">
				<span class="help-block"> </span>
			</div>
		</div>
		<div class="form-group">
			<label for="" class="control-label col-sm-2">基础图片目录[imgdir]</label>
			<div class="form-controls col-sm-8">
				<input type="text" class="form-control" name="style[imgdir]" ng-model="styles.imgdir.content">
				<span class="help-block">风格基础图片存放的目录，如果为空则默认为./app/themes/default/images目录 </span>
			</div>
		</div>
		<div class="form-group">
			<label for="" class="control-label col-sm-2">首页背景 [indexbgcolor]</label>
			<div class="form-controls col-sm-8 input-group">
					{php echo tpl_form_field_color('style[indexbgcolor]', $styles['indexbgcolor']['content'])}
					<span class="help-block">首页背景 [indexbgcolor]</span>
				</div>
		</div>
		<div class="form-group">
			<label for="" class="control-label col-sm-2"></label>
			<div class="form-controls col-sm-8">
				<input class="form-control" type="text" name="style[indexbgextra]" ng-model="styles.indexbgextra.content">
				<span class="help-block">附加属性  [indexbgextra]</span>
			</div>
		</div>
		<div class="form-group">
			<label for="" class="control-label col-sm-2"></label>
			<div class="form-controls col-sm-8">
				<div class="we7-input-img input-more" ng-class="{'active': styles.indexbgimg.content}">
					<img ng-src="{{styles.indexbgimg.content}}" ng-if="styles.indexbgimg.content">
					<a href="javascript:;" class="input-addon" ng-click="uploadImage()" ng-hide="styles.indexbgimg.content"><span>+</span></a>
					<input type="text" name="style[indexbgimg]" ng-model="styles.indexbgimg.content" ng-style="{'display' : 'none'}">
					<div class="cover-dark">
						<a href="javascript:;" class="cut" ng-click="uploadImage()">更换</a>
						<a href="javascript:;" class="del" ng-click="delImage()"><i class="fa fa-times text-danger"></i></a>
					</div>
				</div>
				<span class="help-block">背景图 [indexbgimg]</span>
			</div>
		</div>
		<div class="form-group">
			<label for="" class="control-label col-sm-2">正常字体[fontfamily]</label>
			<div class="form-controls col-sm-8">
				<input type="text" class="form-control" name="style[fontfamily]" ng-model="styles.fontfamily.content">
				<span class="help-block">正常字体[fontfamily]</span>
			</div>
		</div>
		<div class="form-group">
			<label for="" class="control-label col-sm-2">正常字体大小[fontsize]</label>
			<div class="form-controls col-sm-8">
				<input type="text" class="form-control" name="style[fontsize]" ng-model="styles.fontsize.content">
				<span class="form-control-addon">PX</span>
				<span class="help-block">正常字体大小[fontsize]</span>
			</div>
		</div>
		<div class="form-group">
			<label for="" class="control-label col-sm-2">普通文本颜色[fontcolor]</label>
			<div class="form-controls col-sm-8 input-group">
				{php echo tpl_form_field_color('style[fontcolor]', $styles['fontcolor']['content'])}
				<span class="help-block">普通文本颜色[fontcolor]</span>
			</div>
		</div>
		<div class="form-group">
			<label for="" class="control-label col-sm-2">菜单文本颜色[fontnavcolor]</label>
			<div class="form-controls col-sm-8 input-group">
				{php echo tpl_form_field_color('style[fontnavcolor]', $styles['fontnavcolor']['content'])}
				<span class="help-block">菜单文本颜色[fontnavcolor]</span>
			</div>
		</div>
		<div class="form-group">
			<label for="" class="control-label col-sm-2">链接文字颜色[linkcolor]</label>
			<div class="form-controls col-sm-8 input-group">
				{php echo tpl_form_field_color('style[linkcolor]', $styles['linkcolor']['content'])}
				<span class="help-block">链接文字颜色[linkcolor]</span>
			</div>
		</div>
		<div class="form-group">
			<label for="" class="control-label col-sm-2">扩展CSS</label>
			<div class="form-controls col-sm-8">
				<textarea name="style[css]" class="form-control" cols="110" rows="6" ng-bind="styles.css.content"></textarea>
			</div>
		</div>
		
		<div class="penel we7-panel">
			<div class="panel-heading">
				自定义属性
			</div>
			<div class="panel-body we7-margin">
				<div class="we7-form" id="customForm">
					<div class="alert alert-danger">
						(说明：变量名用于设置不同的变量，只能是字母数字组成。变量描述可方便用户识别对应变量的作用，不能为空)<br>
						(注意：这里定义的变量,变量值不能为空，且最大长度为20，否则将视为无效)
					</div>
					<div class="form-inline we7-margin-bottom" ng-repeat="styleinfo in customStyles">
						<div class="input-group" >
							<span class="input-group-addon">变量名</span>
							<input class="form-control" name="custom[name][]" ng-model="styleinfo.variable" type="text" placeholder="请输入配置变量" pattern="[a-zA-Z0-9-_]{1,20}">
						</div>
						<div class="input-group" >
							<span class="input-group-addon">变量描述</span>
							<input class="form-control" name="custom[desc][]" ng-model="styleinfo.description" type="text" placeholder="请输入变量描述" pattern=".{1,20}">
						</div>
						<div class="input-group" >
							<span class="input-group-addon">值</span>
							<input class="form-control" name="custom[value][]" ng-model="styleinfo.content" type="text" placeholder="请输入配置值" pattern=".{1,20}">
						</div>
						<label class="checkbox-inline color-default">
							<a href="javascript:;" ng-click="delCustomArrtibute($event)" class="fa fa-times-circle" title="删除此操作"></a>
						</label>
					</div>
				</div>
				<a href="javascript:;" class="color-default" ng-click="addCustomAttribute()"><i class="fa fa-plus-square"></i>添加新变量</a>
			</div>
		</div>
		<input name="token" type="hidden" value="{$_W['token']}" />
		<div class="btn btn-primary btn-submit" ng-click="checkSubmit($event)">提交</div>
		<input name="submit" value="提交" type="submit" id="submit-post" ng-style="{'display' : 'none'}">
	</div>
</form>
<script type="text/html" id="item-form-html">
	<div class="form-inline we7-margin-bottom">
		<div class="input-group" >
			<span class="input-group-addon">变量名</span>
			<input class="form-control" name="custom[name][]" value="{$style['variable']}" type="text" placeholder="请输入配置变量" pattern="[0-9A-Za-z-_]{1,20}">
		</div>
		<div class="input-group" >
			<span class="input-group-addon">变量描述</span>
			<input class="form-control" name="custom[desc][]" value="{$style['description']}" type="text" placeholder="请输入变量描述" pattern=".{1,20}">
		</div>
		<div class="input-group" >
			<span class="input-group-addon">值</span>
			<input class="form-control" name="custom[value][]" value="{$style['content']}" type="text" placeholder="请输入配置值" pattern=".{1,20}">
		</div>
		<label class="checkbox-inline color-default">
			<a href="javascript:;" onclick="$(this).parent().parent().remove();" class="fa fa-times-circle" title="删除此操作"></a>
		</label>
	</div>
</script>
<script>
require(['underscore'], function() {
	angular.module('wesiteApp').value('config', {
		style: {php echo !empty($style) ? json_encode($style) : 'null'},
		systemtags: {php echo !empty($systemtags) ? json_encode($systemtags) : 'null'},
		styles: {php echo !empty($styles) ? json_encode($styles) : 'null'},
		template: {php echo !empty($template) ? json_encode($template) : 'null'},
	});
	angular.bootstrap($('#js-wesite-tpl-post'), ['wesiteApp']);	
});

</script>
{template 'common/footer'}