{% extends "base.html" %}

{% block title %}{{ page_title }}{% endblock %}

{% block content %}
<div class="slideshow" id="slideshow">

    <div class="slide-layer" id="layer-a"></div>
    <div class="slide-layer" id="layer-b"></div>

    <div class="pip" id="pip">
        <img id="pip-img" alt="{{ _("Verso de la carte") }}" />
    </div>

    <header class="page-header">
        {% if collections %}
        <form class="collection-filter" method="get" action="{{ url_for('slideshow.index') }}">
            <label for="collection-select" class="sr-only">{{ _("Collection") }}</label>
            <select id="collection-select" name="collection" onchange="this.form.submit()">
                <option value="" {% if not current_collection %}selected{% endif %}>
                    {{ _("Toutes les collections") }}
                </option>
                {% for c in collections %}
                <option value="{{ c }}" {% if c == current_collection %}selected{% endif %}>
                    {{ c }}
                </option>
                {% endfor %}
            </select>
        </form>
        {% endif %}
    </header>

</div>
{% endblock %}

{% block scripts %}
<script>
    window.SLIDESHOW_CONFIG = {
        // Délai entre deux cartes (secondes)
        intervalSeconds: 8,
        cardsUrl: "{{ url_for('slideshow.api_slideshow_cards') }}",
        cardDetailUrlBase: "{{ url_for('home.card_detail', card_id='__ID__', back=current_path) }}",
        imageBaseUrl: "{{ url_for('home.images', filename='') }}",
        collection: {{ current_collection | tojson }}
    };
</script>
<script src="{{ url_for('static', filename='js/nav-controls.js') }}"></script>
<script src="{{ url_for('static', filename='js/slideshow.js') }}"></script>
<script src="{{ url_for('static', filename='vendor/nosleep/NoSleep.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/wake-lock.js') }}"></script>
<script src="{{ url_for('static', filename='js/fullscreen.js') }}"></script>
{% endblock %}