{extend name="public/base"/}
{block name="style"}
<style>
body {
  font-size: 14px;
}

video::-internal-media-controls-download-button {
  display:none;
}

video::-webkit-media-controls-enclosure {
  overflow:hidden;
}

video::-webkit-media-controls-panel {
  width: calc(100% + 30px); /* Adjust as needed */
}

.btn, .input-group .input-group-btn .btn {
  border-width: 1px;
}

.webui-popover i.icon-refresh {
  background: none !important;
}

.modal-confirm-message {
  font-size: 16px;
  margin: 10px 0;
}

.actions-bar {
  margin-bottom: 10px;
}

.search-form .input-group input[type=text] {
  width: 100%;
}
.search-form .input-group-btn .fa {
  line-height: 20px;
}

.nav-async-tasks-bar .fa-bars {
  font-size:24px;
  vertical-align:middle;
}
.ace-nav>li .nav-async-tasks-bar .badge {
  position:absolute;
  top:5px;
  left:auto;
  right:5px;
  background-color:red !important;
  padding:0;
  width:15px;
  height:15px;
  line-height:15px;
  font-size:10px;
}

.select2-container--default .select2-selection--single {
  height: 34px;
  border-radius: 0;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 34px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 34px;
}

.status.bordered {
  border-width: 2px;
  border-style: solid;
  padding: 2px 10px;
}
.status-pending, .status-withdrawing {
  color: orange;
  border-color: orange;
}
.status-paid {
  color: #5cb85c;
  border-color: #5cb85c;
}

.required {
  color: red;
  margin-left: 3px;
}

.link-buttons {
  padding: 5px;
  background: #f9f9f9;
}
.link-buttons > a {
  display: inline-block;
  margin: 0 10px;
}

.pager {
  text-align: right;
}
.pager .pager-summary {
  display: inline-block;
  vertical-align: middle;
}
.pager .pager-summary em {
  font-style: normal;
  font-weight: bold;
}
.pager .page-input {
  padding: 2px;
  margin: 0 4px;
  text-align: center;
}
.pager .pagination {
  margin: 0 0 0 10px;
  vertical-align: middle;
}

.loading-panel {
  color: #ddd;
  font-size: 18px;
  text-align: center;
  padding: 50px 0;
}
.loading-panel .fa {
  font-size: 46px;
}

.no-record {
  text-align: center;
  padding: 50px 0;
}
.no-record .no-record-icon {
  font-size: 60px;
  color: #ddd;
}
.no-record .no-record-text {
  color: #aaa;
  margin-top: 10px;
}

.form-control-static {
  padding-top: 4px;
}

.btn-pending, .btn-pending:focus {
  background-color: #ffb752 !important;
  border-color: #ffb752;
}
.btn-pending:hover {
  background-color: #e59729 !important;
  border-color: #ffb752;
}
.btn-paid, .btn-paid:focus {
  background-color: #87b87f !important;
  border-color: #87b87f;
}
.btn-paid:hover {
  background-color: #629b58 !important;
  border-color: #87b87f;
}
.btn-closed {
  background-color: #abbac3!important;
  border-color: #abbac3;
}
.btn-closed:hover {
  background-color: #8b9aa3!important;
  border-color: #abbac3;
}

.btn-group>.btn {
  border-width: 0;
}
.btn-group>.btn>.caret, .btn-group>.btn.btn-xs>.caret {
  margin-top: 0;
}

.field-validation-error {
  color: red !important;
}

.popover {
  max-width: 400px;
}

.nav-pills > li > a {
  padding: 7px 12px 8px;
}
.nav-pills-sm > li > a {
  padding: 4px 12px;
}

.label-sm {
  height: 17px;
}

#view-chapter-modal .chapter-content p {
  font-size: 14px;
  line-height: 1.7em;
}

.bill-detail {
  border: #ddd 1px solid;
  padding: 10px;
}
.bill-detail label {
  font-size: 14px;
  font-weight: bold;
}
.bill-detail .value {
  font-size: 16px;
  margin: 10px 0;
}
.bill-detail .amount {
  color: #00a0e9;
  font-size: 32px;
}
.bill-detail .bill-cell {
  padding: 10px;
}
.bill-detail .remark-lines {
  line-height: 1.7em;
  color: #666;
}
.bill-detail .bill-bank-info {
  line-height: 1.7em;
}
.bill-detail .bill-bank-info label {
  margin-right: 5px;
}
.bill-detail .status {
  font-size: 32px;
  display: inline-block;
  margin-bottom: 10px;
}

.bill-detail .pay-money-status {
  font-size: 12px;
  margin-left: 10px;
  display: inline-block;
  margin-bottom: 10px;
  border-width: 2px;
  border-style: solid;
  padding: 2px 10px;
  color: #ff0008;
  border-color: #ff0008;
}

/* Template Message */
.template-msg-editor {
  border: #ddd 1px solid;
  border-radius: 4px;
  padding: 8px;
  background: white;
  width: 400px;
}
.template-msg-title {
  font-weight:bold;
}
.template-msg-meta {
  color: #999;
  font-size: 12px;
}
.template-msg-main {
  margin: 10px 0 5px;
  font-size: 13px;
  line-height: 1.7em;
  vertical-align: middle;
}
.template-msg-main .btn-edit {
  color: red;
  cursor: pointer;
}

