{% extends "_collapsible_box.html" %}
{% load i18n %}
{% load l10n %}
{% load widget_tweaks %}
{% block collapsible_box_icon %}
    gauge
{% endblock collapsible_box_icon %}
{% block collapsible_box_title %}
    {% translate "Text understandability" %}
{% endblock collapsible_box_title %}
{% block collapsible_box_content %}
    <div class="relative">
        <div id="hix-loading"
             class="{% if page_form.instance.hix_ignore %} hidden{% endif %} absolute w-full h-full bg-white bg-opacity-75">
            <div class="relative top-1/3 text-center">
                <i icon-name="loader" class="animate-spin"></i> {% translate "Loading..." %}
            </div>
        </div>
        {% if not request.user.expert_mode and page_form.instance.hix_ignore %}
            <div class="help-text">
                {% translate "HIX value calculation is disabled for this page." %}
            </div>
        {% endif %}
        <div id="hix-block"
             class="{% if page_form.instance.hix_ignore %}hidden{% endif %}">
            <div class="help-text mt-2">
                {% translate "Improve the understandability of the page here:" %}
            </div>
            <div id="hix-container"
                 data-content-changed
                 data-initial-hix-score="{{ page_translation_form.instance.rounded_hix_score|safe }}"
                 data-initial-hix-feedback="{{ page_translation_form.instance.hix_feedback }}">
                <div id="hix-bar">
                    <span id="hix-bar-fill">
                        <div id="hix-value">
                            HIX
                        </div>
                    </span>
                </div>
            </div>
            <div class="mt-2 mb-2 pb-2 pt-2">
                <div data-hix-state="updated" class="text-gray-800 hidden">
                    <i icon-name="check-circle" class="text-green-400 size-6 pr-1"></i>
                    {% translate "HIX value is up to date" %}
                </div>
                <div data-hix-state="outdated"
                     class="text-gray-800 bg-yellow-300 rounded p-3 hidden">
                    <i icon-name="alert-circle" class="size-6 pr-1"></i>
                    {% translate "HIX value is outdated" %}
                </div>
                <div data-hix-state="error"
                     class="text-gray-800 bg-red-300 rounded p-3 hidden">
                    <i icon-name="alert-triangle" class="size-6 pr-1"></i>
                    {% translate "HIX value could not be calculated." %} {% translate "Please try again later." %}
                </div>
                <div data-hix-state="no-content"
                     class="text-gray-800 bg-blue-300 rounded p-3 hidden">
                    <i icon-name="info" class="size-6 pr-1"></i>
                    {% translate "There is no page content" %}
                </div>
            </div>
            <button id="btn-update-hix-value"
                    class="btn w-full"
                    data-url="{% url "get_hix_score" region_slug=request.region.slug %}">
                <i icon-name="refresh-ccw"></i>
                {% translate "Update" %}
            </button>
            <div id="hix-feedback" class="hidden">
                <label class="secondary">
                    {% translate "For review:" %}
                </label>
                <div hix-feedback-category="nested-sentences"
                     class="help-text mt-2 hidden">
                    <i icon-name="bar-chart-big" class="size-6 pr-1"></i>
                    {% translate "The text contains" %}
                    <span class="font-bold"></span>
                    <span class="font-bold">{% translate "nested sentences" %}</span>
                </div>
                <div hix-feedback-category="long-sentences" class="help-text mt-2 hidden">
                    <i icon-name="bar-chart-big" class="size-6 pr-1"></i>
                    {% translate "The text contains" %}
                    <span class="font-bold"></span>
                    <span class="font-bold">{% translate "sentences that are too long" %}</span>
                </div>
                <div hix-feedback-category="long-words" class="help-text mt-2 hidden">
                    <i icon-name="bar-chart-big" class="size-6 pr-1"></i>
                    {% translate "The text contains" %}
                    <span class="font-bold"></span>
                    <span class="font-bold">{% translate "words that are too long" %}</span>
                </div>
                <div hix-feedback-category="passive-voice-sentences"
                     class="help-text mt-2 hidden">
                    <i icon-name="bar-chart-big" class="size-6 pr-1"></i>
                    {% translate "The text contains" %}
                    <span class="font-bold"></span>
                    <span class="font-bold">{% translate "sentences in passive voice" %}</span>
                </div>
                <div hix-feedback-category="infinitive-constructions"
                     class="help-text mt-2 hidden">
                    <i icon-name="bar-chart-big" class="size-6 pr-1"></i>
                    {% translate "The text contains" %}
                    <span class="font-bold"></span>
                    <span class="font-bold">{% translate "infinitive constructions" %}</span>
                </div>
                <div hix-feedback-category="nominal-sentences"
                     class="help-text mt-2 hidden">
                    <i icon-name="bar-chart-big" class="size-6 pr-1"></i>
                    {% translate "The text contains" %}
                    <span class="font-bold"></span>
                    <span class="font-bold">{% translate "sentences in nominal style" %}</span>
                </div>
                <div hix-feedback-category="future-tense-sentences"
                     class="help-text mt-2 hidden">
                    <i icon-name="bar-chart-big" class="size-6 pr-1"></i>
                    {% translate "The text contains" %}
                    <span class="font-bold"></span>
                    <span class="font-bold">{% translate "sentences in the future tense" %}</span>
                </div>
                <div hix-feedback-category="abbreviations" class="help-text mt-2 hidden">
                    <i icon-name="bar-chart-big" class="size-6 pr-1"></i>
                    {% translate "The text contains" %}
                    <span class="font-bold"></span>
                    <span class="font-bold">{% translate "abbreviations" %}</span>
                </div>
            </div>
            <label class="secondary pt-2">
                {% translate "HIX value unexpectedly bad?" %}
            </label>
            <div class="help-text mt-2">
                {% translate "Editorial tips and possible reasons can be found " %}
                <a href="{% translate "https://wiki.tuerantuer.org/write-texts" %}" rel="nooperner noreferrer" target="_blank" class="text-blue-500 underline">{% translate "here" %}</a>.
            </div>
        </div>
        <div {% if not request.user.expert_mode %}class="hidden"{% endif %}>
            {% render_field page_form.hix_ignore %}
            <label for="{{ page_form.hix_ignore.id_for_label }}" class="secondary">
                {{ page_form.hix_ignore.label }}
            </label>
            <div class="help-text">
                {{ page_form.hix_ignore.help_text }}
            </div>
        </div>
    </div>
{% endblock collapsible_box_content %}
