{% extends "layouts/base.html" %}

{% block title %}Abilities{% endblock %}

{% block head %}
	<style>
		table {
			width: inherit;

			td {
				width: 120px;
				height: 100px;
			}

			td.slot-w {
				height: 20px;
			}

			td.slot-h {
				width: 20px;
			}
	}
	</style>
	<script>
		function debounce(callback, wait = 300) {
			let timeoutId = null;
			return (...args) => {
				window.clearTimeout(timeoutId);
				timeoutId = window.setTimeout(() => {
					callback(...args);
				}, wait);
			};
		}
	</script>
{% endblock %}

{% block content %}
	{% for board in boards %}
		Total LP Needed: {{+ board.total_lp +}}
		<br>
		Max Level Needed: {{+ board.max_level +}}
		<br><br>
		Stats:
		<ul>
			{% for val in board.stats %}
				<li>x{{+ val.0 +}} {{+ val.1 +}}</li>
			{% endfor %}
		</ul>

		Support:
		<ul>
			{% for support in board.get_supports() %}
				<li>{{ support.name }}</li>
			{% endfor %}
		</ul>

		<table>
			<tbody>
				<tr>
					<td class="slot-w slot-h"></td>
					{% for x in 1..board.get_size().0 + 1 %}
						<td class="slot-w">{{ board.get_char(x) }}</td>
					{% endfor %}
				</tr>
				{% for y in 1..board.get_size().1 + 1 %}
					<tr>
						<td class="slot-h">{{ y }}</td>
						{% for x in 1..board.get_size().0 + 1 %}
							{% let ability = board.get_ability_at(x, y) %}
							{% match ability %}
								{% when Some with (val) %}
								<td colspan="1">{{ val.name }}</td>
								{% when None %}
								<td colspan="1"></td>
							{% endmatch %}
						{% endfor %}
					</tr>
				{% endfor %}
			</tbody>
		</table>
	{% endfor %}
{% endblock %}