{% extends "_base.html" %}
{% load i18n %}
{% load static %}
{% load widget_tweaks %}
{% load rules %}
{% load render_bundle from webpack_loader %}
{% block content %}
    <form method="post" id="content_form" data-unsaved-warning>
        <div>
            <h1 class="heading">
                {% with page_title=source_page_translation.title source_language=source_page_translation.language.translated_name target_language_name=target_language.translated_name %}
                    {% blocktranslate trimmed %}
                        Translate "{{ page_title }}" from {{ source_language }} to {{ target_language_name }}
                    {% endblocktranslate %}
                {% endwith %}
            </h1>
            <div class="flex flex-wrap grow justify-between gap-2 mb-4">
                <a href="{% url 'edit_page' page_id=source_page_translation.page.id region_slug=request.region.slug language_slug=target_language.slug %}"
                   class="btn btn-outline">
                    <i icon-name="arrow-left-circle" class="align-top"></i> {% translate "Back to the page form" %}
                </a>
                <div class="flex flex-wrap gap-2 ml-auto mr-0 items-center">
                    {% include "generic_auto_save_note.html" with form_instance=page_translation_form.instance %}
                    {% has_perm 'cms.change_page_object' request.user source_page_translation.page as can_edit_page %}
                    {% if not source_page_translation.page.archived %}
                        {% has_perm 'cms.publish_page_object' request.user source_page_translation.page as can_publish_page %}
                        {% if can_publish_page %}
                            <button name="status" value="{{ DRAFT }}" class="btn btn-outline">
                                {% translate "Save as draft" %}
                            </button>
                            <button name="status" value="{{ PUBLIC }}" class="btn">
                                {% if page_translation_form.instance.status == PUBLIC %}
                                    {% translate "Update" %}
                                {% else %}
                                    {% translate "Publish" %}
                                {% endif %}
                            </button>
                        {% elif can_edit_page %}
                            <button name="status" value="{{ REVIEW }}" class="btn">
                                {% translate "Submit for approval" %}
                            </button>
                        {% endif %}
                    {% endif %}
                </div>
            </div>
            <div class="grid grid-cols-2 gap-4">
                <div class="border border-blue-500 rounded shadow-2xl">
                    <div class="rounded p-4 bg-water-500 font-bold">
                        {% if source_page_translation.is_outdated %}
                            <span title="{% translate "Translation outdated" %}">
                                <i icon-name="alert-triangle"></i>
                            </span>
                        {% elif source_page_translation.currently_in_translation %}
                            <span title="{% translate "Currently in translation" %}">
                                <i icon-name="clock"></i>
                            </span>
                        {% else %}
                            <span title="{% translate "Translation up-to-date" %}">
                                <i icon-name="check"></i>
                            </span>
                        {% endif %}
                        {{ source_page_translation.language.translated_name }}
                    </div>
                    <div class="px-4 pb-4 rounded bg-white">
                        <label class="inline-block mt-4 mb-2 font-bold">
                            {% translate "Version" %}:
                        </label>
                        {{ source_page_translation.version }}
                        <br />
                        <label class="inline-block mb-2 font-bold">
                            {% translate "Status" %}:
                        </label>
                        {{ source_page_translation.get_status_display }}
                        <label>
                            {{ page_translation_form.slug.label }}
                        </label>
                        <div class="slug-field">
                            <label>
                                {{ source_page_translation.base_link }}
                            </label>
                            <input type="text" value="{{ source_page_translation.slug }}" disabled />
                        </div>
                        <label>
                            {{ page_translation_form.title.label }}
                        </label>
                        <input id="source_translation_title"
                               type="text"
                               value="{{ source_page_translation.title }}"
                               disabled />
                        <div>
                            <label class="block font-bold">
                                {{ page_translation_form.content.label }}
                            </label>
                            <textarea id="source_translation_tinymce" cols="40" rows="10" class="tinymce_textarea" disabled data-old="{{ old_translation_content }}" data-new="{{ source_page_translation.content }}" data-unsaved-warning-exclude>
                                {{source_page_translation.content}}
                            </textarea>
                        </div>
                        <label>
                            {% translate "Actions" %}
                        </label>
                        <div class="flex flex-wrap gap-4">
                            <button id="toggle-translation-diff"
                                    class="btn grow bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded"
                                    title="{% if page_translation_form.instance.is_up_to_date %}{% translate "No changes have been made to the source translation." %}{% else %}{% translate "Toggle source translation differences" %}{% endif %}"
                                    {% if page_translation_form.instance.is_up_to_date %}disabled{% endif %}>
                                <div class="hidden toggle">
                                    {% translate "Hide source translation differences" %}
                                </div>
                                <div>
                                    {% translate "Show source translation differences" %}
                                </div>
                            </button>
                            <button id="copy-translation-content"
                                    title="{% translate "Copy content" %}"
                                    {% if not can_edit_page %}disabled{% endif %}
                                    class="btn grow bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">
                                {% with source_language=source_page_translation.language.translated_name target_language_name=target_language.translated_name %}
                                    {% blocktranslate trimmed %}
                                        Copy content of {{ source_language }} to {{ target_language_name }}
                                    {% endblocktranslate %}
                                {% endwith %}
                                <i icon-name="arrow-right-circle" class="mr-2"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="border border-blue-500 rounded shadow-2xl">
                    <div class="rounded p-4 bg-water-500 font-bold">
                        {% if page_translation_form.instance.id %}
                            {% if page_translation_form.instance.is_outdated %}
                                <span title="{% translate "Translation outdated" %}">
                                    <i icon-name="alert-triangle"></i>
                                </span>
                            {% elif page_translation_form.instance.currently_in_translation %}
                                <span title="{% translate "Currently in translation" %}">
                                    <i icon-name="clock"></i>
                                </span>
                            {% else %}
                                <span title="{% translate "Translation up-to-date" %}">
                                    <i icon-name="check"></i>
                                </span>
                            {% endif %}
                        {% else %}
                            <span title="{% translate "Create Translation" %}">
                                <i icon-name="plus"></i>
                            </span>
                        {% endif %}
                        {{ target_language.translated_name }}
                    </div>
                    <div class="px-4 pb-4 rounded bg-white">
                        {% csrf_token %}
                        {% if page_translation_form.instance.id %}
                            <label class="inline-block mt-4 mb-2 font-bold">
                                {% translate "Version" %}:
                            </label>
                            {{ page_translation_form.instance.version }}
                            <br />
                            <label class="inline-block mb-2 font-bold">
                                {% translate "Status" %}:
                            </label>
                            {{ page_translation_form.instance.get_status_display }}
                        {% else %}
                            <label class="inline-block mt-4 mb-2 font-bold">
                                {% translate "Version" %}:
                            </label>
                            {% translate "New" %}
                            <br />
                            <label class="inline-block mb-2 font-bold">
                                {% translate "Status" %}:
                            </label>
                            {% translate "Not saved yet" %}
                        {% endif %}
                        <label for="{{ page_translation_form.slug.id_for_label }}">
                            {{ page_translation_form.slug.label }}
                        </label>
                        <div class="slug-field">
                            <label for="{{ page_translation_form.slug.id_for_label }}">
                                {{ page_translation_form.instance.base_link }}
                            </label>
                            {% translate " Leave blank to generate unique permalink from title" as slug_placeholder %}
                            {% render_field page_translation_form.slug placeholder=slug_placeholder %}
                        </div>
                        <label for="{{ page_translation_form.title.id_for_label }}">
                            {{ page_translation_form.title.label }}
                        </label>
                        {% render_field page_translation_form.title|add_error_class:"border-red-500" id="target_translation_title" %}
                        <label for="{{ page_translation_form.content.id_for_label }}">
                            {{ page_translation_form.content.label }}
                        </label>
                        {% render_field page_translation_form.content|add_error_class:"border-red-500" class="tinymce_textarea" id="target_translation_tinymce" %}
                        <label>
                            {% translate "Implications on translations" %}
                        </label>
                        {% render_field page_translation_form.minor_edit id="minor_edit" %}
                        <label for="{{ page_translation_form.minor_edit.id_for_label }}"
                               class="secondary">
                            {{ page_translation_form.minor_edit.label }}
                        </label>
                        <div class="help-text">
                            {{ page_translation_form.minor_edit.help_text }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
    {{ media_config_data|json_script:"media_config_data" }}
    {% if not can_edit_page or page_translation_form.instance.id and page_translation_form.instance.page.archived %}
        {% include "../_tinymce_config.html" with readonly=1 language=target_language %}
    {% else %}
        {% include "../_tinymce_config.html" with language=target_language %}
        {% include "../_content_edit_lock.html" with lock_key=source_page_translation.page.edit_lock_key %}
    {% endif %}
    {% include "../generic_confirmation_dialog.html" %}
{% endblock content %}
{% block javascript %}
    {% render_bundle 'editor' 'js' %}
{% endblock javascript %}
