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

{% block title %}BBS - Command Melding{% endblock %}

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

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

<table>
	<thead>
		<tr>
			<th rowspan="2">Character</th>
			<th rowspan="2">Command</th>
			<th rowspan="2">Ingredient A</th>
			<th rowspan="2">Ingredient B</th>
			<!-- <th rowspan="2">Type</th> -->
			<th rowspan="2">Chance</th>
			<th colspan="7">Abilities</th>
		</tr>
		<tr>
			{% for crystal in crystals %}
			<th class="crystal">{{ crystal }}</th>
			{% endfor %}
		</tr>
	</thead>
	<tbody>
		{% for cmd in commands %}
		{% for recipe in cmd.recipes %}
		<tr class="{{ recipe.get_unlock_chars() }}">
			<td>
				<div class="charlist">
					<!-- RGB moment -->
					<span class="terra">
						{% if recipe.can_unlock(Character::Terra) %}T{% endif %}
					</span>
					<span class="ventus">
						{% if recipe.can_unlock(Character::Ventus) %}V{% endif %}
					</span>
					<span class="aqua">
						{% if recipe.can_unlock(Character::Aqua) %}A{% endif %}
					</span>
				</div>
			</td>
			<td class="{{ cmd.category }}">{{ cmd.name }}</td>
			<td>{{ recipe.ingredients.0 }}</td>
			<td>{{ recipe.ingredients.1 }}</td>
			<!-- <td>{{ recipe.type }}</td> -->
			<td>{{ recipe.chance }}%</td>
			{% for crystal in crystals %}
			{% let ability = recipe.get_ability(crystal) %}
			<td>
				{% if ability.is_some() %}
				{{ ability.unwrap().name }}
				{% else %}
				-
				{% endif %}
			</td>
			{% endfor %}
		</tr>
		{% endfor %}
		{% endfor %}
	</tbody>
</table>
{% endblock %}
