integreat_cms/cms/templates/languages/language_form.html
{% extends "_base.html" %}
{% load i18n %}
{% load content_filters %}
{% block content %}
{% load static %}
{% load widget_tweaks %}
<form method="post" data-unsaved-warning>
{% csrf_token %}
<div class="flex flex-wrap mb-4 justify-between">
<h1 class="heading overflow-hidden text-ellipsis">
{% if form.instance.id %}
{% with form.instance.translated_name as translated_language_name %}
{% blocktranslate trimmed %}
Edit language "{{ translated_language_name }}"
{% endblocktranslate %}
{% endwith %}
{% else %}
{% translate "Create new language" %}
{% endif %}
</h1>
{% if perms.cms.change_language %}
<button class="btn ml-auto mr-0">
{% translate "Save" %}
</button>
{% endif %}
</div>
<div class="flex flex-wrap">
<div class="w-full xl:w-1/2">
<div class="w-full mb-4 rounded border border-solid border-blue-500 shadow-2xl bg-white">
<div class="w-full p-4 rounded bg-water-500">
<h3 class="font-bold text-black">
<i icon-name="flag" class="mr-2"></i> {% translate "Name" %}
</h3>
</div>
<div class="w-full p-4">
<label for="{{ form.native_name.id_for_label }}" class="block mb-2">
{{ form.native_name.label }}
</label>
{% render_field form.native_name|add_error_class:"border-red-500" %}
<div class="mb-2 text-s text-gray-600">
{{ form.native_name.help_text }}
</div>
<label for="{{ form.english_name.id_for_label }}" class="block mb-2">
{{ form.english_name.label }}
</label>
{% render_field form.english_name|add_error_class:"border-red-500" %}
<div class="mb-2 text-s text-gray-600">
{{ form.english_name.help_text }}
</div>
</div>
</div>
<div class="w-full mb-4 rounded border border-solid border-blue-500 shadow-2xl bg-white">
<div class="w-full p-4 rounded bg-water-500">
<h3 class="font-bold text-black">
<i icon-name="tag" class="mr-2"></i> {% translate "Identifier" %}
</h3>
</div>
<div class="w-full p-4">
<label for="{{ form.slug.id_for_label }}" class="block mb-2">
{{ form.slug.label }}
</label>
{% render_field form.slug|add_error_class:"border-red-500" %}
<div class="mb-2 text-s text-gray-600">
{{ form.slug.help_text }} {% translate "This is in many cases a single (macro-)language tag, according to the" %} <a href="https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry"
target="_blank"
class="underline">IANA Subtag Registry</a> {% translate "or" %} <a href="https://iso639-3.sil.org/code_tables/639/data"
class="underline"
target="_blank">ISO 639</a>.
</div>
<label for="{{ form.bcp47_tag.id_for_label }}" class="block mb-2">
{{ form.bcp47_tag.label }}
</label>
{% render_field form.bcp47_tag|add_error_class:"border-red-500" %}
<div class="mb-2 text-s text-gray-600">
{{ form.bcp47_tag.help_text }}
{% if DEEPL_ENABLED %}
<br />
<br />
<i class="h-5" icon-name="alert-triangle"></i>
{% blocktranslate trimmed with link="href='https://www.deepl.com/de/docs-api/translate-text/translate-text/' target='_blank' class='underline'" %}
For some languages, DeepL needs a correct BCP47 tag (for example English or Portuguese).
For more information, please checkout the <a {{ link }}>DeepL documentation</a>.
{% endblocktranslate %}
{% endif %}
</div>
</div>
</div>
{% if form.instance.id %}
<div class="w-full mb-4 rounded border border-solid border-blue-500 shadow-2xl bg-white">
<div class="w-full p-4 rounded bg-water-500">
<h3 class="font-bold text-black">
<i icon-name="map" class="mr-2"></i> {% translate "Regions using this language" %}
</h3>
</div>
<div class="w-full p-4">
{% if form.instance.language_tree_nodes.exists %}
<p>
{% translate "Total number of regions using this language: " %} {{ form.instance.language_tree_nodes.count }}
</p>
{% include "languages/region_list_section/region_list.html" %}
{% else %}
{% translate "The language is not used in any region." %}
{% endif %}
</div>
</div>
{% endif %}
</div>
<div class="w-full xl:w-1/2 xl:pl-4">
<div class="w-full mb-4 rounded border border-solid border-blue-500 shadow-2xl bg-white">
<div class="w-full p-4 rounded bg-water-500">
<h3 class="font-bold text-black">
<i icon-name="globe" class="mr-2"></i> {% translate "Translations" %}
</h3>
</div>
<div class="w-full p-4">
<label for="{{ form.social_media_webapp_title.id_for_label }}"
class="font-bold block mt-4 mb-2 cursor-pointer">
{{ form.social_media_webapp_title.label }}
</label>
{% render_field form.social_media_webapp_title|add_error_class:"border-red-500" %}
<div class="mb-2 text-s text-gray-600">
{{ form.social_media_webapp_title.help_text }}
</div>
<label for="{{ form.social_media_webapp_description.id_for_label }}"
class="font-bold block mt-4 mb-2 cursor-pointer">
{{ form.social_media_webapp_description.label }}
</label>
{% render_field form.social_media_webapp_description rows="2"|add_error_class:"border-red-500" %}
<div class="mb-2 text-s text-gray-600">
{{ form.social_media_webapp_description.help_text }}
</div>
<label for="{{ form.table_of_contents.id_for_label }}"
class="font-bold block mt-4 mb-2 cursor-pointer">
{{ form.table_of_contents.label }}
</label>
{% render_field form.table_of_contents|add_error_class:"border-red-500" %}
<div class="mb-2 text-s text-gray-600">
{{ form.table_of_contents.help_text }}
</div>
<label for="{{ form.message_content_not_available.id_for_label }}"
class="font-bold block mt-4 mb-2 cursor-pointer">
{{ form.message_content_not_available.label }}
</label>
{% render_field form.message_content_not_available|add_error_class:"border-red-500" %}
<div class="mb-2 text-s text-gray-600">
{{ form.message_content_not_available.help_text }}
</div>
<label for="{{ form.message_partial_live_content_not_available.id_for_label }}"
class="font-bold block mt-4 mb-2 cursor-pointer">
{{ form.message_partial_live_content_not_available.label }}
</label>
{% render_field form.message_partial_live_content_not_available|add_error_class:"border-red-500" %}
<div class="mb-2 text-s text-gray-600">
{{ form.message_partial_live_content_not_available.help_text }}
</div>
</div>
</div>
<div class="w-full">
<div class="w-full mb-4 rounded border border-solid border-blue-500 shadow-2xl bg-white">
<div class="w-full p-4 rounded bg-water-500">
<h3 class="font-bold text-black">
<i icon-name="settings" class="mr-2"></i> {% translate "Extended Settings" %}
</h3>
</div>
<div class="w-full p-4">
<label for="{{ form.text_direction.id_for_label }}" class="block mb-2">
{{ form.text_direction.label }}
</label>
{% render_field form.text_direction|add_error_class:"border-red-500" %}
<label for="{{ form.primary_country_code.label }}"
class="font-bold block mb-1 cursor-pointer">
{{ form.primary_country_code.label }}
</label>
<div class="flex my-2">
<span class="country-flag fp fp-{{ form.instance.primary_country_code }} w-16 rounded-l {% if not form.instance.primary_country_code %}hidden{% endif %}"
title="{{ form.instance.translated_name }}"></span>
<div class="relative flex-grow">
{% render_field form.primary_country_code|add_error_class:"border-red-500" class+="country-flag-field rounded-none rounded-r border-l-0" %}
</div>
</div>
<div class="mb-2 text-s text-gray-600">
{{ form.primary_country_code.help_text }}
</div>
<label for="{{ form.secondary_country_code.label }}"
class="font-bold block mb-1 cursor-pointer">
{{ form.secondary_country_code.label }}
</label>
<div class="flex my-2">
<span class="country-flag fp fp-{{ form.instance.secondary_country_code }} w-16 rounded-l {% if not form.instance.secondary_country_code %}hidden{% endif %}"
title="{{ form.instance.translated_name }}"></span>
<div class="flex-grow">
{% render_field form.secondary_country_code|add_error_class:"border-red-500" class+="country-flag-field rounded-none rounded-r border-l-0" %}
</div>
</div>
<div class="mb-2 text-s text-gray-600">
{{ form.secondary_country_code.help_text }}
</div>
<label for="{{ form.language_color.id_for_label }}" class="block mb-2">
{{ form.language_color.label }}
</label>
<div class="flex my-2">
<span class="language-color fp fp-{{ form.instance.language_color }} w-16 rounded-l {% if not form.instance.language_color %}hidden{% endif %}"
title="{{ form.instance.translated_name }}"
id="language-color-preview"
style="background-color: {{ form.instance.language_color }}"></span>
<div class="flex-grow">
{% render_field form.language_color|add_error_class:"border-red-500" %}
</div>
</div>
<div class="mb-2 text-s text-gray-600">
{{ form.language_color.help_text }}
</div>
</div>
</div>
</div>
</div>
</div>
{% if form.instance.id and perms.cms.delete_language %}
{% if form.instance.language_tree_nodes.exists %}
<button title="{% translate "You cannot delete a language that is used in at least one region." %}"
class="btn"
disabled>
<i icon-name="trash-2"></i>
{% translate "Delete this language" %}
</button>
{% else %}
<button title="{% translate "Delete language" %}"
class="btn confirmation-button btn-red"
data-confirmation-title="{{ delete_dialog_title }}"
data-confirmation-text="{{ delete_dialog_text }}"
data-confirmation-subject="{{ form.instance.translated_name }}"
data-action="{% url 'delete_language' slug=form.instance.slug %}">
<i icon-name="trash-2"></i>
{% translate "Delete this language" %}
</button>
{% endif %}
{% endif %}
</form>
{% include "../generic_confirmation_dialog.html" %}
{% endblock content %}