<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		* {
			padding: 0;
			margin: 0;
		}
		.main-content {
			width: 360px;
			font-family: 'Microsoft YaHei';
			font-family: "Microsoft YaHei";
			font-size: 20px;
			border-radius: 16px;
			font-weight: bold;
			background-color: #F2F2F2;
		}
		.header {
			height: 80px;
			display: flex;
			line-height: 40px;
		}
		.sec {
			margin: 15px;
			height: 50px;
			width: 50px;
			text-align: center;
			line-height: 50px;
			border-radius: 30px;
			border: #008272 3px solid;
			font-weight: normal;
		}
		.ship-list {
			display: flex;
			flex-direction: column;
			border-radius: 16px;
		}
		.ship-item {
			display: flex;
			height: 60px;
			line-height: 60px;
		}
		.ship-inf {
			flex: 1;
			display: flex;
		}
		.index {
			width: 60px;
			text-align: center;
			font-weight: bold;
		}
		.ship-level {
			width: 40px;
			text-align: center;
			display: inline-block;
		}
		.ship-name {
			text-align: center;
			display: inline-block;
		}
		.icon{
			width: 40px;
		}
		.icon img {
			display: block;
			width: 30px;
			height: 30px;
			margin: 15px 0;
		}
	</style>
	<body>
		<div class="main-content">
			<div class="header">
				<div class="sec">20s</div>
				<div class="header-text">
					<div>存在多条名字相似的船</div>
					<div>请在20秒内选择对应的序号</div>
				</div>
			</div>
			<div class="ship-list">
				{% for ship in data %}
				<div class="ship-item">
					<div class="index"></div>
					<div class="ship-inf">
						<div class="ship-level">{{ ship['Ship_Tier'] }}</div>
						<div class="icon">
							{% if ship['Ship_Type'] == 'Destroyer' %}
							<img src="https://hikari-resource.oss-cn-shanghai.aliyuncs.com/shipType_Icon/icon_sunk_destroyer.png">
							{% elif ship['Ship_Type'] == 'Cruiser' %}
							<img src="https://hikari-resource.oss-cn-shanghai.aliyuncs.com/shipType_Icon/icon_sunk_cruiser.png">
							{% elif ship['Ship_Type'] == 'Battleship' %}
							<img src="https://hikari-resource.oss-cn-shanghai.aliyuncs.com/shipType_Icon/icon_sunk_battleship.png">
							{% elif ship['Ship_Type'] == 'AirCarrier' %}
							<img src="https://hikari-resource.oss-cn-shanghai.aliyuncs.com/shipType_Icon/icon_sunk_aircarrier.png">
							{% elif ship['Ship_Type'] == 'Submarine' %}
							<img src="https://hikari-resource.oss-cn-shanghai.aliyuncs.com/shipType_Icon/icon_sunk_submarine.png">
							{% endif %}
						</div>
						<div class="ship-name">{{ ship['Ship_Name_Cn'] }}</div>
					</div>
				</div>
				{% endfor %}
			</div>
		</div>
	</body>
	
	<script>
		let index_doc = document.getElementsByClassName('index');
		for(let idx=0;idx<index_doc.length;idx++) {
			index_doc[idx].innerText = idx+1;
		}
	</script>
	
	<script>
		let arr_information = document.getElementsByClassName('ship-item');
		for(let i=0;i<arr_information.length;i++) {
			if(i%2 == 0 && i == (arr_information.length-1)) {
				arr_information[i].style.backgroundColor = "#E4E4E4";
				arr_information[i].style.borderBottomLeftRadius = "16px";
				arr_information[i].style.borderBottomRightRadius = "16px";
			} else if (i%2 == 0) {
				arr_information[i].style.backgroundColor = "#E4E4E4";
			}
		}
	</script>
	<script>
		let ship_level_doc = document.getElementsByClassName('ship-level');
		let level_number = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11"];
		let level_roma = ["I", "II", "III", "IV", "V", "VI", "VII", "VIII", "IX", "X", "★"];
		for(let k=0;k<ship_level_doc.length;k++) {
			ship_level_doc[k].innerText = level_roma[level_number.indexOf(ship_level_doc[k].innerText)];
		}
	</script>
</html>