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

{% block title %}BBS - Finishers{% endblock %}

{% block head %}
<link rel="stylesheet" href="{{ crate::find_hash("/public/styles/bbs/finishers.css") }}">
</link>
<script type="module" src="{{ crate::find_hash("/public/scripts/bbs/finishers.js") }}"></script>
{% endblock %}

{% block content %}
<div class="filters">
	<div class="row">{% include "components/bbs/char-filters.html" %}</div>
</div>

<table>
	<thead>
		<tr>
		{% for lvl in 1..=6u8 %}
			<th>LV {{lvl}}</th>
		{% endfor %}
		</tr>
	</thead>
	{% for char in Character::values() %}
		<tbody id="finishers{{char}}">
			{% for row in 1..=5u8 %}
				<tr>
					{% for lvl in 1..=6u8 %}
						{% match get_at(char, *lvl, *row) %}
							{% when Some with (val) %}
							<td class="finisher" style="color: {{val.color}};" data-goal="{{ val.goal }}">
								{{ val.name }}

								{% if val.has_top_path() %}
								<div class="path top"></div>
								{% endif %}

								{% if val.has_mid_path() %}
								<div class="path"></div>
								{% endif %}

								{% if val.has_bottom_path() %}
								<div class="path bottom"></div>
								{% endif %}
							</td>
							{% when None %}
							<td></td>
						{% endmatch %}
					{% endfor %}
				</tr>
			{% endfor %}
		</tbody>
	{% endfor %}
</table>

<div id="finisher-details">---</div>

{% endblock %}