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

{% block title %}Maps{% 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>Maps</h1>
</div>
<br/>
<div class="uk-container uk-container-small">
    <ul class="uk-subnav uk-subnav-pill uk-flex uk-flex-center" uk-switcher>
        <li><a href="#">World Map</a></li>
        <li><a href="#">Continent Overview</a></li>
        <li><a href="#">Continent Full</a></li>
    </ul>
    <ul class="uk-switcher uk-margin" id="map-gallery">
        <li data-src="{{ url_for('static', filename='WorldMap.png') }}">
            <img src="{{ url_for('static', filename='WorldMap.png') }}"/>
        </li>
        <li data-src="{{ url_for('static', filename='PalismaWorld.png') }}" data-sub-html="<p>1 hex = 24 miles</p>">
            <div>1 hex = 24 miles</div>
            <img src="{{ url_for('static', filename='PalismaWorld.png') }}"/>
        </li>
        <li data-src="{{ url_for('static', filename='PalismaContinent.png') }}" data-sub-html="<p>1 hex = 6 miles</p>">
            <div>1 hex = 6 miles</div>
            <img src="{{ url_for('static', filename='PalismaContinent.png') }}"/>
        </li>
    </ul>
</div>
{% endblock %}

{% block head %}
<style>
h1 strong {
    display: block;
    font-size: 50%;
    opacity: 0.65;
}
</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('map-gallery'));
</script>
{% endblock %}