{% extends "base.html" %}
{% from "components/page_header.html" import page_header %}

{% block title %}{{ page.title }} - Yaffo{% endblock %}

{% block extra_styles %}
<link rel="stylesheet" href="{{ url_for('static', filename='vendor/gridstack/10.3.1/gridstack.min.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='pages/detail.css') }}">
{% endblock %}

{% block content %}
<div class="main-content page-presentation">
    {% if page.show_title %}
    {{ page_header(page.title, page.subtitle) }}
    {% endif %}

    {% include "pages/_grid.html" %}
</div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='vendor/gridstack/10.3.1/gridstack-all.js') }}"></script>
<script src="{{ url_for('static', filename='pages/widget_broker.js') }}"></script>
<script src="{{ url_for('static', filename='pages/grid.js') }}"></script>
<script>
    window.PHOTO_ORGANIZER.i18nReady.then((i18n) => {
        window.PHOTO_ORGANIZER.pageGrid = window.PHOTO_ORGANIZER.initPresentationGrid(i18n);
        // Presentation always displays the published version.
        const publishedVersionId = {{ page.published_version_id }};
        window.PHOTO_ORGANIZER.initWidgetBroker(
            {{ page.id }}, () => publishedVersionId, window.APP_CONFIG);
    });
</script>
{% endblock %}