{% 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 }}":</h2>
        <div class="image-preview-container">
            {% if isImg %}        
                <img src="{% static filePath %}?v={{ timeHash }}" height=200px>
            {% endif %}
            <div class="text-left">
                <a href="{% static filePath %}?v={{ timeHash }}" target="_blank" class="btn"> 
                    {% if isImg %}           
                        Full size preview
                    {% else %}
                        View file
                    {% endif %}
                </a>
            </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 %}