integreat_cms/cms/templates/translations/translations_management.html
{% extends "_base.html" %}
{% load l10n %}
{% load i18n %}
{% load static %}
{% load humanize %}
{% load widget_tweaks %}
{% block content %}
<form enctype="multipart/form-data" method="post" data-unsaved-warning>
{% csrf_token %}
<div class="flex flex-wrap justify-between mb-4">
<h1 class="heading overflow-hidden text-ellipsis">
{% translate "Manage machine translations" %}
</h1>
{% if perms.cms.manage_translations %}
<button class="btn ml-auto mr-0">
{% translate "Save" %}
</button>
{% endif %}
</div>
<div class="grid xl:grid-cols-2 2xl:grid-cols-3 gap-4">
<div class="rounded row-span-2 border border-solid border-blue-500 shadow-2xl bg-white">
<div class="p-4 rounded bg-water-500">
<h3 class="heading font-bold text-black">
<i icon-name="flag" class="mr-2"></i> {% translate "Select provider" %}
</h3>
</div>
<div class="px-4 pb-4 divide-y divide-gray-200 space-y-4">
<!-- Select which languages can be machine translated -->
{% if request.region.active_languages|length == 0 %}
<div>
<div class="help-text mt-4">
{% translate "There is no active language in this region." %}
</div>
</div>
{% elif request.region.active_languages|length == 1 %}
<div>
<div class="help-text mt-4">
{% translate "There is no other language than the default language in this region." %}
</div>
</div>
{% else %}
{% if form.get_language_fields %}
<label>
{% translate "Select provider" %}
</label>
<div class="border-none help-text !m-0">
{% translate "Please select which translation provider you prefer to use for the given language:" %}
</div>
{% for language_field in form.get_language_fields %}
<div class="border-none">
<label for="{{ language_field.label }}">
{{ language_field.label }}
</label>
{{ language_field }}
</div>
{% endfor %}
{% endif %}
{% if form.unavailable_languages %}
<div>
<div class="help-text mt-4">
{% translate "These languages are currently unavailable for machine translations" %}:
</div>
<p>
{{ form.unavailable_languages|join:", " }}
</p>
</div>
{% endif %}
{% endif %}
</div>
</div>
<div class="rounded border border-solid border-blue-500 shadow-2xl bg-white">
<div class="p-4 rounded bg-water-500">
<h3 class="heading font-bold text-black">
<i icon-name="bot" class="mr-2"></i> {% translate "Machine Translation" %}
</h3>
</div>
<div class="px-4 pb-4 divide-y divide-gray-200 space-y-4">
<div>
<!-- Options related to the type of content which can be machine translated -->
<label>
{% translate "Automatic translations" %}
</label>
<div class="help-text">
{% translate "Automatically machine translate the following types of content:" %}
</div>
<label for="{{ form.machine_translate_pages.id_for_label }}">
{{ form.machine_translate_pages.label }}
</label>
{% render_field form.machine_translate_pages|add_error_class:"border-red-500" %}
<label for="{{ form.machine_translate_events.id_for_label }}">
{{ form.machine_translate_events.label }}
</label>
{% render_field form.machine_translate_events|add_error_class:"border-red-500" %}
<label for="{{ form.machine_translate_pois.id_for_label }}">
{{ form.machine_translate_pois.label }}
</label>
{% render_field form.machine_translate_pois|add_error_class:"border-red-500" %}
</div>
</div>
</div>
<div class="rounded border border-solid border-blue-500 shadow-2xl bg-white">
<div class="p-4 rounded bg-water-500">
<h3 class="heading font-bold text-black">
<i icon-name="pie-chart" class="mr-2"></i> {% translate "Translation Budget" %}
</h3>
</div>
<div class="px-4 pb-4 divide-y divide-gray-200 space-y-4">
<div>
<div id="budget-graph-container">
<canvas id="budget-graph"
data-budget-used="{{ request.region.mt_budget_used }}"
data-budget-total="{{ request.region.mt_budget }}"></canvas>
</div>
<div class="text-center font-bold">
<p>
{% translate "Available credits" %}
</p>
<p>
{{ request.region.mt_budget_remaining|intcomma }} {% translate "words" %}
</p>
</div>
<p>
{% blocktranslate trimmed with used=request.region.mt_budget_used|intcomma total=request.region.mt_budget|intcomma %}
{{ used }} of {{ total }} words used so far
{% endblocktranslate %}
</p>
<p id="mt-renewal-date"
data-renewal-month="{{ request.region.mt_renewal_month }}">
{% translate "Next reset date:" %}
</p>
</div>
</div>
</div>
<div class="2xl:col-span-2 rounded border border-solid border-blue-500 shadow-2xl bg-white">
<div class="p-4 rounded bg-water-500">
<h3 class="heading font-bold text-black">
<i icon-name="bar-chart-horizontal" class="mr-2"></i> {% translate "Number of words in the German contents" %}
</h3>
</div>
<div class="px-4 pb-4 mt-4">
<div class="help-text mt-4">
{% translate "The number of words in the latest versions per status and per content type." %}
</div>
<div class="overflow-auto">
<table class="w-full rounded bg-white">
<thead>
<tr class="border-b border-solid border-gray-200">
<th class="text-sm text-left uppercase py-3 pl-4 pr-4">
{% translate "Content type" %}
</th>
<th class="text-sm text-left uppercase py-3 pl-4 pr-4">
{% translate "Published" %}
</th>
<th class="text-sm text-left uppercase py-3 pl-4 pr-4">
{% translate "Draft" %}
</th>
<th class="text-sm text-left uppercase py-3 pl-4 pr-4">
{% translate "Pending Approval" %}
</th>
<th class="text-sm text-left uppercase py-3 pl-4 pr-4">
{% translate "Auto Save" %}
</th>
<th class="text-sm text-left uppercase py-3 pl-4 pr-4">
{% translate "Total per Content type" %}
</th>
</tr>
</thead>
{% for content, counter in word_count.items %}
<tbody>
<tr class="border-t-2 border-solid border-gray-200 hover:bg-gray-100">
<td class="pl-2">
<p class="block py-3 px-2 text-gray-800">
{{ content }}
</p>
</td>
<td class="pl-2">
<p class="block py-3 px-2 text-gray-800">
{{ counter.PUBLIC }}
</p>
</td>
<td class="pl-2">
<p class="block py-3 px-2 text-gray-800">
{{ counter.DRAFT }}
</p>
</td>
<td class="pl-2">
<p class="block py-3 px-2 text-gray-800">
{{ counter.REVIEW }}
</p>
</td>
<td class="pl-2">
<p class="block py-3 px-2 text-gray-800">
{{ counter.AUTO_SAVE }}
</p>
</td>
<td class="pl-2">
<p class="block py-3 px-2 text-gray-800">
{{ counter.PUBLIC|add:counter.DRAFT|add:counter.REVIEW|add:counter.AUTO_SAVE }}
</p>
</td>
</tr>
{% endfor %}
<tr class="border-t-2 border-solid border-gray-900 hover:bg-gray-100">
<td class="pl-2">
<p class="block font-extrabold py-3 px-2 text-gray-900">
{% translate "Total per Status" %}
</p>
</td>
<td class="pl-2">
<p class="block py-3 px-2 text-gray-800">
{{ total_public_words }}
</p>
</td>
<td class="pl-2">
<p class="block py-3 px-2 text-gray-800">
{{ total_draft_words }}
</p>
</td>
<td class="pl-2">
<p class="block py-3 px-2 text-gray-800">
{{ total_review_words }}
</p>
</td>
<td class="pl-2">
<p class="block py-3 px-2 text-gray-800">
{{ total_autosave_words }}
</p>
</td>
<td class="pl-2">
<p class="block py-3 px-2 text-gray-800">
{{ total_public_words|add:total_draft_words|add:total_review_words|add:total_autosave_words }}
</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</form>
{% endblock content %}