{% extends "dartcms/base/index.html" %}

{% load static i18n %}

{% block js %}
    {{ block.super }}
    <script src="{% static 'dartcms/assets/easyui/jquery.easyui.min.js' %}" type="text/javascript"></script>
    <script src="{% static 'dartcms/js/lib/jquery-form/jquery.form.js' %}" type="text/javascript"></script>
    <script src="{% static 'dartcms/js/apps/filemanager/index.js' %}"></script>
{% endblock %}

{% block css %}
    {{ block.super }}
    <link rel="stylesheet" href="{% static 'dartcms/assets/easyui/themes/metro/easyui.css' %}"/>
    <link rel="stylesheet" href="{% static 'dartcms/assets/easyui/themes/icon.css' %}"/>
{% endblock %}

{% block body %}

    {% csrf_token %}

    <div id="id-context-variables" data-index-url="{% url 'dartcms:filemanager:index' %}"></div>

    <div id="id-fm-layout" class="easyui-layout" style="width:100%;height:100%;">

        <div id="id-fm-tree-menu" class="easyui-menu" style="width:140px;">
            <div onclick="$('#id-rename-folder-dlg').dialog('open');"
                 data-options="iconCls:'icon-remove'">{% trans 'Rename' %}
            </div>
            <div onclick="$('#id-remove-folder-dlg').dialog('open');"
                 data-options="iconCls:'icon-remove'">{% trans 'Delete' %}</div>
        </div>

        <div id="id-fm-browse-menu" class="easyui-menu" style="width:140px;">
            <div onclick="$('#id-create-folder-dlg').dialog('open');"
                 data-options="iconCls:'icon-add'">{% trans 'Create folder' %}</div>
        </div>

        <div id="id-create-folder-dlg" title="{% trans 'Create folder' %}"
             style="width:400px;height:150px;padding:10px">
            <form>
                <div style="margin-bottom:10px;"><label for="id-folder-name">{% trans 'Folder name' %}</label></div>
                <div><input type="text" name="name" id="id-folder-name" style="width:100%; box-sizing: border-box;"/>
                </div>
            </form>
        </div>

        <div id="id-rename-folder-dlg" title="{% trans 'Rename folder' %}"
             style="width:400px;height:150px;padding:10px">
            <form>
                <div style="margin-bottom:10px;"><label for="id-new-folder-name">{% trans 'New folder name' %}</label>
                </div>
                <div><input type="text" name="folder_name" id="id-new-folder-name"
                            style="width:100%; box-sizing: border-box;"/></div>
            </form>
        </div>

        <div id="id-remove-folder-dlg" title="{% trans 'Delete folder' %}"
             style="width:400px;height:150px;padding:10px">
            {% trans 'Are you sure that you want to delete this folder? This action will delete all files inside it.' %}
        </div>

        <div style="visibility: hidden;">
            <form id="id-file-uploads-form" enctype="multipart/form-data">
                <input type="file" multiple="true" name="files" id="id-select-file"/>
                <input type="hidden" id="id-folder-id" value="" name="folder_id"/>
            </form>
        </div>

        <div id="id-fm-browse-wrapper" data-options="region:'west', border:true" title="{% trans 'Folders' %}"
             style="width:180px;">
            <div id="id-fm-tree"></div>
        </div>
        <div data-options="region:'center', border:true, toolbar:toolbar" title="{% trans 'DartCMS FileManager' %}">
            <p id="id-helper" class="help-block" style="margin:5px;">{% trans 'Choose folder' %}</p>

            <div id="id-fm-grid"></div>
        </div>
    </div>
{% endblock %}