{% 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 %}
