{% extends 'base.html' %}
{% load static i18n get_share_url %}

{% block body_class %}bulletin-page{% endblock %}

{% block extra_css %}
    {% comment %}
        Content styles shipped with the frontend bundle: the same rules the editor
        uses, so what the author composed is what the site shows.
    {% endcomment %}
    <link rel="stylesheet" href="{% static 'bulletin_studio/app/bulletin-studio-content.css' %}">
    {% if has_map %}<link rel="stylesheet" href="{% static 'css/maplibre-gl.css' %}">{% endif %}
    <style>
        /* Aligned with the document's text and right under it (.bs-doc in the bundle's
           content css). ClimWeb's page container is a centring flex: no width, no
           full line; no margin collapsing either. */
        .bs-share { width: 100%; max-width: 820px; margin: -2rem auto 2rem; padding: 0 1.25rem; }
        .bs-share-label { font-weight: 700; margin: 0 0 .5rem; padding: 0; }
        @media print { .bs-share { display: none; } }
    </style>
{% endblock %}

{% block content %}
    <main class="bs-doc" data-boundary-tiles="{{ map.boundaryTilesUrl|default_if_none:'' }}">
        {# Sanitized on write (views._read_body), never on read. #}
        {{ page.html|safe }}
    </main>
    {% comment %}
        ClimWeb's share buttons, as on its news and products: the networks come from
        its ONLINE_SHARE_CONFIG setting. Outside the html, which is the document alone.
    {% endcomment %}
    <aside class="bs-share">
        <p class="bs-share-label">{% translate "Share" %}</p>
        <div class="share-buttons">
            {% share_buttons url=page.get_full_url text=page.title %}
        </div>
    </aside>
{% endblock %}

{% block extra_js %}
    {% if has_map %}
        {% comment %}
            ClimWeb's own maplibre (v4.1.1), the one its dashboards use: the embed
            declares it external, so there is never a second copy nor a version skew
            between what the author saw and what the site draws.
        {% endcomment %}
        <script src="{% static 'js/maplibre-gl.js' %}"></script>
        <script type="module" src="{% static 'bulletin_studio/app/bulletin-studio-embed.js' %}"></script>
    {% endif %}
{% endblock %}