{% extends "base.html" %}
{% set active_page = "tokens" %}

{% block title %}Player Tokens{% endblock %}
{% block content %}
<div class="uk-flex uk-flex-center uk-margin-bottom uk-margin-top">
    <h1 class="uk-text-center"><strong>Legends of Palisma</strong>Player Tokens</h1>
</div>
<br/>
<div class="uk-container uk-container-small">
    <h2 class="uk-text-center">Categories</h2>
    <div class="uk-grid-medium uk-grid-match uk-flex-center" uk-grid>
        {% for name,tokens in categories %}
        <div class="acks-npc-card" data-name="{{ name }}">
            <div class="uk-card uk-card-body uk-card-default uk-box-shadow-hover-large">
                <h4 class="uk-card-title uk-margin-small-top">{{ name|capitalize }}</h4>
                <div class="uk-card-badge uk-label uk-label-primary">{{ tokens|length }}</div>
                <div class="uk-text-center uk-margin-bottom">
                    <div>
                        <img src="{{ (tokens|random)['src'] }}" class="category-thumbnail" />
                    </div>
                    <div>
                        <strong>Browse {{ name|capitalize }}</strong>
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock %}

{% block head %}
<style>
div.acks-npc-card:hover {
    cursor: pointer;
}
div.acks-npc-card > div > div > div > img.category-thumbnail {
    width: 150px;
    height: 150px;
}
</style>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightgallery.js@1.4.0/dist/css/lightgallery.min.css" integrity="sha256-s47mXWRWvrLQNL9VRQX0ykfkIVSLfNJuingF/SZztsM=" crossorigin="anonymous">
{% endblock %}

{% block scripts %}
<script src="https://cdn.jsdelivr.net/npm/lightgallery.js@1.4.0/dist/js/lightgallery.min.js" integrity="sha256-0Zhc9IDI5elFpwJZlvdAM4u/6qlxi4qIOUlHDVl5wjU=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/lg-thumbnail.js@1.2.0/dist/lg-thumbnail.min.js" integrity="sha256-h70L9O3prxviKHrPHwrId33HakkgnURiB1KBHDyZOJc=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/lg-fullscreen.js@1.2.0/dist/lg-fullscreen.min.js" integrity="sha256-5VFY2GRRpY51CgT/ku3jPvpWybxJ2n+pbDNz05amGwk=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/lg-zoom.js@1.3.0/dist/lg-zoom.min.js" integrity="sha256-pw9GIEB9jGoek+S5xfa2Uz/8dZVjZsIYVJxy3jK3qgI=" crossorigin="anonymous"></script>

<script type="text/javascript">
    var categories = {{ data | tojson }};
    for(let category of document.querySelectorAll('div.acks-npc-card')) {
        category.addEventListener('click', function() {
            lightGallery(category, {
                dynamic: true,
                dynamicEl: categories[category.dataset.name]
            })
        });
    }
</script>
{% endblock %}