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

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

{% block head %}
	<style>
		.blue {
			background-color: #35a0a8;
		}

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

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

		.yellow {
			background-color: #d6cb35;
		}

		div.abilities {
			display: flex;

			& div {
				margin-right: 60px;
			}
		}

		div.route {
			display: flex;
			align-items: center;

			& div {
				display: flex;
				align-items: center;
			}

			& .disposition {
				width: 32px;
				height: 32px;
				margin-right: 5px;
				display: inline-block;
				vertical-align: middle;
			}

			& span {
				font-size: 18px;
			}

			& ul {
				list-style: disclosure-closed;
				line-height: 2.5;

				& li {
					display: list-item;
				}
			}
		}

		table.board {
			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;
				}

				&.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 %}
		<h1>{{+ board.spirit +}}</h1>

		<ul>
			<li>Total LP Needed: {{+ board.total_lp +}}</li>
			<li>Max Level Needed: {{+ board.max_level +}}</li>
		</ul>

		{% include "components/ddd/abilities.html" %}
		{% include "components/ddd/dispositions.html" %}
		{% include "components/ddd/board.html" %}
	{% endfor %}
{% endblock %}