Интернационализация Django - перевод из всплывающего окна, обработанного Javascript, не подхватывается

Я использую Django Internationalization в моем проекте django.

На одной из моих страниц есть текст, который прекрасно переводится, и всплывающее окно, которое упорно не воспринимает перевод, предложенный в файле po.

Как бы то ни было, перевод присутствует в po.

Поскольку это всплывающее окно создавало проблемы в прошлом, я предполагаю, что это из-за javascript, который управляет открытием и закрытием окна.

Я начал следовать этому посту Как решить проблему перевода/локализации внешних файлов JavaScript, поскольку Django не позволяет использовать встроенные теги в других файлах? , но мне кажется, что я что-то упустил: как мне связать мой файл локали с каталогом javascript?

1. project: mysite
2. app: main

url (уровень проекта)

urlpatterns += i18n_patterns(
    path('', include("main.urls")),
    #add for i18n translation for javascript content
    path("jsi18n/", JavaScriptCatalog.as_view(), name="javascript-catalog"),
)

base.html

<script src="{% url 'javascript-catalog' %}"></script>

шаблон (уровень приложения) со скриптом

<div class="form-popup" id="myForm{{ model.id }}">
    <form action="{% url 'url' %}" class="show-venue-popup-container" method="post">
        {% csrf_token %}
        <h5 class="show-venue-popup-title">{% translate 'text to be translated_0!' %}</h5>
        <p class="show-venue-popup-text">{% translate 'text to be translated_1' %}</p>
        <button type="submit" class="btn">{% translate 'text to be translated_2' %}</button>
        <button type="button" class="btn cancel" onclick="closeForm('{{ model.id }}')">{% translate 'text to be translated_3' %}</button>
    </form>
</div>

<script>
    // Shows and hides claim window
    // Pop up when user clicks claim starts
    function openForm(modelId) {
        document.getElementById("myForm" + modelId).style.display = "block";
    }

    function closeForm(modelId) {
        document.getElementById("myForm" + modelId).style.display = "none";
    }

    // Pop up when user clicks claim ends
    function displayTab(containerId) {
        const tab = document.querySelector(containerId);
        const isOpen = !tab.classList.contains('hide');

        const allTabs = document.querySelectorAll('.tab-container');
        allTabs.forEach(container => {
            container.classList.add('hide');
            Array.from(container.querySelectorAll('.tab-section')).forEach(section => {
                section.classList.add('hide');
                section.style.display = 'none';
            });
        });

        if (!isOpen) {
            tab.classList.remove('hide');
            Array.from(tab.querySelectorAll('.tab-section')).forEach(section => {
                section.classList.remove('hide');
                section.style.display = 'flex';
            });
        }
    }
</script>

locale/language/django.po:

#: .\main\templates\template
msgid "text to be translated_0!"
msgstr "xxxx"

urlpatterns = [
        path('jsi18n/', JavaScriptCatalog.as_view(), name='javascript-catalog'),
    
    ]
    
    urlpatterns += i18n_patterns(
        path('', include("main.urls")),
        #add for i18n translation for javascript content
        path('jsi18n/', JavaScriptCatalog.as_view(), name='javascript-catalog'),
    )

<script src="{% url 'javascript-catalog' %}"></script>