{% 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 source_language=source_imprint_translation.language.translated_name target_language_name=target_language.translated_name %}
                    {% blocktranslate trimmed %}
                        Translate the imprint 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_imprint' 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 imprint form" %}
                </a>
                {% if perms.cms.change_imprintpage %}
                    <div class="flex flex-wrap gap-2 ml-auto mr-0 items-center">
                        {% include "generic_auto_save_note.html" with form_instance=imprint_translation_form.instance %}
                        <button name="status" value="{{ DRAFT }}" class="btn btn-outline">
                            {% translate "Save as draft" %}
                        </button>
                        <button name="status" value="{{ PUBLIC }}" class="btn">
                            {% if imprint_translation_form.instance.status == PUBLIC %}
                                {% translate "Update" %}
                            {% else %}
                                {% translate "Publish" %}
                            {% endif %}
                        </button>
                    </div>
                {% endif %}
            </div>
            <div class="grid grid-cols-2 gap-4">
                <div class="border border-blue-500 rounded shadow-2xl bg-white">
                    <div class="rounded p-4 bg-water-500 font-bold">
                        {% if source_imprint_translation.is_outdated %}
                            <span title="{% translate "Translation outdated" %}">
                                <i icon-name="alert-triangle"></i>
                            </span>
                        {% elif source_imprint_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_imprint_translation.language.translated_name }}
                    </div>
                    <div class="px-4 pb-4 rounded">
                        <label class="inline-block">
                            {% translate "Version" %}:
                        </label>
                        {{ source_imprint_translation.version }}
                        <br />
                        <label class="inline-block">
                            {% translate "Status" %}:
                        </label>
                        {{ source_imprint_translation.get_status_display }}
                        <br />
                        <label class="inline-block">
                            {% translate "Link to the imprint" %}:
                        </label>
                        <a href="{{ WEBAPP_URL }}/{{ request.region.slug }}/{{ source_imprint_translation.language.slug }}/{{ IMPRINT_SLUG }}"
                           target="_blank"
                           rel="noopener noreferrer"
                           class="text-blue-600 hover:underline">{{ WEBAPP_URL }}/{{ request.region.slug }}/{{ source_imprint_translation.language.slug }}/{{ IMPRINT_SLUG }}</a>
                        <a href="#"
                           data-copy-to-clipboard="{{ WEBAPP_URL }}/{{ request.region.slug }}/{{ source_imprint_translation.language.slug }}/{{ IMPRINT_SLUG }}"
                           title="{% translate "Copy to clipboard" %}"
                           class="px-2 text-gray-800 hover:text-blue-600">
                            <i icon-name="copy"></i>
                            <i icon-name="check" class="hidden text-green-500"></i>
                        </a>
                        <br />
                        <label>
                            {{ imprint_translation_form.title.label }}
                        </label>
                        <input id="source_translation_title"
                               type="text"
                               value="{{ source_imprint_translation.title }}"
                               disabled />
                        <div class="mt-4">
                            <label class="block mt-4 font-bold">
                                {{ imprint_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_imprint_translation.content }}" data-unsaved-warning-exclude>
                                {{source_imprint_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 imprint_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 imprint_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" %}"
                                    class="btn grow bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">
                                {% with source_language=source_imprint_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 data-feather="arrow-right-circle" class="mr-2"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="border border-blue-500 rounded shadow-2xl bg-white">
                    <div class="rounded p-4 bg-water-500 font-bold">
                        {% if imprint_translation_form.instance.id %}
                            {% if imprint_translation_form.instance.is_outdated %}
                                <span title="{% translate "Translation outdated" %}">
                                    <i icon-name="alert-triangle"></i>
                                </span>
                            {% elif imprint_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">
                        {% csrf_token %}
                        {% if imprint_translation_form.instance.id %}
                            <label class="inline-block">
                                {% translate "Version" %}:
                            </label>
                            {{ imprint_translation_form.instance.version }}
                            <br />
                            <label class="inline-block">
                                {% translate "Status" %}:
                            </label>
                            {{ imprint_translation_form.instance.get_status_display }}
                            <br />
                            <label class="inline-block">
                                {% translate "Link to the imprint" %}:
                            </label>
                            <a href="{{ WEBAPP_URL }}/{{ request.region.slug }}/{{ target_language.slug }}/{{ IMPRINT_SLUG }}"
                               target="_blank"
                               rel="noopener noreferrer"
                               class="text-blue-600 hover:underline">{{ WEBAPP_URL }}/{{ request.region.slug }}/{{ target_language.slug }}/{{ IMPRINT_SLUG }}</a>
                            <a href="#"
                               data-copy-to-clipboard="{{ WEBAPP_URL }}/{{ request.region.slug }}/{{ target_language.slug }}/{{ IMPRINT_SLUG }}"
                               title="{% translate "Copy to clipboard" %}"
                               class="px-2 text-gray-800 hover:text-blue-600">
                                <i icon-name="copy"></i>
                                <i icon-name="check" class="hidden text-green-500"></i>
                            </a>
                            <br />
                        {% else %}
                            <label class="inline-block">
                                {% translate "Version" %}:
                            </label>
                            {% translate "New" %}
                            <br />
                            <label class="inline-block">
                                {% translate "Status" %}:
                            </label>
                            {% translate "Not saved yet" %}
                            <br />
                            <label class="inline-block">
                                {% translate "Link to the imprint" %}:
                            </label>
                            {% translate "Not saved yet" %}
                            <br />
                        {% endif %}
                        <label for="{{ imprint_translation_form.title.id_for_label }}">
                            {{ imprint_translation_form.title.label }}
                        </label>
                        {% render_field imprint_translation_form.title|add_error_class:"border-red-500" id="target_translation_title" %}
                        <label for="{{ imprint_translation_form.content.id_for_label }}">
                            {{ imprint_translation_form.content.label }}
                        </label>
                        {% render_field imprint_translation_form.content|add_error_class:"border-red-500" id="target_translation_tinymce" class="tinymce_textarea" %}
                        <label>
                            {% translate "Implications on translations" %}
                        </label>
                        {% render_field imprint_translation_form.minor_edit %}
                        <label for="{{ imprint_translation_form.minor_edit.id_for_label }}"
                               class="secondary">
                            {{ imprint_translation_form.minor_edit.label }}
                        </label>
                        <div class="help-text">
                            {{ imprint_translation_form.minor_edit.help_text }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
    {{ media_config_data|json_script:"media_config_data" }}
    {% if not perms.cms.change_imprintpage %}
        {% 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_imprint_translation.page.edit_lock_key %}
    {% endif %}
    {% include "../generic_confirmation_dialog.html" %}
{% endblock content %}
{% block javascript %}
    {% render_bundle 'editor' 'js' %}
{% endblock javascript %}
