{% extends "wagtailadmin/base.html" %}
{% load static i18n %}
{% get_current_language as LANGUAGE_CODE %}
{% block titletag %}{% trans "Bulletin Studio" %}{% endblock %}
{% block bodyclass %}bulletin-studio{% endblock %}

{% block extra_css %}
    {{ block.super }}
    {% if not dev_server %}
        {# In dev mode the styles arrive through Vite's module graph. #}
        <link rel="stylesheet" href="{% static 'bulletin_studio/app/bulletin-studio.css' %}">
    {% endif %}
    <link rel="stylesheet" href="{% static 'css/maplibre-gl.css' %}">
    <style>
        /* The JS app brings its own chrome: hand it the full content area. */
        .bulletin-studio .content-wrapper .content {
            height: 100%;
            padding: 0 !important;
        }
        /* The studio's PDF button prints this page: the app hides its own chrome,
           the Wagtail shell around it is ours to hide (its fixed sidebar would
           cover the bulletin) and to unclip (one screen high, overflow hidden: a
           bulletin longer than a page would print its first page only). */
        @media print {
            .bulletin-studio #wagtail-sidebar,
            .bulletin-studio .messages {
                display: none !important;
            }
            body.bulletin-studio,
            .bulletin-studio .wrapper,
            .bulletin-studio .content-wrapper,
            .bulletin-studio .content-wrapper .content,
            #bulletin-studio-app {
                height: auto !important;
                overflow: visible !important;
            }
            .bulletin-studio .content-wrapper {
                border: 0;
            }
        }
    </style>
{% endblock %}

{% block content %}
    {# Vue replaces the contents on mount: the fallback shows only when the bundle is missing. #}
    <div id="bulletin-studio-app"
         style="height: 100%"
         data-api-url="{% url 'bulletin_studio:bulletins' %}"
         data-product-pages-url="{% url 'bulletin_studio:product_pages' %}"
         data-images-url="{% url 'bulletin_studio:images' %}"
         data-map-config-url="{% url 'bulletin_studio:map_config' %}"
         {% if forecast_url %}data-forecast-url="{{ forecast_url }}"{% endif %}
         {% if forecast_cities_url %}data-forecast-cities-url="{{ forecast_cities_url }}"{% endif %}
         data-time-zone="{{ time_zone }}"
         {# Settings > Organisation: printed above the bulletin #}
         {% if letterhead.logo %}data-letterhead-logo="{{ letterhead.logo }}"{% endif %}
         {% if letterhead.flag %}data-letterhead-flag="{{ letterhead.flag }}"{% endif %}
         {% if letterhead.text %}data-letterhead-text="{{ letterhead.text }}"{% endif %}
         {# the admin user's active language: the app translates itself with it #}
         data-locale="{{ LANGUAGE_CODE }}"
         data-csrf-token="{{ csrf_token }}">
        <p style="padding: 2rem">{% trans "The Bulletin Studio frontend bundle is not installed." %}</p>
    </div>
{% endblock %}

{% block extra_js %}
    {{ block.super }}
    {% comment %}
        ClimWeb's maplibre, the same build its dashboards use. Loaded here too so the
        editor draws maps with the exact version the published page will use.
    {% endcomment %}
    <script src="{% static 'js/maplibre-gl.js' %}"></script>
    {% if dev_server %}
        <script type="module" src="{{ dev_server }}/@vite/client"></script>
        <script type="module" src="{{ dev_server }}/src/main.ts"></script>
    {% else %}
        <script type="module" src="{% static 'bulletin_studio/app/bulletin-studio.js' %}"></script>
    {% endif %}
{% endblock %}