{{template "member/top.html" .}}
<div class="m-b-md clearfix">
	<h3 class="m-b-none">
		{{msg . "theme"}}
		<small>
		(<a href="http://blog.leanote.com/post/545f1a5c380782565e000000" target="_blank">{{msg . "needHelp"}}</a> 
		<a target="_blank" href="https://github.com/leanote/leanote/wiki/leanote-blog-theme-api">Leanote Blog Theme Api</a>)
		</small>
	</h3>
</div>

<div class="row">
<div class="col-sm-12 theme-container">
	<section class="panel panel-default">
		<div class="panel-body">
			<div>
			<form id="uploadAvatar" method="post" action="/member/blog/importTheme" enctype="multipart/form-data">
		    	<div id="dropAvatar" class="dropzone">
			    	<a class="btn btn-default btn-new" href="/member/blog/newTheme"><span class="fa fa-plus"></span> {{msg . "addTheme"}}</a>
                    <a class="btn btn-success btn-choose-file">
						<span class="fa fa-upload"></span> {{msg . "importTheme"}}(.zip)
                    </a>
                    <input type="file" name="file" multiple/>
	                <div id="avatarUploadMsg"></div>
                </div>
            </form>
			</div>
			<p>
			{{msg . "currentTheme"}}:
			</p>
			<div class="themes clearfix">
				<div class="theme pull-left">	
				    <a class="choose-theme" data-method="put" href="#" rel="nofollow">
				      <div class="theme-thumb thumb active-theme">
					      <img src="/{{.activeTheme.Path}}/images/screenshot.png" alt="preview">
				      </div>
				      <span class="theme-title">{{.activeTheme.Name}}</span>
					</a>
				    <span class="theme-author">
				      By: <a href="{{.activeTheme.AuthorUrl}}" target="_blank">{{.activeTheme.Author}}</a>
				    </span>
				    <div class="theme-btns">
				    	<div class="btn-group" data-id="{{.activeTheme.ThemeId.Hex}}">
					    	<a class="btn btn-default btn-sm btn-export"><span class="fa fa-download"></span> {{msg $ "export"}}</a>
					    	<!-- 必须是自己的主题 -->
					    	{{if .activeTheme.ThemeId}}
						    	<a class="btn btn-default btn-sm" href="/preview?themeId={{.activeTheme.ThemeId.Hex}}" target="_blank"><span class="fa fa-eye"></span> {{msg $ "preview"}}</a>
					    	{{end}}
					    	<a class="btn btn-primary btn-sm" target="_blank" href="/member/blog/updateTheme?themeId={{if .activeTheme.ThemeId}}{{.activeTheme.ThemeId.Hex}}{{end}}"><span class="fa fa-pencil"></span> {{msg $ "edit"}}</a>
				    	</div>
				    </div>
			    </div>
			    {{if .activeTheme.Info.Desc}}
			    <!-- 描述 -->
			    <div class="pull-left theme-desc">
			    	{{.activeTheme.Info.Desc|raw}}
			    </div>
			    {{end}}
			</div>
			
			<hr />
			<p>
			{{msg . "myOtherThemes"}}:
			</p>
			<ul class="themes">
				{{range $.otherThemes}}
				{{if .ThemeId}}
				<li class="theme">
				    <a class="choose-theme" data-method="put" href="#" rel="nofollow">
				      <div class="theme-thumb thumb">
					      <img src="/{{.Path}}/images/screenshot.png" alt="preview">
					      {{if .Info.Desc}}
					      <div class="theme-desc-mask">
					      	{{.Info.Desc|raw}}
					      </div>
					      {{end}}
				      </div>
				      <span class="theme-title">{{.Name}}</span>
					</a>
				    <span class="theme-author">
				      By: <a href="{{.AuthorUrl}}" target="_blank">{{.Author}}</a>
				    </span>
				    <div class="theme-btns">
				    	<div class="btn-group" data-id="{{.ThemeId.Hex}}">
					    	<a class="btn btn-default btn-sm btn-delete" data-loading-text="..."><span class="fa fa-remove"></span> {{msg $ "delete"}}</a>
					    	<a class="btn btn-default btn-sm btn-export"><span class="fa fa-download"></span> {{msg $ "export"}}</a>
					    	<a class="btn btn-default btn-sm" href="/preview?themeId={{.ThemeId.Hex}}" target="_blank"><span class="fa fa-eye"></span> {{msg $ "preview"}}</a>
					    	<a class="btn btn-default btn-sm"  target="_blank" href="/member/blog/updateTheme?themeId={{.ThemeId.Hex}}"><span class="fa fa-pencil"></span> {{msg $ "edit"}}</a>
					    	<a class="btn btn-primary btn-sm btn-active" data-loading-text="..."><span class="fa fa-check"></span> {{msg $ "use"}}</a>
					    	{{if $.isAdmin}}
						    	<a class="btn btn-default btn-sm btn-public" data-loading-text="...">
						    	{{if .IsDefault}}
							    	公开
						    	{{else}}
						    		私有
						    	{{end}}
						    	</a>
					    	{{end}}
				    	</div>
				    </div>
				</li>
				{{end}}
				{{else}}
					{{msg $ "none"}}
				{{end}}
			</ul>
		
			<hr />
			<p>
			{{msg . "leanoteThemeMarket"}}:
			</p>
			<ul class="themes">
				{{range $.optionThemes}}
				<li class="theme">
				    <a class="choose-theme" data-method="put" href="#" rel="nofollow">
				      <div class="theme-thumb thumb">
					      <img src="/{{.Path}}/images/screenshot.png" alt="preview">
					      {{if .Info.Desc}}
					      <div class="theme-desc-mask">
					      	{{.Info.Desc|raw}}
					      </div>
					      {{end}}
				      </div>
				      <span class="theme-title">{{.Name}}</span>
					</a>
				    <span class="theme-author">
				      By: <a href="{{.AuthorUrl}}" target="_blank">{{.Author}}</a>
				    </span>
				    <p class="theme-btns" data-id="{{.ThemeId.Hex}}">
				    	<a class="btn btn-primary btn-sm btn-install"><span class="fa fa-gear"></span> {{msg $ "install"}}</a>
				    </p>
				</li>
				{{end}}
			</ul>
		</div>
	</section>
