<section>
	<div class="title"><img src="/assets/images/button_location.gif" alt="Location" title="Location"></div>

	<div><b>
		{if user.Currently == "In Town" and town != nil}
			In {town.Name}
		{else}
			{user.Currently}
		{/if}
	</b></div>
	<div>{user.X}{if user.X < 0}W{else}E{/if}, {user.Y}{if user.Y < 0}S{else}N{/if}</div>

	<a href="javascript:open_map_popup()">View Map</a>

	{if user.Currently != "Fighting"}
		<form id="move-compass" action="/move" method="post" >
			{csrf}
			<button id="north" name="direction" value="0">North</button>
			<div class="mid">
				<button id="west" name="direction" value="3">West</button>
				<button id="east" name="direction" value="1">East</button>
			</div>
			<button id="south" name="direction" value="2">South</button>
		</form>
	{else}
		<img id="move-compass-disabled" src="/assets/images/compass.webp" alt="Can't run!" title="Can't run!">
	{/if}
</section>

<section>
	<div class="title"><img src="/assets/images/button_towns.gif" alt="Towns" title="Towns"></div>
	{if #_towns > 0}
		<i>Teleport to:</i>
		{for t in _towns}
			{if town != nil and t.Name == town.Name}
				<span>{t.Name} <i>(here)</i></span>
			{else}
				{if user.TP < t.TPCost}
					<span class="light">{t.Name}</span>
				{else}
					<a class="teleport-link" href="/teleport/{t.ID}" data-town="{t.Name}" data-cost="{t.TPCost}">{t.Name}</a>
				{/if}
			{/if}
		{/for}
	{else}
		<i>No town maps</i>
	{/if}
</section>

<section id="functions">
	<div class="title"><img src="/assets/images/button_functions.gif" alt="Functions" title="Functions"></div>
	<a href="/">Home</a>
	<a href="/forum">Forum</a>
	<a href="/change-password">Change Password</a>
	<a href="#">Log Out</a>
	<a href="/help">Help</a>
</section>

<script>
document.addEventListener('DOMContentLoaded', () => {
	const teleportModal = new ConfirmModal({
		linkSelector: '.teleport-link',
		messageGenerator: (link) => `Are you sure you want to teleport to ${link.dataset.town} for ${link.dataset.cost} TP?`,
		confirmText: 'Teleport',
		cancelText: 'Stay'
	})
})
</script>
