<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>主项目管理</title>
		<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}" />
		<script src="{{ url_for('static', filename='utils.js') }}"></script>
		<script src="{{ url_for('static', filename='project_list.js') }}"></script>
		<script>
			function searchData() {
				const keyword = document.getElementById('search_input').value
				window.location.href = `{{ url_for('project.main_project_list') }}?k=${keyword}`
			}
			function reSearchData() {
				window.location.href = `{{ url_for('project.main_project_list') }}`
			}
			function jumpToPage(page) {
				window.location.href = `{{ url_for('project.main_project_list') }}?k={{keyword}}&pp={{per_page}}&p=${page}`
			}
		</script>
	</head>
	<body>
		<div class="box">
			<div class="box_header">
				<h3 class="box_title">主项目列表</h3>
				{% include 'base/user_info.html' %}
			</div>
			<div class="box_header">
				<div class="btn_box">
					<button type="button" class="btn btn-success btn-large" onclick="addProject()">新建项目</button>
				</div>
				<div class="search_box">
					<input type="text" title="" id="search_input" class="form-control" placeholder="请输入查询关键字" value="{{ keyword }}" />
					<button type="button" class="btn btn-info btn-large" onclick="searchData()">查询</button>
					<button type="button" class="btn btn-warning btn-large" onclick="reSearchData()">重置</button>
				</div>
			</div>

			<div class="box-body">
				<table class="table">
					<thead>
						<tr>
							<th width="120px">项目ID</th>
							<th width="350px">项目名称</th>
							<th>项目简介</th>
							<th width="300px">操作</th>
						</tr>
					</thead>
					<tbody>
						{% if project_list %} {% for project in project_list %}
						<tr data-id="{{project.id}}" data-p="{{project}}">
							<td class="project-name">{{ project.id }}</td>
							<td class="project-name">
								{{ project.project_name }}
								<input type="hidden" class="form-control" value="{{project.project_name}}" />
							</td>
							<td class="project-desc">
								{{ project.description }}
								<input type="hidden" class="form-control" value="{{project.description}}" />
							</td>
							<td>
								<button class="btn btn-info" onclick="goTo(`{{ url_for('project.sub_project_list', project_id=project.id) }}`)">子项目管理</button>
								<button class="btn btn-warning" onclick="editProject('{{ project.id }}')">编辑</button>
								<button class="btn btn-danger" onclick="confirmDelete('{{ project.id }}')">删除</button>
							</td>
						</tr>
						{% endfor %} {% else %}
						<tr>
							<td colspan="34">暂无数据</td>
						</tr>
						{% endif %}
					</tbody>
				</table>
				<div class="pagination">
					<div class="pagination-info">
						{% set total_pages = (total_count|int + per_page|int - 1)//per_page %}
						<span class="page"> 总共 {{ total_count }} 条数据，每页 {{ per_page }} 条，当前第 {{ page }} 页 / 共 {{ total_pages }} 页 </span>
					</div>
					<div class="pagination-links">
						{% if page > 1 %}
						<span class="page page-link" onclick="jumpToPage(1)">首页</span>
						{% endif %} {% if page > 1 %}
						<span class="page page-link" onclick="jumpToPage(`{{page - 1}}`)">上一页</span>
						{% endif %} {% set start_page = [1, page - 2]|max %} {% set end_page = [total_pages, page + 2]|min %} {% if start_page > 1 %}
						<span class="page page-link" onclick="jumpToPage(1)">1</span>
						{% if start_page > 2 %}
						<span class="page">...</span>
						{% endif %} {% endif %} {% for p in range(start_page, end_page + 1) %} {% if p == page %}
						<span class="page page-link active" onclick="jumpToPage(`{{ p }}`)">{{ p }}</span>
						{% else %}
						<span class="page page-link" onclick="jumpToPage(`{{ p }}`)">{{ p }}</span>
						{% endif %} {% endfor %} {% if end_page < total_pages %} {% if end_page < total_pages - 1 %}
						<span class="page">...</span>
						{% endif %}
						<span class="page page-link" onclick="jumpToPage(`{{ total_pages }}`)">{{ total_pages }}</span>
						{% endif %} {% if page < total_pages %}
						<span class="page page-link" onclick="jumpToPage(`{{ page+1 }}`)">下一页</span>
						{% endif %} {% if page < total_pages %}
						<span class="page page-link" onclick="jumpToPage(`{{ total_pages }}`)">末页</span>
						{% endif %}
					</div>
				</div>
			</div>
		</div>
		<div class="modal" id="modal-project">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<h3 class="modal-title"><span></span>项目</h3>
						<span class="close-btn" onclick="hide_modal('#modal-project')">&times;</span>
					</div>
					<div class="modal-body">
						<div class="form-group">
							<input type="hidden" id="project_id" class="form-control" />
							<div>
								<label for="project_name">项目名称：</label>
								<input type="text" id="project_name" class="form-control" placeholder="项目名称" required />
							</div>
							<div>
								<label for="project_desc">项目简介：</label>
								<textarea id="project_desc" class="form-control large" placeholder="项目简介"></textarea>
							</div>
						</div>
					</div>
					<div class="modal-footer">
						<button class="btn btn-success btn-large" onclick="saveProject()">保存</button>
						<button class="btn btn-warning btn-large" onclick="hide_modal('#modal-project')">取消</button>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
