{% set card = load_data(path="content/ptcg/cards/" ~ id ~ ".toml") %}

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

<div class="ptcg-card">
	<picture>
		<source srcset="{{ get_url(path="ptcg/" ~ id ~ ".webp") }}" type="image/webp">
		<source srcset="{{ get_url(path="ptcg/" ~ id ~ ".png") }}" type="image/png">
		<img src="{{ get_url(path="ptcg/" ~ id ~ ".png") }}" loading="lazy">
	</picture>
	<div class="card-info">
		{% if card.kind == "pokemon" %}
			<p class="type">{{ trans(key="ptcg-pokemon", lang=lang)}} > {{ trans(key="ptcg-"~card.type, lang=lang) }}</p>
			<p class="name">
				<span>{{ card.name }}</span>
				<span>{{ card.hp }} {{ card.element }}</span>
			</p>
			{% if card.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.ability %}
				<p class="ability">
					<span class="ability-tag">{{ trans(key="ptcg-ability", lang=lang) }}:</span>
					<span class="ability-name">{{ card.ability.name }}</span>
					<br>
					<span class="ability-effect">{{ card.ability.effect }}</span>
				</p>
			{% endif %}
			{% for attack in card.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.vstar %}
				<div class="vstar">
					<span class="vstar-tag">{{ trans(key="ptcg-vstar", lang=lang) }}</span>
					{% if card.vstar.ability %}
						<p class="ability">
							<span class="ability-tag">{{ trans(key="ptcg-ability", lang=lang) }}:</span>
							<span class="ability-name">{{ card.vstar.ability.name }}</span>
							<br>
							<span class="ability-effect">{{ card.vstar.ability.effect }}</span>
						</p>
					{% endif %}
					{% if card.vstar.attack %}
						<div class="attack">
							<div>
								<span class="attack-cost">{{ card.vstar.attack.cost }}</span>
								<span class="attack-name">{{ card.vstar.attack.name }}</span>
								<span class="attack-damage">{%if card.vstar.attack.damage %}{{ card.vstar.attack.damage }}{% endif %}</span>
							</div>
							{%if card.vstar.attack.effect %}
							<div class="attack-effect">{{ card.vstar.attack.effect }}</div>
							{% endif %}
						</div>
					{% endif %}
				</div>
			{% endif %}
			{% if card.rulebox %}
				<p class="rule">
					<span class="rulebox-name">{{ trans(key="ptcg-"~card.rulebox~"-rule", lang=lang) }}</span>
					{{ trans(key="ptcg-"~card.rulebox~"-rule-text", lang=lang) }}
				</p>
			{% endif %}
		{% elif card.kind == "trainer" %}
			<p class="type">{{ trans(key="ptcg-trainer", lang=lang) }} > {{ trans(key="ptcg-"~card.type, lang=lang) }}</p>
			<p class="name">{{ card.name }}</p>
			{% if card.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.effect }}</p>
			<p class="rule">{{ trans(key="ptcg-"~card.type~"-rule", lang=lang) }}</p>
		{% elif card.kind == "energy" %}
			<p class="type">{{ trans(key="ptcg-energy", lang=lang) }} {{ trans(key="ptcg-energy-"~card_data.type, lang=lang) }}</p>
			<p class="name">{{ card.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.effect %}
				<p class="effect">{{ card.effect }}</p>
			{% endif %}
		{% endif %}
	</div>
</div>