{% extends "admin/change_form.html" %}
{% load i18n admin_modify staticfiles filer_admin_tags %}

{% block extrastyle %}
{{ block.super }}
<link rel="stylesheet" type="text/css" href="{% static 'filer/css/admin_filer.css' %}">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.5/ace.js"></script>
<script>
$(document).ready(function(){
    var textarea = $('#id_content').css('display', 'none');;
    var settings = textarea.data();
    var div = jQuery('<div>', {
        position: 'absolute',
        width: '100%',
        height: textarea.height(),
        'class': textarea.attr('class')
    }).insertBefore(textarea);

    // init editor with settings
    var editor = ace.edit(div[0]);
    editor.getSession().setValue(textarea.val());
    editor.getSession().setMode('ace/mode/monokai');
    editor.setOptions({
        fontSize: '14px',
        cursorStyle: 'smooth'
    });
    editor.renderer.setScrollMargin(5, 5);

    // send data back to textarea when submitting
    textarea.closest('form').submit(function () {
        textarea.val(editor.getSession().getValue());
    })
});
</script>
<link href="{% static 'template_editor/css/jquery.ezdz.css' %}" rel="stylesheet" type="text/css">
<script src="{% static 'template_editor/js/jquery.ezdz.js' %}"></script>
{% endblock %}

{% block object-tools %}
    <section class="image-info image-info-detail">
        <h2>"{{ original.path }}" - {% trans "Version" %} {{ version.number }} :</h2>
        <div class="image-preview-container">
            {% if isImg %}        
                <img src="{% static version.backupPath %}?v={{ version.number }}" height=200px>
            {% endif %}
            <div class="text-left">
                {% if version.preVersion %}
                <a href="{% static version.preVersion.backupPath %}?v={{ version.preVersion.number }}" target="_blank" class="btn"> 
                    {% trans "View previous version file" %}
                </a>
                {% endif %}

                <a href="{% static version.backupPath %}?v={{ version.number }}" target="_blank" class="btn"> 
                    {% if isImg %}           
                        {% trans "Full size preview" %}
                    {% else %}
                        {% trans "View current version file" %}
                    {% endif %}
                </a>

                {% if version.nextVersion %}
                <a href="{% static version.nextVersion.backupPath %}?v={{ version.nextVersion.number }}" target="_blank" class="btn"> 
                    {% trans "View next version file" %}
                </a>
                {% endif %}
            </div>
            <div class="text-right">
                
                    {% if version.preVersion %}
                    <a href="{% if moduleName == 'statics' %}{% url 'admin:template_editor_static_change' original.id %}{% else %}{% url 'admin:template_editor_template_change' original.id %}{% endif %}?version={{ version.preVersion.number }}" class="btn"> 
                        {% trans "Undo to Version" %} {{ version.preVersion.number }}
                    </a>
                    {% endif %}

                    {% if version.nextVersion %}
                    <a href="{% if moduleName == 'statics' %}{% url 'admin:template_editor_static_change' original.id %}{% else %}{% url 'admin:template_editor_template_change' original.id %}{% endif %}?version={{ version.nextVersion.number }}" class="btn"> 
                        {% trans "Redo to Version" %} {{ version.nextVersion.number }}
                    </a>
                    {% endif %}
                
            </div>
        </div>
    </section>
{% endblock %}

{% block admin_change_form_document_ready %}
{{ block.super }}
<script>
    $('input[type="file"]').ezdz('preview', null);
</script>
<style>
    .ezdz-dropzone img {
        max-height: 200px;
    }
</style>
{% endblock %}