{% 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;
        }
    </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' %}"
         {# 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 %}