{% extends "_base.html" %}
{% load i18n %}
{% block content %}
{% load static %}
{% load widget_tweaks %}
{% load rules %}

<div class="mb-6">
    <h1 class="heading">{% trans 'Imprint versions' %}</h1>
    <a href="{% url 'edit_imprint' region_slug=request.region.slug language_slug=language.slug %}" class="btn btn-gray">
        <i data-feather="arrow-left-circle" class="align-top"></i> {% trans 'Back to the imprint form' %}
    </a>
</div>

<form method="post" action="{% url 'imprint_revisions' region_slug=request.region.slug language_slug=language.slug %}">
    {% 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="{{ imprint_translations.count }}" value="{{ selected_revision.version }}" id="revision-slider" list="steplist">
        <output id="revision-info" class="whitespace-nowrap">
            <b>{% trans 'Version' %}:</b> <span id="revision-number"></span><br>
            <b>{% trans 'Author' %}:</b> <span id="revision-editor"></span><br>
            <b>{% trans 'Date' %}:</b> <span id="revision-date"></span>
        </output>
        <datalist id ="steplist" class="w-full flex font-mono">
            {% for imprint_translation in imprint_translations reversed %}
                <option style="
                    {% if imprint_translation.version > 1 %}
                        margin-left: -webkit-calc(((100% - 25.6px) / ({{ imprint_translations.count }} - 1)) - 25.6px);
                        margin-left: -moz-calc(((100% - 25.6px) / ({{ imprint_translations.count }} - 1)) - 25.6px);
                        margin-left: calc(((100% - 25.6px) / ({{ imprint_translations.count }} - 1)) - 25.6px);
                    {% endif %}
                    {% if imprint_translation.version > 9 %}
                        padding-left: 3.2px;
                        padding-right: 3.2px;
                    {% endif %}
                    ">
                        {{ imprint_translation.version }}
                </option>
            {% endfor %}
        </datalist>
    </div>

    {% trans 'deleted user' as deleted_user_text %}
    {% for imprint_translation in imprint_translations %}
    <div class="w-full hidden revision-wrapper" id="revision-{{ imprint_translation.version }}" data-date="{{ imprint_translation.last_updated }}" data-editor="{% firstof imprint_translation.creator deleted_user_text %}">
        <label class="inline-block mb-2 font-bold">{% trans 'Status' %}:</label>
        {{ imprint_translation.get_status_display }}
        {% if imprint_translation == api_revision %}
            ({% trans 'This is the version shown in the apps.' %})
        {% elif forloop.first %}
            ({% trans 'This is <b>not</b> the version shown in the apps.' %})
        {% endif %}
        <span class="float-right">
            <label class="inline-block mb-2 font-bold">{% trans 'Author' %}:</label>
            {% firstof imprint_translation.creator deleted_user_text %}
        </span>
        <div class="revision-plain hidden">
            <label>{% trans 'Permalink' %}:</label>
            {{ imprint_translation.get_absolute_url }}
            <label>{% trans 'Title' %}</label>
            <h1>{{ imprint_translation.title }}</h1>
            <label>{% trans 'Content' %}</label>
            {{ imprint_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>{% trans 'Permalink' %}:</label>
            <label>{% trans 'Title' %}</label>
            <label>{% trans 'Content' %}</label>
        </div>
    </div>
    {% if perms.cms.change_imprintpage %}
        <div class="w-full p-4 flex justify-end gap-4">
            <button name="status" value="{{ DRAFT }}" class="btn btn-gray">{% trans 'Restore this version as draft' %}</button>
            <button name="status" value="{{ PUBLIC }}" class="btn">{% trans 'Restore and publish this version' %}</button>
        </div>
    {% endif %}
</form>
{% endblock %}
