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

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

{% 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">
        window.BFMOptions = {{ settings|safe }};
        window.BFMRoot = "{{ root }}";
    </script>
    <script type="text/javascript" src="{{ STATIC_URL }}django_bfm/application.js"></script>
    <script type="text/javascript" src="{{ STATIC_URL }}django_bfm/upload.jquery.js"></script>


    <script id="browse_head_tpl" type="text/template">
        <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="browse_file_tpl" type="text/template">
        <td class="tight icons">
            <a class="delete iconic trash" title="{% trans "Delete" %}"></a>
            <a class="touch iconic pin" title="{% trans "Touch" %}"></a>
            <a class="rename iconic tag" title="{% trans "Rename" %}"></a>
            <a class="resize iconic image" title="{% trans "Resize" %}"></a>
        </td>
        <td><a href="<%= url %>" target="_blank"><%= filename %></a></td>
        <td class="tight"><%= psize %></td>
        <td class="tight"><%= pdate %></td>
        <td class="tight"><%= mimetype %></td>
    </script>


    <script id="file_rename_tpl" type="text/template">
        <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="image_resize_tpl" type="text/template">
        <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="uploader_tpl" type="text/template">
        <div class="uploader-head">
            {% trans "Uploader" %}
            <a class="control iconic fullscreen" title="{% trans "Expand uploader" %}"
                                        data-alttitle="{% trans "Minimize uploader" %}">
            </a>
        </div>
        <div class="uploader-controls breadcrumbs">
            <form class="selector">
                <input type="file" multiple>
                <a class="iconic plus" href="#"> {% trans "Add files" %}</a>
            </form>
            <form class="selector directory">
                <input type="file"  webkitdirectory directory mozdirectory>
                <a class="iconic plus" href="#"> {% trans "Add folder (experimental)" %}</a>
            </form>
            <a class="iconic trash finished" href="#"> {% trans "Clear finished" %}</a>
            <a class="iconic trash rqueued" href="#"> {% trans "Remove queued" %}</a>
        </div>
        <div class="uploader-table-container">
            <div class="uploader-table">
            </div>
        </div>
    </script>


    <script id="file_upload_tpl" type="text/template">
        <div class="file">
            <div class="status"></div>
            <a class="abort iconic x" title="{% trans "Cancel this upload" %}"></a>
            <span class="filename"><%= filename %></span>
            <span class="indicators">
                (<span class="percent">0</span>% @ <span class="speed">0 B/s</span>)
            </span>
            <span class="failed">({% trans "Failed" %})</span>
            <span class="aborted">({% trans "Aborted" %})</span>
        </div>
    </script>


    <script id="pgn_current_page_tpl" type="text/template">
        <span class="this-page"><%= page %></span>&nbsp;
    </script>


    <script id="pgn_page_tpl" type="text/template">
        <a href="#"><%= page %></a>&nbsp;
    </script>


    <script id="pgn_first_page_tpl" type="text/template">
        <a href="#" class="firstpage">{% trans "First page" %}</a>&nbsp;
    </script>


    <script id="pgn_last_page_tpl" type="text/template">
        <a href="#" class="lastpage">{% trans "Last page" %}</a>&nbsp;
    </script>


    <script id="upload_cancel_tpl" type="text/template">
        {% trans "Uploading in progress!" %}
    </script>


    <script id="directory_actions_tpl" type="text/template">
        <li><a>{% trans "New directory" %}</a></li>
        <li><a>{% trans "Rename" %}</a></li>
        <li><a>{% trans "Delete" %}</a></li>
    </script>


    <script id="rootdirectory_actions_tpl" type="text/template">
        <li><a>{% trans "New directory" %}</a></li>
    </script>


    <script id="new_directory_tpl" type="text/template">
        <h2>{% trans "Create new directory" %}</h2>
        {% trans "You are going to create a new directory inside '/<%= rel_dir %>'. Enter it's name." %}
        <input type="text" name="new" value="">
        <input type="submit" class="submit" value="{% trans "Create" %}">
        <input type="submit" class="cancel" value="{% trans "Cancel" %}">
    </script>


    <script id="rename_directory_tpl" type="text/template">
        <h2>{% trans "Rename directory" %}</h2>
        <input type="text" name="new" value="<%= name %>">
        <input type="submit" class="submit" value="{% trans "Rename" %}">
        <input type="submit" class="cancel" value="{% trans "Cancel" %}">
    </script>


    <script id="delete_directory_tpl" type="text/template">
        <h2>{% trans "Delete directory" %}</h2>
        <div>
            {% trans "You are going to delete a directory with all files and directories inside it. Are you sure?" %}
        </div>
        <input type="submit" class="cancel" value="{% trans "No" %}">
        <input type="submit" class="cancel" value="{% trans "Over my dead body!" %}">
        <input type="submit" class="submit" value="{% trans "I'm sure" %}">
        <input type="submit" class="cancel" value="{% trans "Just kill this dialog" %}">
    </script>
{% endblock %}

{% block extrastyle %}
    {{ block.super }}
    <link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}django_bfm/application.css">
{% 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>
{% endblock %}