{% extends "base.html" %}

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

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

    <h1 class="sr-only">{{ page_title }}</h1>

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

    {% if config.POSTCARDS_VERSO %}
    <div class="pip" id="pip">
        <img id="pip-img" alt="{{ _("Verso de la carte") }}" />
    </div>
    {% endif %}

    <div class="slideshow-meta">
        <div class="slideshow-cdate" id="slideshow-cdate"></div>
    </div>

    <header class="page-header">
        {% if collections %}
        <form class="collection-filter" method="get" action="{{ url_for('home.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('home.api_recent_cards') }}",
        cardDetailUrlBase: "{{ url_for('home.card_detail', card_id='__ID__') }}",
        imageBaseUrl: "{{ url_for('home.images', filename='') }}",
        collection: {{ current_collection | tojson }},
        addedOnLabel: "{{ _("Ajoutée le") }}",
        rectoAltLabel: "{{ _("Carte postale") }}",
        versoAltLabel: "{{ _("Verso de la carte") }}",
        // Verso désactivé globalement ([DEFAULT] postcards_verso = false) :
        // slideshow.js n'affiche alors plus la vignette PiP du verso.
        showVerso: {{ config.POSTCARDS_VERSO | tojson }},
        // Désactivé : la page d'accueil affiche les cartes par cdate
        // descendant (les plus récentes en premier), sans mélange aléatoire
        shuffle: false
    };
</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>
{% endblock %}