</div>

</div>
{{template "member/footer.html" .}}

<script>
var urlPrefix = "{{.siteUrl}}";
$(function() {
// 使用主题
$(".btn-active").click(function() {
	var id = $(this).parent().data('id');
	var t = $(this);
	t.button("loading");
	ajaxPost("/member/blog/activeTheme", {themeId: id}, function(re) {
		t.button("reset");
		if(reIsOk(re)) {
			art.tips("Success");
			location.reload();
		} else {
			art.alert("Error");
		}
	});
});

// 导出主题
$(".btn-export").click(function() {
	var id = $(this).parent().data('id');
	var t = $(this);
	window.open("/member/blog/exportTheme?themeId=" + id);
});

// 删除主题
$(".btn-delete").click(function() {
	var id = $(this).parent().data('id');
	var t = $(this);
	art.confirm(getMsg("Are you sure ?"), function() {
		t.button("loading");
		ajaxPost("/member/blog/deleteTheme", {themeId: id}, function(re) {
			t.button("reset");
			if(reIsOk(re)) {
				art.tips("Success");
				location.reload();
			} else {
				art.alert("Error");
			}
		});
	});
});

// 安装主题
$(".btn-install").click(function() {
	var id = $(this).parent().data('id');
	var t = $(this);
	art.confirm(getMsg("Are you sure to install it ?"), function() {
		t.button("loading");
		ajaxPost("/member/blog/installTheme", {themeId: id}, function(re) {
			t.button("reset");
			if(reIsOk(re)) {
				art.tips(getMsg("Success"));
				location.reload();
			} else {
				art.alert(getMsg("Error"));
			}
		});
	});
});

{{if .isAdmin}}
// 只有管理员才有公开主题
$(".btn-public").click(function() {
	var id = $(this).parent().data('id');
	var t = $(this);
	art.confirm(getMsg("Are you sure ?"), function() {
		t.button("loading");
		ajaxPost("/member/blog/publicTheme", {themeId: id}, function(re) {
			t.button("reset");
			if(reIsOk(re)) {
				art.tips(getMsg("Success"));
				location.reload();
			} else {
				art.alert(getMsg("Error"));
			}
		});
	});
});
{{end}}

});
</script>

<script src="/js/require.js"></script>
<script>
// 导入主题
require.config({
	baseUrl: '/public',
    paths: {
    	'import_theme': 'member/js/import_theme',
    	'fileupload': 'js/plugins/libs-min/fileupload',
    },
});
$(function() {
	require(['import_theme'], function(import_theme) {});
});
</script>

{{template "member/end.html" .}}