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

{% block title %}KH1 - Sythensis{% endblock %}

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

{% block content %}
	<div id="mats"></div>
	<div id="recipes">
		{% for recipe in data.recipes %}
			<div class="recipe-wrapper">
				<input
					type="checkbox"
					id="recipe-{{ loop.index }}"
					name="recipe-{{ loop.index }}"
					class="recipe"
				/>
				<label for="recipe-{{ loop.index }}">
					<img
						src="../public/assets/materials/generic.webp"
						width="16"
						height="16"
					/>{{ recipe.result }}
					<ul>
						{% for item in recipe.items %}
							<li
								data-synth-item-name="{{ item.name }}"
								data-synth-item-amount="{{ item.amount }}"
							>
								{{ item.name +}} x{{ item.amount }}
							</li>
						{% endfor %}
					</ul>
				</label>
			</div>
		{% endfor %}
	</div>
{% endblock %}