{% extends "wagtailadmin/generic/edit.html" %}
{% load i18n wagtailadmin_tags %}

{% block bodyclass %}page-editor{% endblock %}

{% block titletag %}{% blocktrans with instance=translation.source.as_instance locale=translation.target_locale %}Translation of {{ instance }} into {{ locale }}{% endblocktrans %}{% endblock %}

{% block content %}
    {% if is_page %}
        <div class="w-sticky w-top-0 w-z-header">
            {% include 'wagtailadmin/shared/headers/page_edit_header.html' with page=instance page_for_status=instance page_perms=page_perms content_type=instance.content_type %}
            {% include "wagtailadmin/shared/side_panels.html" with page=instance page_for_status=instance page_perms=page_perms content_type=instance.content_type in_explorer=True %}
        </div>
    {% else %}
        <div class="w-sticky w-top-0 w-z-header">
            {% include 'wagtail_localize/admin/includes/generic_header.html' %}
        </div>
        {% include "wagtailadmin/shared/header.html" with title=instance icon="snippet" merged=1 only %}
    {% endif %}

    <header class="w-flex w-flex-col sm:w-flex-row w-items-center w-justify-between w-bg-surface-header w-border-b w-border-border-furniture w-px-0 w-py-0 w-mb-0 w-relative w-top-0 w-min-h-slim-header">
        <div class="w-pl-slim-header sm:w-pl-5 w-min-h-slim-header sm:w-pr-2 w-w-full w-flex-1 w-overflow-x-auto w-box-border">
            <div class="w-flex w-flex-1 w-items-center w-overflow-hidden w-p-4 header-meta--locales">
                {% if source_translation.editUrl %}
                    <a href="{{ source_translation.editUrl }}">{{ source_translation.locale.displayName }}</a>
                {% else %}
                    {{ source_translation.locale.displayName }}
                {% endif %}
                <svg aria-hidden="true" class="icon icon-arrow-right w-w-4 w-h-4">
                    <use href="#icon-arrow-right"></use>
                </svg>
                {{ target_locale.get_display_name }}
                {% if translations %}
                    {% dropdown toggle_icon="dots-horizontal" toggle_aria_label=_("Translations") %}
                        {% for label, url in translations %}
                            <a href="{{ url }}">{{ label }}</a>
                        {% endfor %}
                    {% enddropdown %}
                {% endif %}
            </div>
        </div>
    </header>
    <div class="js-translation-editor" data-props="{{ props }}">
        {# Generates the CSRF token hidden input. This is read by the JavaScript. #}
        {% csrf_token %}
    </div>
{% endblock %}

{% block extra_js %}
    {% include "wagtailadmin/pages/_editor_js.html" %}
    <script>
        if (typeof window.chooserUrls === "undefined") {
            window.chooserUrls = {
                imageChooser: "{% url "wagtailimages_chooser:choose" %}",
                documentChooser: "{% url "wagtaildocs_chooser:choose" %}",
                pageChooser: "{% url "wagtailadmin_choose_page" %}",
            }
        }
    </script>
    <script src="{% url 'wagtail_localize:javascript_catalog' %}"></script>
    <script src="{% versioned_static 'wagtailadmin/js/page-chooser-modal.js' %}"></script>
    <script src="{% versioned_static 'wagtailadmin/js/page-chooser.js' %}"></script>
    <script src="{% versioned_static 'wagtailimages/js/image-chooser-modal.js' %}"></script>
    <script src="{% versioned_static 'wagtailimages/js/image-chooser.js' %}"></script>
    <script src="{% versioned_static 'wagtaildocs/js/document-chooser-modal.js' %}"></script>
    <script src="{% versioned_static 'wagtaildocs/js/document-chooser.js' %}"></script>
    <script src="{% versioned_static 'wagtailadmin/js/chooser-modal.js' %}"></script>
    <script src="{% versioned_static 'wagtailsnippets/js/snippet-chooser.js' %}"></script>
    <script src="{% versioned_static 'wagtail_localize/js/wagtail-localize.js' %}"></script>
{% endblock %}

{% block extra_css %}
    {% if not has_legacy_action_menu %}
        <link rel="stylesheet" href="{% versioned_static 'wagtail_localize/css/wagtail-localize-editor-form.css' %}" />
    {% endif %}
{% endblock %}
