<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	  xmlns:th="http://www.thymeleaf.org"
	  xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
	<link rel="shortcut icon" th:href="@{/favicon.ico}"/>
	<link th:href="@{/static/css/bootstrap.min.css}" rel="stylesheet"/>
	<link th:href="@{/static/css/font-awesome.min.css}" rel="stylesheet"/>
	<link th:href="@{/static/css/animate.css}" rel="stylesheet"/>
	<link th:href="@{/static/css/bootstrap-table.css}" rel="stylesheet"/>
	<link th:href="@{/static/css/webuploader.css}" rel="stylesheet"/>
	<link th:href="@{/static/css/diyUpload.css}" rel="stylesheet"/>
	<link th:href="@{/static/css/style.css}" rel="stylesheet"/>
    <style type="text/css">
    	ul { padding: 0; }
    	.parentFileBox>.diyButton { text-align: left; }
    	.row { margin-bottom: 10px; }
    	.project-list .list-item { border: 1px solid #e5e5e5; position: relative; margin-right: 30px; display: inline-block; vertical-align: top; border-radius: 6px; padding: 0 31px; }
    	.project-list .icon img { width: 150px; height: 150px; display: block; margin: 10px auto; }
    	.project-list .add .icon img { cursor: pointer; }
    	.project-list.empty { text-align: center; }
    	.project-list p { font-size: 16px; text-align: center; margin-top: 20px; }
    	.x-close { position: absolute; top: 0; right: 10px; font-size: 20px; color: #2a2a2a; cursor: pointer; }
    	.x-close:hover { color: #000; } 
    </style>
</head>
<body class="gray-bg">
	<div class="wrapper wrapper-content animated fadeInRight">
        <div class="ibox-content">
        	<div class="project-list">
        		<div class="list-item add">
        			<div class="icon">
        				<img th:src="@{/static/img/add.png}" src=""/>
        			</div>
        			<p>点击添加项目</p>
        		</div>
        		<div th:each="p : ${projects}" class="list-item">
        			<span class="x-close" th:attr="data-id=${p.id}">x</span>
        			<div class="icon">
        				<img th:src="@{${#strings.isEmpty(p.icon)} ? '/static/img/project.png' : ${session.picsUrlPrefix} + ${p.icon}}" src=""/>
        			</div>
        			<p th:text="${p.name}">非税收入收费</p>
        		</div>
        	</div>
        </div>
    </div>
	<input id="apiUrlPrefix" type="hidden" th:value="${session.apiUrlPrefix}">

    <script type="text/template" id="tpl">
    	<form id="proejctForm" style="padding: 20px;" method="post" th:action="@{/project/add}">
			<div class="row">
				<label class="col-sm-3 control-label" style="margin-top: 8px;">项目名称：</label>
				<label class="col-sm-6">
					<input id="projectName" type="text" class="form-control" name="name" required="" oninvalid="this.setCustomValidity('请输入项目名称')" oninput="setCustomValidity('')"/>
				</label>
			</div>
			<div class="row">
				<label class="col-sm-3 control-label" style="margin-top: 8px;">Application Id：</label>
				<label class="col-sm-6">
					<input id="applicationId" type="text" class="form-control" name="applicationId" required="" oninvalid="this.setCustomValidity('请输入Application Id')" oninput="setCustomValidity('')"/>
				</label>
			</div>
			<div class="row">
				<label class="col-sm-3 control-label" style="margin-top: 8px;">项目ICON：</label>
				<div class="col-sm-9">
					<div id="box">
						<div id="upload"></div>
					</div>
				</div>
				<input id="iconHidden" name="icon" type="hidden" value="">
			</div>
			<div class="row">
				<label class="col-sm-offset-3 col-sm-9 control-label" style="margin-top: 8px;">建议尺寸：160*160像素，格式：png/jpg</label>
			</div>
			<div class="row col-sm-4 col-sm-offset-3">
				<button class="btn m-r btn-primary" type="submit">确定</button>
				<button id="cancelBtn" class="btn btn-danger" type="reset">取消</button>
			</div>
    	</form>
    </script>
	<script th:src="@{/static/js/jquery.min.js}"></script>
	<script th:src="@{/static/js/bootstrap.min.js}"></script>
	<script th:src="@{/static/js/content.js}"></script>
	<script th:src="@{/static/js/plugins/layer/layer.min.js}"></script>
	<script th:src="@{/static/js/plugins/baiduUpload/diyUpload.js}"></script>
	<script th:src="@{/static/js/plugins/baiduUpload/webuploader.html5only.min.js}"></script>
	<script th:src="@{/static/js/modules/project/project.js}"></script>
</body>
</html>
