<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>
