{include "layout.html"}

{block "content"}
<div id="battle-window">
	<h2>Fighting {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}">
</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">
	<div class="mb-05">
		<button class="btn btn-primary">Attack</button>
	</div>
	{if user.Spells != ""}
		<select id="spell-select" class="styled-select">
			{for spell in spells}
				<option value="{spell.ID}">({spell.MP} MP) {spell.Name}</option>
			{/for}
		</select>

		<button class="btn btn-blue">Spell</button>
	{/if}
</form>
{/block}