{% load static %}

<head>
	<!-- Layui -->
	<script src = {% static "/layui/layui.js" %}></script>
	<link rel = "stylesheet" href = {% static "/layui/css/layui.css" %} type = "text/css" />

	<!-- 其他库 -->
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

	<!-- 样式 -->
	<link rel = "stylesheet" href = {% static "/experiment/css/experiment/figures.css" %} type = "text/css" />

</head>

<body>

<div class = "header">
	<div class = "decs">
		<p> 【Experiment id】 {{experiment.id}}</p>
	</div>

	<div class = "buts">
		<a class = "layui-icon" href = "/group/{{experiment.group.id}}" title = "返回"> &#xe65c;</a>
	</div>
</div>

<div class = "layui-tab">
  <ul class = "layui-tab-title">

  	<!--li class = "layui-this tab-head">ALL</li-->
	{% for name , fig in figs %}
		<li class = "tab-head {%ifequal name first_name%} layui-this {%endifequal%}">{{name}}</li>
	{% endfor %}
  </ul>
  <div class = "layui-tab-content">

  	{% for name , fig in figs %}
		<div class = "layui-tab-item {%ifequal name first_name%} layui-show {%endifequal%}">
			{{fig|safe}}
		</div>
	{% endfor %}
  </div>
</div>

</body>

<!-- 启用tab栏扩展 -->
<script>
	layui.use("element", function(){});
</script>

<script> //决定图片位置位置

	function adapt_position() { //动态调整位置
		$("img").each(function(){
			//注意没有显示的元素，$(this).width()是不准确的，这里要用element.width
			$(this).css("margin-left" , (($(".layui-show").width() - $(this)[0].width) / 2).toString() + "px")
		})
	}

	adapt_position()
	setInterval(adapt_position , 100) //不断调整位置
</script>