{% extends 'djedi/plugins/base/editor.html' %}
{% load static staticfiles %}

{% block plugin_style %}
    <link href="{% static 'djedi/plugins/img/css/jquery.Jcrop.min.css' %}?v={{ VERSION }}" rel="stylesheet" media="screen">
    <link href="{% static 'djedi/plugins/img/css/img.css' %}?v={{ VERSION }}" rel="stylesheet" media="screen">
{% endblock %}

{% block tabs %}
    <ul class="nav navbar-default nav-tabs">
      <li class="active"><a href="#image-pane" data-toggle="tab"><i class="icon-camera"></i> Image</a></li>
      <li><a href="#html-pane" data-toggle="tab"><i class="icon-code"></i> Html</a></li>
    </ul>
{% endblock tabs %}

{% block editor %}
    <div class="tab-content">
        <div id="image-pane" class="tab-pane active">
            <input type="hidden" name="data[filename]">
            <input type="file" id="image" name="data[file]">
            <div id="dropzone"><span></span></div>
            <div id="preview" data-url="{{ data.url }}"></div>
            <div id="resize" class="body-bg">
                <label for="field-width">Width</label>
                <input type="text" name="data[width]" id="field-width" class="form-control">
                <button type="button" id="ar-lock" class="btn btn-default" data-toggle="button" title="Maintain aspect ratio" data-placement="top"><i class="icon-link"></i></button>
                <label for="field-height">Height</label>
                <input type="text" name="data[height]" id="field-height" class="form-control">
                <input type="hidden" name="data[crop]" id="field-crop">
            </div>
        </div>
        <div id="html-pane" class="tab-pane">
            <div class="form-horizontal">
                <div class="form-group">
                    <label class="col-xs-2 control-label">ID:</label>
                    <div class="col-xs-10">
                        <input type="text" class="form-control" name="data[id]">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-xs-2 control-label">Class:</label>
                    <div class="col-xs-10">
                        <input type="text" class="form-control" name="data[class]">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-xs-2 control-label">Alt:</label>
                    <div class="col-xs-10">
                        <input type="text" class="form-control" name="data[alt]">
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock editor %}

{% block plugin_script %}
    <script src="{% static 'djedi/plugins/img/js/jquery.ui.widget.js' %}?v={{ VERSION }}"></script>
    <script src="{% static 'djedi/plugins/img/js/jquery.fileupload.js' %}?v={{ VERSION }}"></script>
    <script src="{% static 'djedi/plugins/img/js/jquery.Jcrop.min.js' %}?v={{ VERSION }}"></script>
    <script src="{% static 'djedi/plugins/img/js/img.js' %}?v={{ VERSION }}"></script>
    <script>
        image = new window.ImageEditor({
            uri: '{{ uri }}',
            field: '#image',
            preview: '#preview',
            dropzone: '#dropzone'
        });
    </script>
{% endblock %}
