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


{% block title %}ACKS Quest Detail{% 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>Quest Detail</h1>
</div>
{% if quest %}
<div class="uk-container uk-container-small">
    <div class="uk-text-center uk-margin-large">
        <h1 class="uk-heading-xlarge">{{ quest['name'] }}</h1>
    </div>
    <div class="uk-flex uk-flex-center uk-margin-large-bottom">
        <a href="{{ quest['info']['url'] }}" class="uk-button uk-button-default" target="_blank">Info Window</a>
        {% if quest['tsv'] %}
        <a href="{{ quest['tsv']['url'] }}" class="uk-button uk-button-default">TSV File</a>
        {% endif %}
        <a href="{{ url_for('quest_manager.quest_download', level=quest['download'][0], quest_name=quest['download'][1]) }}" class="uk-button uk-button-default" target="_blank">Download</a>
    </div>
    {% if quest['coords'] %}
    <div class="uk-text-center uk-margin-small">
        <div><strong>Coordinates:</strong></div>
        <div>{{ quest['coords'] }}</div>
    </div>
    {% endif %}
    <ul uk-accordion="multiple: true">
        <li class="uk-open">
            <a class="uk-accordion-title" href="#">Assets</a>
            <div class="uk-accordion-content">
                <h3 class="uk-text-center">Quest Assets</h3>
                <div uk-slideshow="animation: push">
                    <ul class="uk-slideshow-nav uk-dotnav uk-flex-center uk-margin"></ul>
                    <div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1">
                        <ul class="uk-slideshow-items" uk-lightbox>
                            {% for a in quest['assets'] %}
                            <li>
                                <a href="{{ a['url'] }}"><img src="{{ a['url'] }}" alt="" width="800" uk-cover></a>
                                <div class="uk-overlay uk-overlay-primary uk-position-bottom uk-text-center uk-transition-slide-bottom">
                                    <h3 class="uk-margin-remove">{{ a['display'] }}</h3>
                                </div>
                            </li>
                            {% endfor %}
                        </ul>
                    </div>
                    <ul class="uk-slideshow-nav uk-dotnav uk-flex-center uk-margin"></ul>
                </div>
            </div>
        </li>
        <li class="uk-open">
            <a class="uk-accordion-title" href="#">Information</a>
            <div class="uk-accordion-content">
                <h3 class="uk-text-center">Quest Info</h3>
                <div id="frame-container">
                    <iframe id="quest-frame" src="{{ quest['info']['url'] }}"></iframe>
                </div>
            </div>
        </li>
    </ul>
</div>
{% endif %}
{% endblock %}

{% block head %}
<style>
#asset-view img {
    max-width: 300px;
    max-height: 500px;
}
#frame-container {
    display: flex;
    width: 100%;
    height: 85vh;
    flex-direction: column:
}
#quest-frame {
    flex-grow: 1;
    border: none;
    margin: 0;
    padding: 0;
}
h1 strong {
    display: block;
    font-size: 50%;
    opacity: 0.65;
}
</style>

<script>
</script>
{% endblock %}