{% 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>{{ 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 %}