{% extends "_base.html" %}
{% load i18n %}
{% load static %}
{% load widget_tweaks %}
{% load content_filters %}
{% load page_filters %}
{% load rules %}
{% load render_bundle from webpack_loader %}
{% block content %}
    <form method="post" id="content_form" data-unsaved-warning>
        {% csrf_token %}
        <div class="w-full flex flex-wrap justify-between gap-4 mb-4">
            <h1 class="heading">
                {% if imprint %}
                    {% if imprint_translation_form.instance.id %}
                        {% translate "Edit imprint" %}
                    {% else %}
                        {% translate "Create new imprint translation" %}
                    {% endif %}
                {% else %}
                    {% translate "Create imprint" %}
                {% endif %}
            </h1>
            <div class="flex flex-wrap gap-4 ml-auto mr-0 items-center">
                {% include "generic_auto_save_note.html" with form_instance=imprint_translation_form.instance %}
                {% if perms.cms.change_imprintpage %}
                    <button name="status" value="{{ DRAFT }}" class="btn btn-outline">
                        {% translate "Save as draft" %}
                    </button>
                    <button name="status" value="{{ PUBLIC }}" class="btn">
                        {% if imprint_translation_form.instance.status == PUBLIC %}
                            {% translate "Update" %}
                        {% else %}
                            {% translate "Publish" %}
                        {% endif %}
                    </button>
                {% endif %}
            </div>
        </div>
        <div class="grid {% if imprint %}3xl:grid-cols-[minmax(0px,_1fr)_400px]{% endif %} gap-4">
            <div class="flex flex-wrap flex-col flex-auto">
                {% include "_form_language_tabs.html" with target="edit_imprint" instance=imprint %}
                <div class="w-full rounded border border-blue-500 bg-white flex flex-col flex-auto">
                    <div class="w-full p-4 flex flex-col flex-auto">
                        <div class="flex justify-between mr-2">
                            <label for="{{ page_translation_form.title.id_for_label }}">
                                {{ imprint_translation_form.title.label }}
                            </label>
                            {% if imprint_translation_form.instance.id %}
                                <div class="grid grid-cols-2 text-right">
                                    <div class="font-bold pr-2">
                                        {% translate "Version" %}:
                                    </div>
                                    <div>
                                        {{ imprint_translation_form.instance.version }}
                                        (<a href="{% url 'imprint_versions' region_slug=request.region.slug language_slug=language.slug %}"
   class="text-blue-500 hover:underline">{% translate "Show" %}</a>)
                                    </div>
                                    <div class="font-bold pr-2">
                                        {% translate "Status" %}:
                                    </div>
                                    <div>
                                        {{ imprint_translation_form.instance.get_status_display }}
                                    </div>
                                </div>
                            {% endif %}
                        </div>
                        {% render_field imprint_translation_form.title|add_error_class:"border-red-500" class+="mb-2" %}
                        {% if imprint_translation_form.instance.id %}
                            {% if request.region.short_urls_enabled and request.user.expert_mode %}
                                <div class="flex items-center">
                                    <label class="inline-block mr-2">
                                        {% translate "Short URL" %}:
                                    </label>
                                    <a href="{{ imprint_translation_form.instance.short_url }}"
                                       target="_blank"
                                       rel="noopener noreferrer"
                                       class="text-blue-500 hover:underline">{{ imprint_translation_form.instance.short_url }}</a>
                                    <a href="#"
                                       data-copy-to-clipboard="{{ imprint_translation_form.instance.short_url }}"
                                       title="{% translate "Copy to clipboard" %}"
                                       class="mx-2 text-gray-800 hover:text-blue-500">
                                        <i icon-name="copy"></i>
                                        <i icon-name="check" class="hidden text-green-500"></i>
                                    </a>
                                </div>
                            {% endif %}
                        {% endif %}
                        <div id="link-container" class="flex items-center">
                            <label class="inline-block">
                                {% translate "Link to the imprint" %}:
                            </label>
                            <a href="{{ WEBAPP_URL }}/{{ request.region.slug }}/{{ language.slug }}/{{ IMPRINT_SLUG }}"
                               target="_blank"
                               rel="noopener noreferrer"
                               class="text-blue-500 hover:underline">{{ WEBAPP_URL }}/{{ request.region.slug }}/{{ language.slug }}/{{ IMPRINT_SLUG }}</a>
                            <a href="#"
                               data-copy-to-clipboard="{{ WEBAPP_URL }}/{{ request.region.slug }}/{{ language.slug }}/{{ IMPRINT_SLUG }}"
                               title="{% translate "Copy to clipboard" %}"
                               class="px-2 text-gray-800 hover:text-blue-500">
                                <i icon-name="copy"></i>
                                <i icon-name="check" class="hidden text-green-500"></i>
                            </a>
                        </div>
                        <label for="{{ imprint_translation_form.content.id_for_label }}">
                            {{ imprint_translation_form.content.label }}
                        </label>
                        {% render_field imprint_translation_form.content class+="tinymce_textarea flex-auto" %}
                    </div>
                </div>
            </div>
            {% if imprint %}
                <div class="flex flex-col gap-4">
                    <div class="rounded border border-blue-500 shadow-2xl bg-white">
                        <div class="rounded p-4 bg-water-500">
                            <h3 class="heading font-bold">
                                <i icon-name="feather" class="pb-1"></i>
                                {% translate "Minor edit" %}
                            </h3>
                        </div>
                        <div class="w-full px-4 pb-4 rounded shadow bg-white">
                            <label>
                                {% minor_edit_label request.region language %}
                            </label>
                            {% render_field imprint_translation_form.minor_edit %}
                            <label for="{{ imprint_translation_form.minor_edit.id_for_label }}"
                                   class="secondary">
                                {{ imprint_translation_form.minor_edit.label }}
                            </label>
                            <div class="help-text">
                                {% minor_edit_help_text request.region language imprint_translation_form %}
                            </div>
                        </div>
                    </div>
                    {% if perms.cms.delete_imprintpage %}
                        <div class="rounded border border-blue-500 shadow-2xl bg-white">
                            <div class="rounded p-4 bg-water-500">
                                <h3 class="heading font-bold text-black">
                                    <i icon-name="wrench" class="pb-1"></i>
                                    {% translate "Actions" %}
                                </h3>
                            </div>
                            <div class="px-4 pb-4">
                                <label>
                                    {% translate "Delete imprint" %}
                                </label>
                                <button title="{% translate "Delete imprint" %}"
                                        class="btn btn-red confirmation-button w-full"
                                        data-confirmation-title="{% translate "Please confirm that you really want to delete the imprint" %}"
                                        data-confirmation-text="{% translate "All translations of the imprint will also be deleted." %}"
                                        data-confirmation-subject="{{ imprint_translation_form.instance.title }}"
                                        data-action="{% url 'delete_imprint' region_slug=request.region.slug %}">
                                    <i icon-name="trash-2" class="mr-2"></i>
                                    {% translate "Delete the imprint" %}
                                </button>
                            </div>
                        </div>
                    {% endif %}
                    <div class="rounded border border-blue-500 shadow-2xl bg-white">
                        <div class="rounded p-4 bg-water-500">
                            <h3 class="heading font-bold text-black">
                                <i icon-name="columns" class="pb-1"></i>
                                {% translate "Side-by-Side view" %}
                            </h3>
                        </div>
                        <div class="px-4 pb-4">
                            <label for="side-by-side-select">
                                {% translate "Direction of translation" %}
                            </label>
                            <select id="side-by-side-select" data-unsaved-warning-exclude>
                                <option value="">
                                    ---------
                                </option>
                                {% for side_by_side_language_option in side_by_side_language_options %}
                                    <option value="{% url 'sbs_edit_imprint' region_slug=request.region.slug language_slug=side_by_side_language_option.value %}"
                                            {% if side_by_side_language_option.disabled %}disabled{% elif side_by_side_language_option.selected %}selected{% endif %}>
                                        {{ side_by_side_language_option.label }}
                                    </option>
                                {% endfor %}
                            </select>
                            <a id="side-by-side-link" class="btn mt-4" disabled="disabled">
                                <i icon-name="external-link"></i>
                                {% translate "Show translations side by side" %}
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        {% endif %}
    </form>
    {{ media_config_data|json_script:"media_config_data" }}
    {% if not perms.cms.change_imprintpage %}
        {% include "../_tinymce_config.html" with readonly=1 %}
    {% else %}
        {% include "../_tinymce_config.html" %}
        {% include "../_content_edit_lock.html" %}
    {% endif %}
    {% include "../generic_confirmation_dialog.html" %}
{% endblock content %}
{% block javascript %}
    {% render_bundle 'editor' 'js' %}
{% endblock javascript %}
