{include "layout.html"}

{block "content"}
<div id="battle-window">
	<h2>{monster.Name}</h2>
	<h3>Level {monster.Level}</h3>

	<img id="monster-image" src="/assets/images/monsters/{monster.Name}.png" alt="{monster.Name}" title="{monster.Name}" onerror="this.onerror=null; this.src='/assets/images/monsters/Arcane Crystal.png';">
</div>

<div>{action}</div>
<div>{mon_action}</div>

<span>{fight.MonsterHP}/{fight.MonsterMaxHP}</span>
<div id="monster-health" class="mb-1">
	<div class="bar {mon_hpcol}" style="width: {mon_hppct}%;"></div>
</div>

<form action="/fight" method="post">
	{csrf}

	<div class="mb-05">
		<button type="submit" name="action" value="attack" class="btn btn-primary">Attack</button>
	</div>
	{if user.Spells != ""}
		<div class="mb-05">
			<select id="spell-select" class="styled-select" name="spell_id">
				{for spell in spells}
					<option value="{spell.ID}">({spell.MP} MP) {spell.Name}</option>
				{/for}
			</select>

			<button type="submit" name="action" value="spell" class="btn btn-blue">Spell</button>
		</div>
	{/if}
	<div>
		<button type="submit" name="action" value="run" class="btn">Run</button>
	</div>
</form>
{/block}