{% extends "_base.html" %}
{% load i18n %}
{% block content %}
    {% load static %}
    {% load widget_tweaks %}
    {% load rules %}
    <div class="mb-6">
        <h1 class="heading">
            {% with translations.first.title as content_title %}
                {% blocktrans %}"Versions of {{ content_title }}"{% endblocktrans %}
            {% endwith %}
        </h1>
        <a href="{{ edit_url }}" class="btn btn-outline">
            <i icon-name="arrow-left-circle" class="align-top"></i> {{ back_to_form_label }}
        </a>
    </div>
    <form method="post" action="{{ versions_url }}">
        {% csrf_token %}
        <div class="w-3/5 m-auto mb-28 relative">
            <input class="relative z-10 pt-1"
                   type="range"
                   name="revision"
                   min="1"
                   max="{{ translations|length }}"
                   value="{{ selected_version.version }}"
                   id="revision-slider"
                   list="steplist" />
            <output id="revision-info" class="whitespace-nowrap">
                <b>{% translate "Version" %}:</b> <span id="revision-number"></span>
                <br />
                <b>{% translate "Author" %}:</b> <span id="revision-editor"></span>
                <br />
                <b>{% translate "Date" %}:</b> <span id="revision-date"></span>
                {% if translations.first.hix_enabled and not translations.first.hix_ignore %}
                    <br />
                    <b>{% translate "HIX" %}:</b> <span id="revision-hix"></span>
                {% endif %}
            </output>
            <datalist id="steplist" class="w-full flex font-mono">
                {% for translation in translations reversed %}
                    <option style="{% if translation.version > 1 %} margin-left: -webkit-calc(((100% - 25.6px) / ({{ translations|length }} - 1)) - 25.6px);
                                   margin-left: -moz-calc(((100% - 25.6px) / ({{ translations|length }} - 1)) - 25.6px);
                                   margin-left: calc(((100% - 25.6px) / ({{ translations|length }} - 1)) - 25.6px);
                                   {% endif %} {% if translation.version > 9 %} padding-left: 3.2px;
                                   padding-right: 3.2px;
                                   {% endif %}">
                        {{ translation.version }}
                    </option>
                {% endfor %}
            </datalist>
        </div>
        {% translate "deleted account" as deleted_user_text %}
        {% for translation in translations %}
            <div class="w-full hidden revision-wrapper"
                 id="revision-{{ translation.version }}"
                 data-date="{{ translation.last_updated }}"
                 data-editor="{% firstof translation.creator deleted_user_text %}"
                 data-status="{{ translation.status }}"
                 data-hix="{{ translation.rounded_hix_score }}">
                <div class="flex justify-between">
                    <span>
                        <label class="inline-block">
                            {% translate "Publication status" %}:
                        </label>
                        {{ translation.get_status_display }}
                        {% if translation == api_version %}
                            ({% translate "This is the version shown in the apps." %})
                        {% elif forloop.first %}
                            {% if api_version %}
                                {% with api_version.version as version %}
                                    ({% blocktrans %}This version is <b>not</b> displayed in the apps - but version {{ version }} instead{% endblocktrans %})
                                {% endwith %}
                            {% else %}
                                ({% translate "This translation is <b>not</b> shown in the apps" %})
                            {% endif %}
                        {% endif %}
                        {% if translation.minor_edit %}
                            - <i>{% translate "Minor edit" %}</i>
                        {% endif %}
                    </span>
                    <span>
                        {% if translation.hix_enabled and not translation.hix_ignore and translation.hix_score %}
                            <span class="pr-4">
                                <label class="inline-block">
                                    {% translate "HIX score" %}:
                                </label>
                                {{ translation.rounded_hix_score }}
                            </span>
                        {% endif %}
                        <label class="inline-block">
                            {% translate "Author" %}:
                        </label>
                        {% firstof translation.creator deleted_user_text %}
                    </span>
                </div>
                <div class="revision-plain hidden">
                    <label>
                        {{ slug_label }}:
                    </label>
                    {{ translation.get_absolute_url }}
                    <label>
                        {{ title_label }}
                    </label>
                    <h1>
                        {{ translation.title }}
                    </h1>
                    <label>
                        {{ content_label }}
                    </label>
                    {{ translation.content|safe }}
                </div>
                <div class="revision-diff w-full p-4 mb-4 rounded border border-solid border-gray-200 shadow bg-white">
                </div>
            </div>
        {% endfor %}
        <div id="revision-0" class="hidden">
            <div class="revision-plain">
                <label>
                    {{ slug_label }}:
                </label>
                <label>
                    {{ title_label }}
                </label>
                <label>
                    {{ content_label }}
                </label>
            </div>
        </div>
        <div class="w-full p-4 flex justify-end gap-4 action-buttons">
            {% if not object.archived %}
                {% if can_publish %}
                    <!-- Reject buttons for latest version  -->
                    <button name="status"
                            class="btn btn-red hidden"
                            data-status="{{ AUTO_SAVE }}"
                            data-max>
                        {% translate "Discard auto save" %}
                    </button>
                    <button name="status"
                            class="btn btn-red hidden"
                            data-status="{{ REVIEW }}"
                            data-max>
                        {% translate "Reject changes" %}
                    </button>
                    <!-- Draft buttons -->
                    <button name="status"
                            value="{{ DRAFT }}"
                            class="btn btn-outline hidden"
                            data-status="{{ PUBLIC }}">
                        {% translate "Restore as draft" %}
                    </button>
                    <button name="status"
                            value="{{ DRAFT }}"
                            class="btn btn-outline hidden"
                            data-status="{{ DRAFT }}">
                        {% translate "Restore as draft" %}
                    </button>
                    <button name="status"
                            value="{{ DRAFT }}"
                            class="btn btn-outline hidden"
                            data-status="{{ AUTO_SAVE }}">
                        {% translate "Restore auto save as draft" %}
                    </button>
                    <button name="status"
                            value="{{ DRAFT }}"
                            class="btn btn-outline hidden"
                            data-status="{{ REVIEW }}">
                        {% translate "Accept and restore changes as draft" %}
                    </button>
                    <!-- Draft buttons for latest version -->
                    <button name="status"
                            value="{{ DRAFT }}"
                            class="btn btn-outline hidden"
                            data-status="{{ REVIEW }}"
                            data-max>
                        {% translate "Accept current changes as draft" %}
                    </button>
                    <!-- Publish buttons -->
                    <button name="status"
                            value="{{ PUBLIC }}"
                            class="btn hidden"
                            data-status="{{ PUBLIC }}">
                        {% translate "Restore and publish" %}
                    </button>
                    <button name="status"
                            value="{{ PUBLIC }}"
                            class="btn hidden"
                            data-status="{{ DRAFT }}">
                        {% translate "Restore and publish" %}
                    </button>
                    <button name="status"
                            value="{{ PUBLIC }}"
                            class="btn hidden"
                            data-status="{{ AUTO_SAVE }}">
                        {% translate "Restore and publish auto save" %}
                    </button>
                    <button name="status"
                            value="{{ PUBLIC }}"
                            class="btn hidden"
                            data-status="{{ REVIEW }}">
                        {% translate "Accept, restore and publish changes" %}
                    </button>
                    <!-- Publish buttons for latest version  -->
                    <button name="status"
                            value="{{ PUBLIC }}"
                            class="btn hidden"
                            data-status="{{ PUBLIC }}"
                            data-max>
                        {% translate "Refresh date" %}
                    </button>
                    <button name="status"
                            value="{{ PUBLIC }}"
                            class="btn hidden"
                            data-status="{{ DRAFT }}"
                            data-max>
                        {% translate "Publish the current draft" %}
                    </button>
                    <button name="status"
                            value="{{ PUBLIC }}"
                            class="btn hidden"
                            data-status="{{ AUTO_SAVE }}"
                            data-max>
                        {% translate "Publish auto save" %}
                    </button>
                    <button name="status"
                            value="{{ PUBLIC }}"
                            class="btn hidden"
                            data-status="{{ REVIEW }}"
                            data-max>
                        {% translate "Accept and publish the current changes" %}
                    </button>
                {% elif can_edit %}
                    <button name="status" value="{{ REVIEW }}" class="btn">
                        {% translate "Restore this version and submit for approval" %}
                    </button>
                {% endif %}
            {% endif %}
        </div>
    </form>
{% endblock content %}
