<!DOCTYPE html>

{%load static%}

<head>
	<!-- 外部库 -->
	<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/animejs/3.2.0/anime.min.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

	<link rel = "stylesheet" href = {% static "/layui/css/layui.css" %} type = "text/css" />
	<link rel = "stylesheet" href = {% static "/experiment/css/scrollbar.css" %} type = "text/css" />

	<script src = "{% static "Highcharts/highcharts.src.js" %} "></script>
	<script src = "{% static "Highcharts/themes/grid-light.js" %} "></script>

	<!--YUI-->
	<link rel = "stylesheet" href = {% static "YUI/css/YUI.css" %} type = "text/css" />
	<script src="{% static "YUI/YUI.js" %}"></script>
	<script src="{% static "YUI/YUI-components.js" %}"></script>
	<script src="{% static "YUI/YUI-css-complement.js" %}"></script>

	<!--speical css-->
	<link rel = "stylesheet" href = {% static "/experiment/css/project/project.css" %} type = "text/css" />
	<link rel = "stylesheet" href = {% static "/experiment/css/project/left_part.css" %} type = "text/css" />
	<link rel = "stylesheet" href = {% static "/experiment/css/project/right_part.css" %} type = "text/css" />
	<link rel = "stylesheet" href = {% static "/experiment/css/project/header.css" %} type = "text/css" />
	<link rel = "stylesheet" href = {% static "/experiment/css/project/layer.css" %} type = "text/css" />
	<link rel = "stylesheet" href = {% static "/experiment/css/layer-skin.css" %} type = "text/css" />
	<link rel = "stylesheet" href = {% static "/experiment/css/utils.css" %} type = "text/css" />

</head>

<script>
	YUI_init()
</script>

<body> <div id = "main">

	<!--顶部界面-->
	<div class = "header"> 
		<div class = "left-header">
			<p class = "project-name Y-text-center Y-font-title">【项目】{{project.name}}</p>
		</div>

		<div class = "middle-header">
			<input 
				class 		= "path-input to-save" 
				name 		= "project-path" 
				placeholder = "项目位置" 
				value 		= "{{project.path}}"
				autocomplete= "off"
			/>

			<textarea 
				class 		= "project-intro-input to-save" 
				name 		= "project-intro" 
				placeholder = "项目介绍"
			>{{project.intro}}</textarea>
		</div>
		
		<div class = "right-header">

			<form action = "/project/{{project.id}}/new_group" method = "post">
				{% csrf_token %}

				<y-text-input
					type 		= "text" 
					name 		= "name" 
					class 		= "new-group-name-input" 
					placeholder = "新实验组名"
					autocomplete= "off"
				></y-text-input>
				<y-button 
					class 		= "new-group-button"
					title 		= "新建" 
				><i class = "layui-icon">&#xe624;</i></y-button>
			</form>

			<div class = "button-box Y-stack-x">
				<y-button class = "button Y-text-center layui-icon" onclick = "javascript:window.location.href='/'"
						  title = "返回">
					&#xe65c;
				</y-button>
				<y-button class = "button Y-text-center layui-icon" @y-button-click.self = "save_config()"
						  title = "保存">
					&#xe681;
				</y-button>
				<y-button class = "button Y-text-center layui-icon" @y-button-click.self = "layer_create_expe()"
						  title = "新建实验">
					&#xe609;
				</y-button>
				<y-button class = "button Y-text-center layui-icon" @y-button-click.self = "layer_add_cfgfile()"
						  title = "设置config文件">
					&#xe6b2;
				</y-button>
				<y-button class = "button Y-text-center layui-icon" @y-button-click.self = "layer_set_cmd()"
						  title = "设置默认命令">
					&#xe620;
				</y-button>
				<y-button class = "button Y-text-center layui-icon" @y-button-click.self = "layer_search()"
						  title = "超参数搜索">
					&#xe714;
				</y-button>

			</div>
		</div>
	</div>

	<!--下方界面-->
	<div class = "content">

		<!--左侧界面-->
		<div class = "left-part">
			<div class = "left-title Y-font-title Y-text-center">
				<p>实验组列表</p>
			</div>

			<div class = "left-box Y-stack-y">
			{% for group in groups %}
				<y-option 
					class 		= "group-option Y-font-shorttitle"
					href 		= "/group/{{group.id}}"
					:group_id 	= "{{group.id}}"
					@y-mouse-enter 	= "group_enter('{{group.id}}')"

					{%if group.name == 'default' %} 
						@y-created 	= "active_group_id = '{{group.id}}'"
					{%endif%}

					:always_active 	= "active_group_id == '{{group.id}}'"

				>{{group.name}}
				</y-option>
			{% endfor %}
			</div>
		</div>

		<!--右侧界面-->
		<div class = "right-part">

			{% for group in groups%}
			<div 
				class = "right-content"
				v-show = "active_group_id == '{{group.id}}'"
			>
				<p class = "group-name Y-font-title Y-text-center">【实验组】{{group.name}}</p>

				<div class = "chart-box">
					<div id = "chart-container-{{group.id}}"></div>
				</div>

				<textarea 
					class = "group-intro to-save Y-font-default" 
					name  = "group-intro-{{group.id}}" 
					placeholder = "实验组介绍"
					autocomplete= "off"
				>{{group.intro}}</textarea>

			</div>
			{% endfor %}

		</div>

	</div>
</div> </body>

<!--其他脚本-->
<script src = {% static "/layui/layui.js" %}></script>

<script src = "{% static "experiment/js/utils.js" %} "></script>
<script src = "{% static "experiment/js/project/project.js" %} "></script>
<script src = "{% static "experiment/js/project/make_chart.js" %} "></script>
{% include "./scripts.html" %}