/* Rich msg */
.rich-msg-editor {
  border: #ddd 1px solid;
  border-radius: 4px;
  padding: 8px;
  background: white;
  width: 400px;
}
.rich-msg-editor .msg-title {
  font-weight:normal;
  font-size: 16px;
}
.rich-msg-editor .msg-meta {
  color: #999;
  font-size: 11px;
  margin: 5px 0 7px;
}
.rich-msg-editor-main {
  margin: 10px 0 5px;
  font-size: 13px;
  line-height: 1.7em;
  vertical-align: middle;
}
.rich-msg-editor-main .btn-edit {
  color: red;
  cursor: pointer;
}
.rich-msg-editor .msg-cover-img {
  width: 100%;
}
.rich-msg-editor .msg-edit-pic-overlay {
  display: none;
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  text-align: center;
  line-height: 170px;
  background: rgba(0,0,0, .2);
}
.rich-msg-editor .btn-edit-pic {
  cursor: pointer;
  display: inline-block;
  margin-top: 85px;
}
.rich-msg-editor .msg-cover:hover .msg-edit-pic-overlay {
  display: block;
}
.rich-msg-editor .msg-footer {
  font-size: 13px;
  margin-top: 10px;
  border-top: 1px solid #eee;
  padding: 8px 0 0;
}
.rich-msg-editor .msg-footer .fa-chevron-right {
  display: inline-block;
  margin-top: 4px;
  color: #ccc;
  font-weight: 300;
}

.msg-sub-items {
  margin-top:6px;
}
.msg-sub-item {
  border-top:1px solid #eee;padding:6px 0;
}
.msg-sub-item .msg-sub-item-img {
  position:relative;width:40px;height:40px;
}
.msg-sub-item .msg-sub-item-img img {
  width:40px;height:40px;
}
.msg-sub-item .msg-sub-item-img-overlay {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,.3);
  text-align:center;
  line-height:40px;
  display: none;
}
.msg-sub-item .msg-sub-item-img-overlay > a {
  font-size:12px;color:#fff;
}
.msg-sub-item .msg-sub-item-img:hover .msg-sub-item-img-overlay {
  display: block;
}
.msg-sub-item .msg-sub-item-meta {
  margin-top:6px;font-size:12px;color:#ccc;
}

.add-sub-item-panel {
  text-align:center;
  width:400px;
  margin-top:10px;
}
.add-sub-item-panel > a {
  display:block;
  line-height:2em;
  font-size:16px;
}

.bootstrap-tagsinput {
  width: 100%;
  height: 100px;
}
.bootstrap-tagsinput input {
  border: 0px;
}

.twitter-typeahead {
  width: 100%;
  display: block !important;
}

.typeahead,
.tt-query,
.tt-hint {
  width: 396px;
  height: 30px;
  padding: 8px 12px;
  line-height: 30px;
  border: 2px solid #ccc;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  outline: none;
}

.typeahead {
  background-color: #fff;
}

.typeahead:focus {
  border: 2px solid #0097cf;
}

.tt-query {
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tt-input {
  width: 100%;
}

.tt-hint {
  color: #999
}

.tt-menu {
  width: 422px;
  margin: 12px 0;
  padding: 8px 0;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
  -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
  box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

.tt-suggestion {
  padding: 3px 10px;
  font-size:14px;
  line-height: 1.8em;
}

.tt-suggestion:hover {
  cursor: pointer;
  background-color: #eee;
}

.tt-suggestion.tt-cursor {
  color: #fff;
  background-color: #0097cf;

}

.tt-suggestion p {
  margin: 0;
}

#member-migrate-modal form.member-migrate-form{
  border-top: 1px solid #e4e9ee;
  margin-top: 15px;
  padding-top: 20px;
}

#app-stats-summary-panel .summary {
  font-size:32px;
  margin:5px 0
}

#app-stats-summary-panel .text-muted {
  font-size:12px;
}

label.checkbox-toggle > input {
  display: none;
}
label.checkbox-toggle i {
  display: inline-block;
  padding: 2px;
  width: 40px;
  height: 20px;
  border-radius: 13px;
  vertical-align: middle;
  -webkit-transition: .25s .09s;
  transition: .25s .09s;
  position: relative;
  background: #d8d9db;
  -webkit-box-sizing: initial;
  box-sizing: initial;
}
label.checkbox-toggle i:after {
  content: " ";
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  left: 2px;
  -webkit-transition: .25s;
  transition: .25s;
}
label.checkbox-toggle > input:checked + i {
  background: #4bd865;
}
label.checkbox-toggle > input:checked + i:after {
  -webkit-transform: translateX(20px);
  transform: translateX(20px);
}
label.checkbox-toggle:hover {
  cursor: pointer;
}
.img-link {
  border: #ddd 2px solid;
  display: inline-block;
}
.img-link-active {
  border-color: #428bca;
}
#rich-msg-setting-list-panel .msg-main-item {
  position: relative;
}

