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

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

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

			td {
				width: 120px;
				height: 100px;
				position: relative;
				overflow: hidden;

				& span {
					position: inherit;
					z-index: 10;
					color: black;
				}

				& .slot {
					width: 70%;
					height: 70%;
					position: relative;
					left: 15px;
					background-color: #cbf;
					z-index: 10;
					align-content: center;
					font-size: 14px;
				}

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

				&.slot-h {
					width: 20px;
				}

				&.start .slot {
					background-color: #dcbf7e;
				}

				&.cyan {
					background-color: #35a0a8;
				}

				&.purple {
					background-color: #992a9b;
				}

				&.green {
					background-color: #7ecf50;
				}

				&.north.east.south.west .path::after {
					content: "┼";
				}

				&.east.south.west .path::after {
					content: "┬";
				}

				&.east.north.west .path::after {
					content: "┴";
				}

				&.north.south.west .path::after {
					content: "┤";
				}

				&.north.south.east .path::after {
					content: "├";
				}

				&.south.east .path::after {
					content: "┌";
				}

				&.south.west .path::after {
					content: "┐";
				}

				&.north.west .path::after {
					content: "┘";
				}

				&.north.east .path::after {
					content: "└";
				}

				&.east.west .path::after {
					content: "─";
				}

				&.north.south .path::after {
					content: "│";
				}

				&.west .path::after {
					content: "╴";
				}

				&.east .path::after {
					content: "╶";
				}

				&.south .path::after {
					content: "╷";
				}

				&.north .path::after {
					content: "╵";
				}
			}
		}

		.path {
			position: absolute;
			top: -70px;
			left: 0;
			font-size: 200px;
			width: 100%;
			height: 100%;
			z-index: 0;
			/*color: #3c3c3c;*/
			color: #ccbbff;
		}
	</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 %}
		Spirit: {{+ board.spirit +}}
		<br />
		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"
									class="{{ val.get_slot_details(board) }}"
								>
									<div class="slot">
										<span>{{ val.name }}</span>
										{% match val.type %}
											{% when AbilityType::Checkpoint %}
											<br />
											<span>{{ val.price }}</span>
											{% when _ %}
										{% endmatch %}
									</div>
									<div class="path"></div>
								</td>
								{% when None %}
								<td colspan="1"></td>
							{% endmatch %}
						{% endfor %}
					</tr>
				{% endfor %}
			</tbody>
		</table>
	{% endfor %}
{% endblock %}