integreat_cms/cms/templates/pages/page_sbs.html
{% 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 }}"
data-slugify-url="{% url 'slugify_ajax' region_slug=request.region.slug language_slug=target_language.slug model_type='page' %}{% if page_translation_form.instance.id %}?data-model-id={{ page_translation_form.instance.id }}{% endif %}">
{{ 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" %}
<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 %}