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

{% block title %}KH3 - Food Simulator{% endblock %}

{% block head %}
	<style>{% include "components/kh3/style.css" %}</style>
	<script>{% include "components/kh3/script.js" %}</script>
{% endblock %}

{% block content %}
	<div id="stats">
		<svg width="360" height="430">
			{# clockwise points #}
			<polygon
				points="150,20 250,100 210,210 90,210 50,100"
				style="fill:gray;stroke:black;stroke-width:3"
			/>
			<polygon
				id="stats-mod"
				points="150,20 250,100 210,210 90,210 50,100"
				style="fill:rgba(152, 255, 224, 0.8)"
			/>
			<text x="134" y="15">STR</text>
			<text x="5" y="100">MAG</text>
			<text x="255" y="100">DEF</text>
			<text x="210" y="230">HP</text>
			<text x="60" y="230">MP</text>

			<text x="100" y="280">Strength</text>
			<text x="175" y="280" id="stat-str">+0</text>

			<text x="100" y="310">Magic</text>
			<text x="155" y="310" id="stat-mag">+0</text>

			<text x="100" y="340">Defense</text>
			<text x="170" y="340" id="stat-def">+0</text>

			<text x="100" y="370">HP</text>
			<text x="130" y="370" id="stat-hp">+0</text>

			<text x="100" y="400">MP</text>
			<text x="130" y="400" id="stat-mp">+0</text>

			<line x1="150" y1="120" x2="150" y2="20" stroke="black" />
			<line x1="150" y1="120" x2="50" y2="100" stroke="black" />
			<line x1="150" y1="120" x2="250" y2="100" stroke="black" />
			<line x1="150" y1="120" x2="210" y2="210" stroke="black" />
			<line x1="150" y1="120" x2="90" y2="210" stroke="black" />

			Sorry, your browser does not support inline SVG.
		</svg>

		<div id="hearty-meal-wrapper">
			<input type="checkbox" id="hearty-meal" name="hearty-meal" />
			<label for="hearty-meal">Hearty Meal</label>
		</div>
	</div>

	<h1>Starters</h1>
	<div class="recipes starters">
		{% for recipe in recipes.starters %}
			{% include "components/kh3/recipe.html" %}
		{% endfor %}
	</div>

	<h1>Soups</h1>
	<div class="recipes soups">
		{% for recipe in recipes.soups %}
			{% include "components/kh3/recipe.html" %}
		{% endfor %}
	</div>

	<h1>Fish Dishes</h1>
	<div class="recipes fish">
		{% for recipe in recipes.fish %}
			{% include "components/kh3/recipe.html" %}
		{% endfor %}
	</div>

	<h1>Meat Dishes</h1>
	<div class="recipes meat">
		{% for recipe in recipes.meat %}
			{% include "components/kh3/recipe.html" %}
		{% endfor %}
	</div>

	<h1>Deserts</h1>
	<div class="recipes deserts">
		{% for recipe in recipes.deserts %}
			{% include "components/kh3/recipe.html" %}
		{% endfor %}
	</div>
{% endblock %}