{% for i in 0..2 %}
	{% let stats = recipe.stats(i == 1) %}
	<div class="recipe" data-stats="{{ stats }}">
		<h1 class="title">{{ recipe.name }} {% if loop.last %}+{% endif %}</h1>

		<div class="ingredients">
			<h2>Ingredients</h2>
			<ul>
				{% for ingredient in recipe.ingredients %}
					<li>{{ ingredient }}</li>
				{% endfor %}
			</ul>
		</div>

		<div class="stats">
			<h2>Stats</h2>
			<table>
				<thead>
					<tr>
						<th scope="col">STR</th>
						<th scope="col">MAG</th>
						<th scope="col">DEF</th>
						<th scope="col">HP</th>
						<th scope="col">MP</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>{{ stats.str }}</td>
						<td>{{ stats.mag }}</td>
						<td>{{ stats.def }}</td>
						<td>{{ stats.hp }}</td>
						<td>{{ stats.mp }}</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
{% endfor %}