{include "layout.html"}

{block "content"}
<div class="town shop">
	<h3 class="mb-025">{town.Name} Maps</h3>
	<section>
		<p>Buying maps will put the town in your Travel To box, and it won't cost you as many TP to get there.</p>
		<p>Click a town name to purchase its map.</p>
	</section>

	<section>
		<table class="shop">
			{for map in maplist}
				<tr>
					<td>
						{if map.Owned == false}
							{if user.Gold >= map.Cost}
								<a class="buy-item" data-town="{map.Name}" data-cost="{map.Cost}" href="/town/maps/buy/{map.ID}">{map.Name}</a>
							{else}
								<span class="light">{map.Name}</span>
							{/if}
						{else}
							{map.Name}
						{/if}
					</td>
					<td>
						{if map.Owned == false}
							{if user.Gold >= map.Cost}
								{map.Cost}G
							{else}
								{map.Cost}G <span class="light">(can't afford)</span>
							{/if}
						{else}
							<span>{map.X}, {map.Y}</span><br>
							<span>TP Cost: {map.TP}</span>
						{/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 the map to ${link.dataset.town} for ${link.dataset.cost}G?`,
		confirmText: 'Buy Now',
		cancelText: 'Nevermind'
	})
})
</script>
{/block}