{% set deck = load_data(path="content/ptcg/decks/" ~ name ~ ".toml") %}

{% if nth == 1 %}
<script src="{{ get_url(path='ptcg.js') }}" async></script>
{% if config.mode == "serve" %}
<script src="{{ get_url(path='ptcg-icons.js') }}" async></script>
{% endif %}
{% endif %}

{% set pokemon_count = 0 %}
{% for card in deck.pokemon %}
	{% set_global pokemon_count = pokemon_count + card.amount %}
{% endfor %}
{% set trainers_count = 0 %}
{% for card in deck.trainers %}
	{% set_global trainers_count = trainers_count + card.amount %}
{% endfor %}
{% set energies_count = 0 %}
{% for card in deck.energies %}
	{% set_global energies_count = energies_count + card.amount %}
{% endfor %}


<div class="ptcg-deck" id="deck-{{ nth }}">
	<h1>{{ deck.name }} ({{ pokemon_count + trainers_count + energies_count }})</h1>
	<h2>Pokémon ({{ pokemon_count }})</h2>
	{% for card in deck.pokemon %}
	{% set card_data = load_data(path="content/ptcg/cards/" ~ card.id ~ ".toml") %}
		<div
			id="pokemon-{{loop.index}}"
			class="ptcg-label{% if loop.first %} selected{% endif %}"
		  aria-selected="{{ loop.first }}" 
			aria-controls="tab-pokemon-{{ loop.index }}">
			{{ card.amount}} {{ card_data.name }}
		</div>
	{% endfor %}
	<h2>{{ trans(key="ptcg-trainers", lang=lang) }} ({{ trainers_count }})</h2>
	{% for card in deck.trainers %}
	{% set card_data = load_data(path="content/ptcg/cards/" ~ card.id ~ ".toml") %}
		<div
			id="trainer-{{loop.index}}"
			class="ptcg-label"
		  aria-selected="false" 
			aria-controls="tab-trainer-{{ loop.index }}">
			{{ card.amount}} {{ card_data.name }}
		</div>
	{% endfor %}
	<h2>{{ trans(key="ptcg-energies", lang=lang) }} ({{ energies_count }})</h2>
	{% for card in deck.energies %}
	{% set card_data = load_data(path="content/ptcg/cards/" ~ card.id ~ ".toml") %}
		<div
			id="energy-{{loop.index}}"
			class="ptcg-label"
		  aria-selected="false" 
			aria-controls="tab-energy-{{ loop.index }}">
			{{ card.amount}} {{ card_data.name }}
		</div>
	{% endfor %}
	{% for card in deck.pokemon %}
	{% set card_data = load_data(path="content/ptcg/cards/" ~ card.id ~ ".toml") %}
		<div id="tab-pokemon-{{ loop.index }}" 
				 class="ptcg-tab-content{% if loop.first %} selected{% endif %}" 
				 role="tabpanel" 
				 aria-hidden="{{ not loop.first }}">
			<picture>
				<source srcset="{{ get_url(path="ptcg/" ~ card.id ~ ".webp") }}" type="image/webp">
				<source srcset="{{ get_url(path="ptcg/" ~ card.id ~ ".png") }}" type="image/png">
				<img src="{{ get_url(path="ptcg/" ~ card.id ~ ".png") }}" loading="lazy">
			</picture>
			<p class="type">{{ trans(key="ptcg-pokemon", lang=lang)}} > {{ trans(key="ptcg-"~card_data.type, lang=lang) }}</p>
			<p class="name">
				<span>{{ card_data.name }}</span>
				<span>{{ card_data.hp }} {{ card_data.element }}</span>
			</p>
			{% if card_data.tera %}
				<p class="tera">
					<span class="tera-tag">{{ trans(key="ptcg-tera", lang=lang) }}</span>
					{{ trans(key="ptcg-tera-text", lang=lang) }}
				</p>
			{% endif %}
			{% if card_data.ability %}
				<p class="ability">
					<span class="ability-tag">{{ trans(key="ptcg-ability", lang=lang) }}:</span>
					<span class="ability-name">{{ card_data.ability.name }}</span>
					<br>
					<span class="ability-effect">{{ card_data.ability.effect }}</span>
				</p>
			{% endif %}
			{% for attack in card_data.attacks %}
				<div class="attack">
					<div>
						<span class="attack-cost">{{ attack.cost }}</span>
						<span class="attack-name">{{ attack.name }}</span>
						<span class="attack-damage">{%if attack.damage %}{{ attack.damage }}{% endif %}</span>
					</div>
					{%if attack.effect %}
					<div class="attack-effect">{{ attack.effect }}</div>
					{% endif %}
				</div>
			{% endfor %}
			{% if card_data.vstar %}
				<div class="vstar">
					<span class="vstar-tag">{{ trans(key="ptcg-vstar-power", lang=lang) }}</span>
					{% if card_data.vstar.ability %}
						<p class="ability">
							<span class="ability-tag">{{ trans(key="ptcg-ability", lang=lang) }}:</span>
							<span class="ability-name">{{ card_data.vstar.ability.name }}</span>
							<br>
							<span class="ability-effect">{{ card_data.vstar.ability.effect }}</span>
						</p>
					{% endif %}
					{% if card_data.vstar.attack %}
						<div class="attack">
							<div>
								<span class="attack-cost">{{ card_data.vstar.attack.cost }}</span>
								<span class="attack-name">{{ card_data.vstar.attack.name }}</span>
								<span class="attack-damage">{%if card_data.vstar.attack.damage %}{{ card_data.vstar.attack.damage }}{% endif %}</span>
							</div>
							{%if card_data.vstar.attack.effect %}
							<div class="attack-effect">{{ card_data.vstar.attack.effect }}</div>
							{% endif %}
						</div>
					{% endif %}
				</div>
			{% endif %}
			{% if card_data.rulebox %}
				<p class="rule">
					<span class="rulebox-name">{{ trans(key="ptcg-"~card_data.rulebox~"-rule", lang=lang) }}</span>
					{{ trans(key="ptcg-"~card_data.rulebox~"-rule-text", lang=lang) }}
				</p>
			{% endif %}
		</div>
	{% endfor %}
	{% for card in deck.trainers %}
	{% set card_data = load_data(path="content/ptcg/cards/" ~ card.id ~ ".toml") %}
		<div id="tab-trainer-{{ loop.index }}" 
				 class="ptcg-tab-content" 
				 role="tabpanel" 
				 aria-hidden="{{ not loop.first }}">
			<picture>
				<source srcset="{{ get_url(path="ptcg/" ~ card.id ~ ".webp") }}" type="image/webp">
				<source srcset="{{ get_url(path="ptcg/" ~ card.id ~ ".png") }}" type="image/png">
				<img src="{{ get_url(path="ptcg/" ~ card.id ~ ".png") }}" loading="lazy">
			</picture>
			<p class="type">{{ trans(key="ptcg-trainer", lang=lang) }} > {{ trans(key="ptcg-"~card_data.type, lang=lang) }}</p>
			<p class="name">{{ card_data.name }}</p>
			{% if card_data.acespec %}
				<p class="acespec">
					<span class="acespec-tag">{{ trans(key="ptcg-acespec", lang=lang) }}</span>
					{{ trans(key="ptcg-acespec-text", lang=lang) }}
				</p>
			{% endif %}
			<p class="effect">{{ card_data.effect }}</p>
			<p class="rule">{{ trans(key="ptcg-"~card_data.type~"-rule", lang=lang) }}</p>
		</div>
	{% endfor %}
	{% for card in deck.energies %}
	{% set card_data = load_data(path="content/ptcg/cards/" ~ card.id ~ ".toml") %}
		<div id="tab-energy-{{ loop.index }}" 
				 class="ptcg-tab-content" 
				 role="tabpanel" 
				 aria-hidden="{{ not loop.first }}">
			<picture>
				<source srcset="{{ get_url(path="ptcg/" ~ card.id ~ ".webp") }}" type="image/webp">
				<source srcset="{{ get_url(path="ptcg/" ~ card.id ~ ".png") }}" type="image/png">
				<img src="{{ get_url(path="ptcg/" ~ card.id ~ ".png") }}" loading="lazy">
			</picture>
			<p class="type">{{ trans(key="ptcg-energy", lang=lang) }} {{ trans(key="ptcg-energy-"~card_data.type, lang=lang) }}</p>
			<p class="name">{{ card_data.name }}</p>
			{% if card_data.acespec %}
				<p class="acespec">
					<span class="acespec-tag">{{ trans(key="ptcg-acespec", lang=lang) }}</span>
					{{ trans(key="ptcg-acespec-text", lang=lang) }}
				</p>
			{% endif %}
			{% if card_data.effect %}
				<p class="effect">{{ card_data.effect }}</p>
			{% endif %}
		</div>
	{% endfor %}
</div>