{include "layout.html"}

{block "content"}
<div class="town shop">
	<h3 class="mb-025">{town.Name} Shop</h3>
	<section>
		<p>Buying weapons will increase your Attack. Buying armor and shields will increase your Defense.</p>
		<p>Click an item name to purchase it.</p>
		<p>The following items are available in {town.Name}:</p>
	</section>

	<section>
		<table class="item-shop">
			{for item in itemlist}
				<tr>
					<td>
						{if item.Type == 1}
							<img src="/assets/images/icon_weapon.gif" alt="Weapon" title="Weapon">
						{/if}
						{if item.Type == 2}
							<img src="/assets/images/icon_armor.gif" alt="Armor" title="Armor">
						{/if}
						{if item.Type == 3}
							<img src="/assets/images/icon_shield.gif" alt="Shield" title="Shield">
						{/if}
					</td>
					<td>
						{if user.WeaponID == item.ID or user.ArmorID == item.ID or user.ShieldID == item.ID}
							<span class="light">{item.Name}</span>
						{else}
							{if user.Gold >= item.Value}
								<a class="buy-item" data-item="{item.Name}" data-cost="{item.Value}" href="/town/shop/buy/{item.ID}">{item.Name}</a>
							{else}
								<span class="light">{item.Name}</span>
							{/if}
						{/if}
					</td>
					<td>
						{item.Att}
						{if item.Type == 1}Attack{else}Defense{/if}
					</td>
					<td>
						{if user.WeaponID == item.ID or user.ArmorID == item.ID or user.ShieldID == item.ID}
							<span class="light">Already owned</span>
						{else}
							{if user.Gold >= item.Value}
								{item.Value}G
							{else}
								<span class="light">{item.Value}G (can't afford)</span>
							{/if}
						{/if}
					</td>
				</tr>
			{/for}
		</table>
	</section>

	<section>
		<p>If you've changed your mind, you may also return back to <a href="/town">town</a>.</p>
	</section>
</div>
{/block}

{block "scripts"}
<script>
document.addEventListener('DOMContentLoaded', () => {
	const shopModal = new ConfirmModal({
		linkSelector: '.buy-item',
		messageGenerator: (link) => `Are you sure you want to buy ${link.dataset.item} for ${link.dataset.cost}G?`,
		confirmText: 'Buy Now',
		cancelText: 'Nevermind'
	})
})
</script>
{/block}