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

<div class="virtualshop-page virtualshop-surface">
	<div class="virtualshop-hero">
		<div class="virtualshop-hero-main">
			<span class="virtualshop-kicker">{{ lang('VIRTUALSHOP_KICKER') }}</span>
			<h2>{{ lang('VIRTUALSHOP_TITLE') }}</h2>
			<p>{{ lang('VIRTUALSHOP_SUBTITLE') }}</p>
		</div>
		<div class="virtualshop-wallet">
			<div class="virtualshop-wallet-card balance">
				<span>{{ lang('VIRTUALSHOP_MY_POINTS') }}{{ lang('COLON') }}</span>
				<div class="virtualshop-wallet-line">
					<strong>{{ VIRTUALSHOP_USER_POINTS }}</strong>
					<em>{{ VIRTUALSHOP_POINTS_NAME }}</em>
				</div>
			</div>
			<a class="virtualshop-wallet-card link inventory-link" href="{{ U_VIRTUALSHOP_INVENTORY }}">
				<span>{{ lang('VIRTUALSHOP_MY_ITEMS') }}{{ lang('COLON') }}</span>
				<div class="virtualshop-wallet-line">
					<strong>{{ VIRTUALSHOP_USER_ITEMS_COUNT }}</strong>
					<em>{{ lang('VIRTUALSHOP_ITEMS') }}</em>
				</div>
			</a>
		</div>
	</div>

	<div class="virtualshop-toolbar">
		<div class="virtualshop-filters">
			<a class="virtualshop-chip" href="{{ U_VIRTUALSHOP_ALL }}">{{ lang('VIRTUALSHOP_ALL_CATEGORIES') }}</a>
			{% for category in categories %}<a class="virtualshop-chip{% if category.S_ACTIVE %} active{% endif %}" href="{{ category.U_FILTER }}">{{ category.NAME }}</a>{% endfor %}
		</div>
		<div class="virtualshop-filters virtualshop-types">
			{% for type in types %}<a class="virtualshop-chip type{% if type.S_ACTIVE %} active{% endif %}" href="{{ type.U_FILTER }}">{{ type.NAME }}</a>{% endfor %}
		</div>
	</div>

	<div class="virtualshop-grid">
		{% for item in items %}
			<article class="virtualshop-card rarity-{{ item.RARITY_CLASS }}{% if item.S_OUT_OF_STOCK %} is-soldout{% endif %}">
				<a href="{{ item.U_VIEW }}" class="virtualshop-image-wrap"><img src="{{ item.IMAGE }}" alt="{{ item.NAME }}"></a>
				<div class="virtualshop-card-body">
					<div class="virtualshop-card-top">
						<span class="virtualshop-badge">{{ item.CATEGORY }}</span>
						<span class="virtualshop-badge rarity">{{ item.ITEM_RARITY }}</span>
						{% if item.S_OUT_OF_STOCK %}<span class="virtualshop-badge sold">{{ lang('VIRTUALSHOP_OUT_OF_STOCK') }}</span>{% endif %}
					</div>
					<h3><a href="{{ item.U_VIEW }}">{{ item.NAME }}</a></h3>
					<p>{{ item.DESCRIPTION }}</p>
					<div class="virtualshop-price-line"><strong>{{ item.PRICE }}</strong><span>{{ VIRTUALSHOP_POINTS_NAME }}</span></div>
					<div class="virtualshop-meta"><span>{{ item.ITEM_TYPE }}</span><span>{% if item.S_UNLIMITED %}{{ lang('VIRTUALSHOP_UNLIMITED') }}{% else %}{{ lang('VIRTUALSHOP_STOCK') }}{{ lang('COLON') }} {{ item.STOCK }}{% endif %}</span></div>
					{% if item.S_PASSIVE %}<div class="virtualshop-passive">+{{ item.PASSIVE_POINTS }} {{ VIRTUALSHOP_POINTS_NAME }} / {{ lang('VIRTUALSHOP_DAY') }}</div>{% endif %}
					<a class="button button1 virtualshop-button" href="{{ item.U_VIEW }}">{{ lang('VIRTUALSHOP_VIEW') }}</a>
				</div>
			</article>
		{% else %}
			<div class="panel"><div class="inner"><p>{{ lang('VIRTUALSHOP_EMPTY') }}</p></div></div>
		{% endfor %}
	</div>

	<div class="virtualshop-guide" aria-label="{{ lang('VIRTUALSHOP_GUIDE_TITLE') }}">
		<div class="virtualshop-guide-head">
			<span class="virtualshop-guide-icon">💡</span>
			<div>
				<h3>{{ lang('VIRTUALSHOP_GUIDE_TITLE') }}</h3>
				<p>{{ lang('VIRTUALSHOP_GUIDE_EXPLAIN') }}</p>
			</div>
		</div>
		<div class="virtualshop-guide-grid">
			<div class="virtualshop-guide-box">
				<strong>{{ lang('VIRTUALSHOP_GUIDE_ITEM_TYPES') }}</strong>
				<ul>
					<li><span>{{ lang('VIRTUALSHOP_TYPE_NORMAL') }}</span>{{ lang('COLON') }} {{ lang('VIRTUALSHOP_GUIDE_TYPE_NORMAL') }}</li>
					<li><span>{{ lang('VIRTUALSHOP_TYPE_GIFT') }}</span>{{ lang('COLON') }} {{ lang('VIRTUALSHOP_GUIDE_TYPE_GIFT') }}</li>
					<li><span>{{ lang('VIRTUALSHOP_TYPE_MYSTERY_BOX') }}</span>{{ lang('COLON') }} {{ lang('VIRTUALSHOP_GUIDE_TYPE_MYSTERY_BOX') }}</li>
					<li><span>{{ lang('VIRTUALSHOP_TYPE_PASSIVE') }}</span>{{ lang('COLON') }} {{ lang('VIRTUALSHOP_GUIDE_TYPE_PASSIVE') }}</li>
					<li><span>{{ lang('VIRTUALSHOP_TYPE_COSMETIC') }}</span>{{ lang('COLON') }} {{ lang('VIRTUALSHOP_GUIDE_TYPE_COSMETIC') }}</li>
				</ul>
			</div>
			<div class="virtualshop-guide-box">
				<strong>{{ lang('VIRTUALSHOP_GUIDE_RARITY') }}</strong>
				<div class="virtualshop-guide-rarities">
					<span class="common">{{ lang('VIRTUALSHOP_RARITY_COMMON') }}</span>
					<span class="rare">{{ lang('VIRTUALSHOP_RARITY_RARE') }}</span>
					<span class="epic">{{ lang('VIRTUALSHOP_RARITY_EPIC') }}</span>
					<span class="legendary">{{ lang('VIRTUALSHOP_RARITY_LEGENDARY') }}</span>
				</div>
				<p>{{ lang('VIRTUALSHOP_GUIDE_RARITY_EXPLAIN') }}</p>
			</div>
		</div>
	</div>
</div>

{% INCLUDE 'overall_footer.html' %}