{% extends 'admin/change_list.html' %}
{% load i18n %}
{% block title %}{% trans "Basic file manager" %}{% endblock %}

{# Should I remove it? #}
{% block breadcrumbs %}
    <div class="breadcrumbs">
        <a href="#">{% trans "Basic file manager" %}</a>
        {% block crumbs %}{% endblock %}
    </div>
{% endblock %}

{# Scripts'n'Templates #}
{% block extrahead %}
    {{ block.super }}
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.1.7/underscore-min.js"></script>
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.5.3/backbone-min.js"></script>
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/json2/20110223/json2.js"></script>
    <script type="text/javascript" src="https://raw.github.com/jquery/jquery-tmpl/master/jquery.tmpl.min.js"></script>
    <script type="text/javascript">
        window.BFMOptions = {{ settings|safe }}
    </script>
    <script type="text/javascript">
        {% include 'django_bfm/application.js' %}
    </script>
    <script id="fileBrowseHeadTemplate" type="text/x-jquery-tmpl">
        <th>{% trans "Actions" %}</th>
        <th class="${filename}" data-name="filename"><a>{% trans "Filename" %}</a></th>
        <th class="${size}" data-name="size"><a>{% trans "Size" %}</a></th>
        <th class="${date}" data-name="date"><a>{% trans "Date" %}</a></th>
        <th class="${mime}" data-name="mime"><a>{% trans "Type" %}</a></th>
    </script>
    <script id="fileBrowseTemplate" type="text/x-jquery-tmpl">
        <td class="tight icons">
            <a class="delete" title="{% trans "Delete" %}"></a>
            <a class="touch" title="{% trans "Touch" %}"></a>
            <a class="rename" title="{% trans "Rename" %}"></a>
            <a class="resize" title="{% trans "Resize" %}"></a>
        </td>
        <td><a href="${url}">${filename}</a></td>
        <td class="tight">${psize}</td>
        <td class="tight">${pdate}</td>
        <td class="tight">${mimetype}</td>
    </script>
    <script id="fileRenameTemplate" type="text/x-jquery-tmpl">
        <h2>{% trans "Rename file" %}</h2>
        <input type="text" name="new" value="${filename}">
        <input type="hidden" name="file" value="${filename}">
        <input type="hidden" name="directory" value="${rel_dir}">
        <input type="submit" class="submit" value="{% trans "Rename" %}">
        <input type="submit" class="cancel" value="{% trans "Cancel" %}">
    </script>
    <script id="imageResizeTemplate" type="text/x-jquery-tmpl">
        <h2>{% trans "Resize image" %}</h2>
        <input type="hidden" name="file" value="${filename}">
        <input type="hidden" name="directory" value="${rel_dir}">
        {% trans "New width" %}
        <input type="text" style="width:50px" name="new_w" value="">
        <br />
        {% trans "New height" %}
        <input type="text" style="width:50px" name="new_h" value="">
        <br />
        {% trans "Keep ratio" %}
        <input type="checkbox" name="keepratio" value="yes" checked>
        <br />
        {% trans "Resize filter" %}
        <select name="filter">
            <option value="ANTIALIAS">{% trans "Antialiasing" %}</option>
            <option value="BICUBIC">{% trans "Bicubic" %}</option>
            <option value="BILINEAR">{% trans "Bilinear" %}</option>
            <option value="NEAREST">{% trans "Nearest" %}</option>
        </select>
        <br />
        <input type="submit" class="submit" value="{% trans "Resize" %}">
        <input type="submit" class="cancel" value="{% trans "Cancel" %}">
    </script>
    <script id="startUploadTemplate" type="text/x-jquery-tmpl">
        <form>
            <div class="button submit">{% trans "Upload files" %}</div>
            <input type="file" class="selector" multiple />
        </form>
    </script>
    <script id="UploadablesTemplate" type="text/x-jquery-tmpl">
        <div class="uploadinghead">
            <div class="status">{% trans "Uploading" %}&nbsp;(<span class="speed">0 B/s</span>)</div>
            <div class="controls"><a class="icon minimize"></a></div>
        </div>
        <div class="uploading">
            <table></table>
        </div>
    </script>
    <script id="UploadableTemplate" type="text/x-jquery-tmpl">
        <tr>
            <td>${filename}</td>
            <td class="tight"><a class="icon stop"></a></td>
        </tr>
        <tr class="uploadstatus"><td colspan="2"><span class="progress"></span></td></tr>
    </script>
    <script id="PaginatorCurrentPageTemplate" type="text/x-jquery-tmpl">
        <span class="this-page">${page}</span>&nbsp;
    </script>
    <script id="PaginatorPageTemplate" type="text/x-jquery-tmpl">
        <a href="#">${page}</a>&nbsp;
    </script>
    <script id="PaginatorFirstPageTemplate" type="text/x-jquery-tmpl">
        <a href="#" class="firstpage">{% trans "First page" %}</a>&nbsp;
    </script>
    <script id="PaginatorLastPageTemplate" type="text/x-jquery-tmpl">
        <a href="#" class="lastpage">{% trans "Last page" %}</a>&nbsp;
    </script>
    <script id="UploadSuccessTemplate" type="text/x-jquery-tmpl">
        <span>{% trans "Upload was completed successfully." %}</span>
    </script>
    <script id="UploadFailTemplate" type="text/x-jquery-tmpl">
        <span>{% trans "One or more errors occured!" %}</span>
    </script>
{% endblock %}

{% block extrastyle %}
    {{ block.super }}
    <style>
        td.tight{width: 1px; white-space: nowrap;}
        .directory{display:block; overflow:hidden;}
        h2 a{color:#fff!important;}
        .dialog{position:fixed; top:0; left:50%; margin-left:-200px; width:400px; background:#fff; padding: 5px; border: 1px solid #ddd; border-top:none; overflow:hidden;}
        .dialog input[type=text]{width:390px;}
        .dialog h2{margin-top:.5em;}
        .block{position:fixed; width:100%; height:100%; top:0; left:0; display:none;}
        .directory.selected{border-left: 5px solid #CCC; padding-left: 5px; margin-left: -10px; color: #5B80B2 !important}
        .icons a, .icon{margin: -2px 1px; height: 16px; width: 16px; display:inline-block;}
        a.delete{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAJdSURBVDjLpZP7S1NhGMf9W7YfogSJboSEUVCY8zJ31trcps6zTI9bLGJpjp1hmkGNxVz4Q6ildtXKXzJNbJRaRmrXoeWx8tJOTWptnrNryre5YCYuI3rh+8vL+/m8PA/PkwIg5X+y5mJWrxfOUBXm91QZM6UluUmthntHqplxUml2lciF6wrmdHriI0Wx3xw2hAediLwZRWRkCPzdDswaSvGqkGCfq8VEUsEyPF1O8Qu3O7A09RbRvjuIttsRbT6HHzebsDjcB4/JgFFlNv9MnkmsEszodIIY7Oaut2OJcSF68Qx8dgv8tmqEL1gQaaARtp5A+N4NzB0lMXxon/uxbI8gIYjB9HytGYuusfiPIQcN71kjgnW6VeFOkgh3XcHLvAwMSDPohOADdYQJdF1FtLMZPmslvhZJk2ahkgRvq4HHUoWHRDqTEDDl2mDkfheiDgt8pw340/EocuClCuFvboQzb0cwIZgki4KhzlaE6w0InipbVzBfqoK/qRH94i0rgokSFeO11iBkp8EdV8cfJo0yD75aE2ZNRvSJ0lZKcBXLaUYmQrCzDT6tDN5SyRqYlWeDLZAg0H4JQ+Jt6M3atNLE10VSwQsN4Z6r0CBwqzXesHmV+BeoyAUri8EyMfi2FowXS5dhd7doo2DVII0V5BAjigP89GEVAtda8b2ehodU4rNaAW+dGfzlFkyo89GTlcrHYCLpKD+V7yeeHNzLjkp24Uu1Ed6G8/F8qjqGRzlbl2H2dzjpMg1KdwsHxOlmJ7GTeZC/nesXbeZ6c9OYnuxUc3fmBuFft/Ff8xMd0s65SXIb/gAAAABJRU5ErkJggg==);}
        a.touch{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAEGSURBVDjLpZM/LwRRFMXPspmEaGc1shHRaiXsJ5GIRixbCr6SikxIlqgJM5UohIiGdofovHf/PZVmYwZvTntPfjnn3txWCAFNNFE33L/ZKXYv+1dRgL3r7bu0PbucJp3e4GLjtsrXGq9wkA8SU7tPk87i/MwCzAyP5QNeytcnJl46XMuoNoGKDoVlTkQhJpAgmJqcBjnqkqPTXxN8qz9cD6vdHtQMxXOBt49y5XjzLB/3tau6kWewKiwoRu8jZFvn+U++GgCBlWFBQY4qr1ANcAQxgQaFjwH4TwYrQ5skYBOYKbzjiASOwCrNd2BBwZ4jAcowGJgkAuAZ2dEJhAUqij//wn/1BesSumImTttSAAAAAElFTkSuQmCC);}
        a.resize{display:none; background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAGsSURBVDjLpZIxixNRFIW/kVHQQlwEQdgUdkkgTX6BkMIi/yJY5geE/ISAZIuUSb9lgnYWNsraaOkkTSSz6MLWJhmY9+7ZIm8mCUYLvfDg8d49h3POvZEk/qdigMFgkEqqSEp6vV79b4But/shz/OXzrlkMpnU4/BeabfbzGaz2pt3NzIJAd4DAplhAm+w3W7pdDqMRqNaqcB7/3U6nTbjR095fnYfGQiQCRPogOT2yTnD4RDn3CeAqMhg8Panzs8e7AAGkpDApJLITJiJ5U3GoPMiKhUQ5HoDJMwCsLjbMUnu7ThEAHnbNQrMDBkBYCWwIHTuBIEzMC8sNO2ai7vtlQjM6XcCc4Y3lT514FnBUqHEnSJwDry30v8xyV6RBM5OWfAe7+OQegAqjPIgQEl4f1LB7qOUa2DB++E4FbIqKpJEq9VK8zyvPHz8jFedi6PED6VL4vLiNd+Tz3jvkyzL6vcAsiyr9Pt9bn8sWVyvWVxvmKdrFqtfzNM189WGZLUmSTcsv10xHo9xztV285doNptfGo2GVavVK4UF+tOJ4/h9FEUCPkrar/K/1h35Nbw8S+DdbwAAAABJRU5ErkJggg==);}
        a.rename{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAACjSURBVDjL7ZNBCsIwEEVz1mwTo1YjiHdIqyWgFBGPonWTC8T2BjlE4JsUwU0ILe7ExUtgPvNmNkMAkG8gPyAwxiAHYwxKKUgpk/kg8N5n4Zwn6865j4CVLXj1AA//rArsW4hAzCil4wTFsUdx6rBuLLaXJ+aH+zTBqukDFpuzxe5qsagnCIbV32vHybF5Wd/GC3JkBfHJEZu11hBCJHPyvwXyAt6tONifnq6xAAAAAElFTkSuQmCC);}
        a.stop{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAElSURBVCjPfZFNSwJBHMb9UPOd5pR9hUnvIQrFQl26FHXo0CmImEMoQUhl48vBw5qWtY461pKU9PTsrJRsFM9l2N/v/7IzOeT+z/ehI9qqpZvW2Ia+VdciI3Rk20SIsWBeMUTdXMkVgdjNAcwxg8MbTzEuXU0uBTY3CZ5gDMuMEHlFm3PhhZaKMviJAbo4UV5o6phtE7jO5FEkHnKTMY60F+7sAlPiiDDvhUc8UHrHvvVCg8KE+NnjNRQwYJIee6lwo2dcKZlbJCxgg7jP/wmxm46oqz4+WZE0Hnh4jx4+UEWQLlkTF2bKrX9gyIIeAhOI5UWdyVM34scX38exOkTgKnLlqo/loalzRMzZXWhUTElmHutA7KhtvWXLtqQ3VVn8es2/8gUo3nl2LXz6SAAAAABJRU5ErkJggg==);}
        a.minimize{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAHqSURBVDjL3ZHbThpRFIZ5i3kcLRYPqIgUGcDhNKBAqyKCobTR2NhiKmCstcWmBmtLPaCO4CQ6SBWVKInx0N70KbjhCf7O3ia0ZS686F0vVrL3Xvv7VvIvFQBVuOITQxfe6tj5IEPu9xW/ZxGcu2aJnAksxW9eYP42hmB5oBY48zAjJ240QoP7HH3j8xYhWgwiUgiAyxpFlTxZmL2ewvrPNBJX0wid+TF0zCsEHtEKGcbT4igWK0k8OwzBumGo0uZoeUCYuZzE0vUcVn6k8OSbUyFwyfDbSgKvShOIFsZgWTfU2K96pv5huOSm8KfvS/AXHAqBQ2CxcJFAsjwDe5YFgWkGdzCPoSMXHhed8BXs8B7YFALbVh/6Nx+RyWAzevR91qEu+Jf6XwRuecdkTSRp27YcVtaoCLE33Qn9sha6D+3oSrVB+07zO0RXzsx4chxmT18ifhqjSTcKej5qMbkfRVQM12EqILA8uRaRgnguhRE7mqJrahR0y5MjYgi+TTfsq1a0vVELVODYMVUJ/Lo0jZG8768d/1md71uhS2nBZxwYzwXRn2bxMNksqLgtoxgQ/RjOe2HK9FCrYaVLIehY1KB9oYVpnVfXnKscrMsmqBNNEm2a13ol05c7+L7SzD1gWpLNVXW8SST3X7gvtJUuvnAlAAAAAElFTkSuQmCC);}
        a.maximize{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAHkSURBVDjL3ZNvT1JhGMafb3G+TQqKECNFRIEDcvgXmB5IPNJmTdbC1SQ0S1xzZKXyT41TdpCOMyYtiXS9aW2uD8EbPsHV87RRmyLrdc92vbt/1/U8930/ZLYxASbpSwgz9SCin2+CHtJJwYoLgbITvvcOeN7a4S6NgTB45+cmCucvu8JMFOZCZQHpr0tYO12Ga9cKwpJz5xvIfH+GR2dxRGp+uSOs8Jxv39GKV+/gYS2OlXoSfNECMnMSRKw+hdS3BLI/Mlho3MPUR88lE+++ozlfjWG1kYJUCcNRsMCWM4NM02vf/hTgwsf+1uLpfTw4mcOtQ0G9aCDINiWmRiAdiAz+HTC6Nfi3QKx6uckjT3Pi0K1c1QPnzojahtsi3Zr2L/rfDGin5fE3o+pVxeYXRmVw3dA0Pddzfwz8Co82LFVERMuTbEyXJjGUMaqBgoBQ0Qfjmq5lWO3n9E/76IK8s4PCYHCytoDZgwhsWXPzosGNdYPszY1jTonBnxVgSuuhe6KhyfRDJGsJ3P0gQSqLDG7RBeE6PeF6Wie7X/MI5N2YLonoX+oFce1ZsXicQOJoHs68FdbNznBbAytaREthSHIE2lQPCF8cgT0/jLHtIQbD8sqEbrBuWYM+mqx93ANN8hp+AQOPtI0tirA3AAAAAElFTkSuQmCC);}
        a.refresh{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAGMSURBVDjLY/j//z8DJZiggtx9Sasyd8Yxk21Axo7YSymbow4QZUDJ8QyHoiNpB/IPJP/P3pPwP3177P+mQ5X/6/aV/o9cFrATrwHFxzIcCg+nnplzacr/TbdW/19/c8X/tTeW/l91bdH/5Vfn/y/ZkvPfb7rbHZwGFBxKnTn9fN//jTdX/W8+XPU/cX34/5iVQf8rtuf/L9mc/d9nqutuvC7I2Zv4AOjf/0D//o9fG3YIJh4wy+OS9xTnQ2699kyO7VacRAUi0L/wUPea5LTGtceW9FgA+ncNyekgfJEfZ9AcTyagfw+59ztcgolbVBsdMi7V/a+Xr/lfK0v1AV4XAP27O2tl0v/UJbH/rRtM/5tVGf6PmB74v/dE0//khdH/VVMUZ+I0AOjflxnLE/5PP9v7f8rprv8TT7X/7zvZ8r/nRON/kLhKssIZxXhZB7wusGu22Bk3N+x/1Mzg//qFWv+1s9X+q6cp/1dOUjigEIeqGWcgAv17AOjfS2RnJt08DWbNTNVVVMmNhDAANau2t3wToKQAAAAASUVORK5CYII=);}
        .uploader{position:fixed; z-index:10000; width:162px; bottom:5px; right:13px; overflow:hidden;}
        .uploader form{position:relative; width:100%; height:100%;}
        .uploader .button{font-weight:bolder;}
        .uploader form input[type=file]{width:100%; height:100%;top:0; position:absolute; opacity:0;}
        .uploadinghead{position: fixed; z-index:10000; bottom:25%; height: 22px; padding:0 5px; line-height:22px; right: 13px; width:390px; background: #417690; color: #FFC; border-radius:5px 5px 0 0;}
        .uploadinghead .status{float:left; width:auto;}
        .uploadinghead .controls{float:right; width:auto; margin-top:2px;}
        .uploadinghead.minimized{bottom:0%;}
        .uploading{height:25%; z-index:10000; width:398px; right:13px; bottom:0; overflow:auto; position:fixed; background:#fff; border:solid #ddd; border-width:0 1px;}
        .uploading table{width:100%;}
        .uploading .uploadstatus{width:100%; height:3px;}
        .uploading .uploadstatus td{padding:0;}
        .uploading .uploadstatus .progress{background:#33CC33; width:0%; height:3px; display:block;}
        .uploading.minimized{display:none;}
    </style>
{% endblock %}

{# ??? #}
{% block pretitle %}{% endblock %}

{# It's main part #}
{% block content %}
    {% csrf_token %}
    <div id="content-main">
        <div class="module filtered" id="changelist">
            <div id="changelist-filter">
                <h2><a href="#">{% trans 'Root directory' %}</a></h2>
                <ul class="directory-list">
                </ul>
            </div>
            <form id="changelist-form">
                <div class="results">
                    <table id="result_list">
                    </table>
                </div>
                <p class="paginator"></p>
            </form>
        </div>
    </div>
    <div class="block"></div>
    <div class="uploader"></div>
{% endblock %}