{% INCLUDE 'overall_header.html' %}
{% INCLUDECSS '@spiderpiggy_virtualshop/virtualshop.css' %}

<div class="virtualshop-page virtualshop-surface">
	<a href="{{ U_VIRTUALSHOP }}" class="virtualshop-back">‹ {{ lang('VIRTUALSHOP_BACK_TO_SHOP') }}</a>

	<div class="virtualshop-inventory-hero">
		<div>
			<span class="virtualshop-kicker">{{ lang('VIRTUALSHOP_PROFILE_ITEMS') }}</span>
			<h2>{{ lang('VIRTUALSHOP_MY_ITEMS') }}</h2>
			<p>{{ lang('VIRTUALSHOP_INVENTORY_EXPLAIN') }}</p>
		</div>
	</div>

	<div class="virtualshop-grid inventory virtualshop-inventory-grid">
	{% for item in purchases %}
		<article class="virtualshop-card rarity-{{ item.RARITY_CLASS }}{% if item.S_EQUIPPED %} equipped{% endif %}">
			<div class="virtualshop-image-wrap"><img src="{{ item.ITEM_IMAGE }}" alt="{{ item.ITEM_NAME }}"></div>
			<div class="virtualshop-card-body">
				<div class="virtualshop-card-top"><span class="virtualshop-badge">{{ item.ITEM_CATEGORY }}</span><span class="virtualshop-badge rarity">{{ item.ITEM_RARITY }}</span>{% if item.S_EQUIPPED %}<span class="virtualshop-badge equipped">{{ lang('VIRTUALSHOP_EQUIPPED_BADGE') }}</span>{% endif %}</div>
				<h3>{{ item.ITEM_NAME }}</h3>
				<p>{{ item.ITEM_DESCRIPTION }}</p>
				<div class="virtualshop-meta"><span>{{ item.ITEM_TYPE }}</span><span>{{ item.PURCHASE_TIME }}</span></div>
				{% if item.S_PASSIVE %}<div class="virtualshop-passive">{{ item.PASSIVE_LABEL }}{% if item.UPKEEP_POINTS != '0.00' %}<br>{{ lang('VIRTUALSHOP_UPKEEP_LABEL') }}{{ lang('COLON') }} -{{ item.UPKEEP_POINTS }} {{ VIRTUALSHOP_POINTS_NAME }} / {{ lang('VIRTUALSHOP_DAY') }}{% endif %}</div>{% endif %}{% if item.S_PROTECTED %}<div class="virtualshop-passive">{{ lang('VIRTUALSHOP_PROTECTED_ITEM') }}</div>{% endif %}
				{% if S_OWNER %}
				<div class="virtualshop-actions">
					<form method="post" action="{{ item.U_EQUIP }}"><input class="button button2" type="submit" name="submit" value="{% if item.S_EQUIPPED %}{{ lang('VIRTUALSHOP_UNEQUIP') }}{% else %}{{ lang('VIRTUALSHOP_EQUIP') }}{% endif %}">{{ S_FORM_TOKEN }}</form>
					{% if item.S_MYSTERY_BOX %}<form method="post" action="{{ item.U_OPEN_BOX }}"><input class="button button1" type="submit" name="submit" value="{{ lang('VIRTUALSHOP_OPEN_BOX') }}">{{ S_FORM_TOKEN }}</form>{% endif %}
					{% if not item.S_PROTECTED %}<form method="post" action="{{ item.U_SELL }}" title="{{ item.SELL_LABEL }}"><input class="button button2 virtualshop-sell-button" type="submit" name="submit" value="{{ lang('VIRTUALSHOP_SELL') }}">{{ S_FORM_TOKEN }}</form>{% endif %}
				</div>
				{% if not item.S_PROTECTED %}<form class="virtualshop-gift-form" method="post" action="{{ item.U_GIFT }}">
					<input type="text" name="gift_username" placeholder="{{ lang('VIRTUALSHOP_GIFT_TO') }}">
					<textarea name="gift_message" rows="2" placeholder="{{ lang('VIRTUALSHOP_GIFT_MESSAGE') }}"></textarea>
					<input class="button button1 virtualshop-gift-button" type="submit" name="submit" value="{{ lang('VIRTUALSHOP_GIFT') }}">
					{{ S_FORM_TOKEN }}
				</form>{% endif %}
				{% endif %}
			</div>
		</article>
	{% else %}
		<div class="panel"><div class="inner"><p>{{ lang('VIRTUALSHOP_NO_ITEMS') }}</p></div></div>
	{% endfor %}
	</div>


	{% if S_OWNER %}
	<div class="virtualshop-inventory-hero">
		<div>
			<span class="virtualshop-kicker">{{ lang('VIRTUALSHOP_UPGRADES') }}</span>
			<h2>{{ lang('VIRTUALSHOP_UPGRADES') }}</h2>
			<p>{{ lang('VIRTUALSHOP_UPGRADES_EXPLAIN') }}</p>
		</div>
	</div>

<div class="virtualshop-grid inventory virtualshop-inventory-grid">
{% for recipe in upgrade_recipes %}
	<article class="virtualshop-card">
		<div class="virtualshop-image-wrap">
			<img src="{{ recipe.RESULT_IMAGE }}" alt="{{ recipe.RESULT_NAME }}">
		</div>

		<div class="virtualshop-card-body">
			<div class="virtualshop-card-top">
				<span class="virtualshop-badge rarity">{{ recipe.RESULT_RARITY }}</span>
			</div>

			<h3>{{ recipe.NAME }}</h3>

			<p>
				{{ lang('VIRTUALSHOP_UPGRADE_RESULT') }}{{ lang('COLON') }}
				{{ recipe.RESULT_NAME }}
			</p>

			{# 🔥 NIEUW: benodigdheden #}
			{% if recipe.ingredients %}
			<div class="virtualshop-upgrade-requirements">
				<h4>{{ lang('VIRTUALSHOP_REQUIRED') }}</h4>

				<ul>
					{% for ing in recipe.ingredients %}
					<li class="{% if ing.S_HAS_ENOUGH %}ok{% else %}missing{% endif %}">
						<span class="item-name">{{ ing.NAME }}</span>
						<span class="item-count">{{ ing.USER_AMOUNT }} / {{ ing.REQUIRED }}</span>
					</li>
					{% endfor %}
				</ul>
			</div>
			{% endif %}

			<form method="post" action="{{ recipe.U_UPGRADE }}">
				<input
					class="button button1 virtualshop-btn-upgrade"
					type="submit"
					name="submit"
					value="{{ lang('VIRTUALSHOP_UPGRADE') }}"
					{% if not recipe.S_CAN_UPGRADE %} disabled title="{{ lang('VIRTUALSHOP_NOT_ENOUGH_ITEMS') }}"{% endif %}
				>
				{{ S_FORM_TOKEN }}
			</form>
		</div>
	</article>

{% else %}
	<div class="panel">
		<div class="inner">
			<p>{{ lang('VIRTUALSHOP_NO_UPGRADES') }}</p>
		</div>
	</div>
{% endfor %}
</div>

{% endif %}
</div>

{% INCLUDE 'overall_footer.html' %}