#rich-msg-setting-list-panel .msg-main-title {
  position: absolute;
  opacity: 0.6;
  background-color: #000;
  bottom: 0px;
  color: #fff;
  width: 100%;
}

#rich-msg-setting-list-panel .title {
  padding: 5px;
}

#rich-msg-setting-list-panel .panel-heading {
	color:#000;
  background-color: #fff
}

#rich-msg-setting-list-panel .panel-body {
  background-color:#f5f5f5;
  padding:10px;
}
#rich-msg-setting-list-panel .panel-body .well {
  background-color:#fff;
  padding:10px;
  margin-bottom:0px;
}

#rich-msg-setting-list-panel .panel-body .description {
  margin-bottom: 10px
}

#rich-msg-setting-list-panel .panel-footer .nav {
  width:60px;
}

#rich-msg-setting-list-panel .panel-footer .nav>li>a {
  padding:0px;
}

#sidebar li {
  font-size: 13px;
}


#sidebar .nav-list>li>ul {
  background-color:#FFF;
  margin-left: 0;
}

#sidebar .nav-list>li>ul>li {
  border-top: 1px solid #e5e5e5;
}

#sidebar ul.collapse>li.active:after  {
  display: block;
  content: "";
  position: absolute;
  right: -2px;
  top: -1px;
  bottom: 0;
  z-index: 1;
  border: 2px solid;
  border-width: 0 2px 0 0;
  border-color: #2b7dbc;
}

#sidebar ul.collapse>li>a {
  color: #585858;
}

#sidebar ul.collapse>li:hover>a, #sidebar ul.collapse>li.active>a {
  color:#2b7dbc !important;
}

#sidebar .nav-list>li>ul>li>a {
  padding-left: 35px;
}

#sidebar .nav-list>li>ul>li:hover {
  font-size: 13px !important;
  background-color: #FFF !important;
}

.new-feature-hint {
  display: none;
  color: red;
  position: absolute;
  left: 4px;
  top: 4px;
  border-radius: 4px;
  width: 8px;
  height: 8px;
  background: red;
}

.sub-nav .new-feature-hint {
  left: 28px;
  top: 6px;
}

</style>
 <link rel="stylesheet" href="/public/css/ace.min.css" id="main-ace-style" />
{/block}
{block name="body"}
<div class="main-box clearfix">
	<header class="main-box-header clearfix">
		<div class="pull-left">
			<h2>{$meta_title}</h2>
		</div>
	</header>
	<div class="main-box-body clearfix">
	<div id="rich-msg-setting-list-panel" class="row">
	{volist name="list" id="vo"}
    <div class="col-md-3">
        <div class="panel panel-default">
            <div class="panel-heading">
                {$vo.name} 
                <div class="pull-right">
                <label>
                    <input name="switch-field"  
                        data-template-id='{$vo.id}'
						data-type-id='{$vo.type}'
                        id='switcher-{$vo.id}' 
                        class="ace ace-switch ace-switch-4 btn-empty" type="checkbox" {if condition="$vo.open==1"}checked{/if}>
                    <span class="lbl"></span>
                </label>
                </div>
            </div>
            <div class="panel-body">
                <div class="well">
                    <div class="description">
                    {$vo.desc}</div>
                    <div class="msg-body">
                        <div class="msg-main-item">
                            <img src=" {$vo.body_img}" style="width:100%">
							{notempty name="vo.body"}
                            <div class="msg-main-title title">{$vo.body}</div>
							{/notempty}
                        </div>
						{notempty name="vo.subone_body"}
                        <div class="msg-sub-items">
                                <div class="msg-sub-item clearfix">
                                <div class="pull-left title">{$vo.subone_body}</div>
                                <div class="pull-right">
                                    <div class="msg-sub-item-img">
                                        <img src="{$vo.subone_img}">
                                    </div>
                                </div>
                            </div>
                                <div class="msg-sub-item clearfix">
                                <div class="pull-left title">{$vo.subtwo_body}</div>
                                <div class="pull-right">
                                    <div class="msg-sub-item-img">
                                        <img src="{$vo.subtwo_img}">
                                    </div>
                                </div>
                            </div>
                        </div>
						{/notempty}
                    </div>
                </div>
            </div>
        </div>
    </div>
	{/volist}
</div>
	</div>
</div>
{/block}
{block name="script"}
<script>
    $(function () {
       $('input[name="switch-field"]').each(function () {
            var $this = $(this); 
            $this.change(function() {
                var templateId = $this.data('template-id'),
					typeId = $this.data('type-id'),
                    enable = $this.prop('checked'),
                    method = enable ? 'api_enable' : 'api_disable';

                $.ajax({
                    url: '{:url('rich_msg_setting')}?method=' + method + '&id=' + templateId+ '&type=' + typeId,
                    type: 'POST',
                    contentType: 'application/json',
					dataType: "json",
					success: function(data){
						
						if (data.code == 1) {
							updateAlert(data.msg,"success");
							setTimeout(function() {
								location.reload();
							}, 1500);
						}else{
							updateAlert(data.msg,"error");
						}
					}

                })
				
            })
       });
    });
</script>
{/block}