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

{% block title %}Dynamic Lairs{% 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>Dynamic Lairs</h1>
</div>
<br/>
<div class="uk-container uk-container-small">
    <!-- Animal Lairs -->
    <h2 class="uk-text-center"><strong>Animal Lairs</strong></h2>
    <div uk-slider>
        <ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul>
        <div class="uk-position-relative">
            <div class="uk-slider-container uk-light">
                <ul id="animal-lairs" class="uk-slider-items uk-child-width-1-2 uk-child-width-1-3@s uk-child-width-1-4@m">
                    {% for i in animal %}
                        <li data-src="{{ i }}" class="gallery-img-li"><img src="{{ i }}"/></li>
                    {% endfor %}
                </ul>
            </div>
            <a class="uk-position-center-left-out" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
            <a class="uk-position-center-right-out" href="#" uk-slidenav-next uk-slider-item="next"></a>
        </div>
    </div>

    <!-- Humanoid Lairs -->
    <h2 class="uk-text-center uk-margin-xlarge-top"><strong>Humanoid Lairs</strong></h2>
    <div uk-slider>
        <ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul>
        <div class="uk-position-relative">
            <div class="uk-slider-container uk-light">
                <ul id="humanoid-lairs" class="uk-slider-items uk-child-width-1-2 uk-child-width-1-3@s uk-child-width-1-4@m">
                    {% for i in humanoid %}
                        <li data-src="{{ i }}" class="gallery-img-li"><img src="{{ i }}"/></li>
                    {% endfor %}
                </ul>
            </div>
            <a class="uk-position-center-left-out" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
            <a class="uk-position-center-right-out" href="#" uk-slidenav-next uk-slider-item="next"></a>
        </div>
    </div>
</div>
{% endblock %}

{% block head %}
<style>
li.gallery-img-li {
    overflow: hidden;
    border-radius: 4px;
    border: 2px solid #fff;
    height: 300px;
    width: 300px;
}

li.gallery-img-li > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
</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">
    lightGallery(document.getElementById('animal-lairs'));
    lightGallery(document.getElementById('humanoid-lairs'));
</script>
{% endblock %}