{% extends "layouts/base.html" %}

{% block title %}KH3 - Pro Codes Simulator{% endblock %}

{% block head %}
	<link rel="stylesheet" href="{{ crate::find_hash("/public/styles/kh3/pro-codes-sim.css") }}"></link>
	<script
		type="module"
		src="{{ crate::find_hash("/public/scripts/kh3/pro-codes-sim.js") }}"
	></script>
{% endblock %}

{% block content %}
	<div id="score">
		<h1 id="totalMerit">Merit: 0</h1>
		<h2 id="totalStars">Stars: 0</h2>
	</div>
	<div id="codes">
		<div class="slot">
			<button onclick="toggleAllCodes()">Toggle All</button>
		</div>
		{% for code in pro_codes %}
			<div class="slot">
				<input type="checkbox" id="{{code.id()}}" autocomplete="off" data-stars="{{code.stars}}" onclick="toggleCode(this)">
				<label for="{{code.id()}}">{{code.name}}</label>
				<span>
				{% for star in 0..5 %}
					{% if star < code.stars %}★{% else %}☆{% endif %}
				{% endfor %}
				</span>
			</div>
		{% endfor %}
	</div>
	<div id="fights">
		<div class="inset-box-shadow"></div>
		<div class="scrollable">
		{% for fight in fights %}
			<div class="slot">
				<button onclick="markFight(this)" data-enemy="{{fight.enemy}}" data-merit-source="{{fight.source()}}" data-base-merit="{{fight.merit}}">Mark</button>
				<span>{{fight.enemy}}</span>
			</div>
		{% endfor %}
		</div>
	</div>
{% endblock %}