{% extends "box/base/box.html" %}
{% load i18n %}
{% load l10n %}
{% load staticfiles %}
{% get_current_language as LANGUAGE_CODE %}

{% block title %}
    {% trans "Data store" %}
{% endblock title %}
{% block boxhelp %}
<div class="boxhelp">
    <div class="help">
        <div class="icon">
            <img src="{% static "icons/information-frame.png" %}" alt="{% trans "Help" %}" />
        </div>
        <div class="boxhelp-box">
            <p>{% blocktrans %}This is your global data store.{% endblocktrans %}</p>
            <p>{% blocktrans %}You can access it from all your own virtual machines,
            the lab client, this web interface, or through SFTP protocol.
            {% endblocktrans %}</p>
            <p>{% blocktrans %}This directory is mounted on Windows machines as Z:
            drive, and on Linux ones as ~/sshfs.{% endblocktrans %}</p>
            <p>{% blocktrans %}If you log in on lab machines (currently Ubuntu only),
            you can see this folder also as ~/sshfs.{% endblocktrans %}</p>
            <p>{% blocktrans with serv=storeserv %}You can also use an SFTP client (eg.
            WinSCP) to access your files at {{serv}}. You will need to register a
            public key bellow.{% endblocktrans %}</p>
        </div>
    </div>
    <div class="icon">
        <img src="" alt="toggle" title="{% trans "Show/hide box" %}" class="toggle-box" data-id="files" id="toggle-box-files"/>
    </div>
</div>
{% endblock %}

{% block content %}
<ul class="file-list">
    <li class="entry small" id="current-location">
        <div class="summary">
            <div class="sort">
                <select data-bind="value: sortBy">
                    <option value="name">Név szerint</option>
                    <option value="date">Dátum szerint</option>
                    <option value="size">Méret szerint</option>
                </select>
            </div>
            <div class="name">
                <small>
                    Jelenlegi hely:
                    <span data-bind="text: currentPath"></span>
                </small>
            </div>
            <div class="clear"></div>
        </div>
    </li>
</ul>
<ul class="file-list" id="file-list">
    <li class="entry real" data-bind="visible: notInRoot, click: jumpUp">
        <div class="summary">
            <div class="name filetype-jump-out">..</div>
            <div class="clear"></div>
        </div>
    </li>
    <li class="entry small real" data-bind="visible: files().length == 0">
        <div class="summary">
            <div class="name">{% trans "No files." %}</div>
            <div class="clear"></div>
        </div>
    </li>
    <!-- ko foreach: {data:files,afterAdd:fadeIn,beforeRemove:fadeOutFile} -->
    <li class="entry real">
        {% include "box/file/entry.html" %}
    </li>
    <!-- /ko -->
</ul>
<ul class="entry-list">
    <li class="entry small-row">
        <div class="summary" id="new-folder">
            <div class="name filetype-new-folder">{% trans "Create folder" %}</div>
            <div id="new-folder-form">
                <input type="text" placeholder="{% trans "Name of new folder" %}" data-bind="value: newFolderName, click: function(m,e){console.log(arguments); e.preventDefault(); e.stopPropagation(); return false;}" />
                <input type="submit" data-bind="click: newFolder, clickBubble: false" value="Létrehozás" />
            </div>
            <div class="clear"></div>
        </div>
    </li>
    <li class="entry small-row">
        <div class="summary" id="new-folder">
            <div class="name toplist" data-bind="click: toggleToplist, text: getToplistText"></div>
            <div class="clear"></div>
        </div>
    </li>
    <li class="entry small-row key">
        <div class="summary" id="keys">
            <div class="name keys">{% trans "Manage keys" %}</div>
            <div class="clear"></div>
        </div>
    </li>
    {% for key in keys %}
        {% include "box/key/entry.html" %}
    {% endfor %}
    <li class="entry small-row key" style="display: none">
        <div class="summary" id="new-key">
            <div class="name">{% trans "Add public key" %}</div>
            <div class="clear"></div>
        </div>
        <div class="details">
            <div class="details-container">
                <form style="padding-bottom: 10px" action="{% url one.views.key_add %}" method="POST">
                    {% csrf_token %}
                    <textarea style="margin-bottom: 5px" name="key" placeholder="{% trans "Public key in OpenSSH format" %}"></textarea><br />
                    <input type="submit" style="margin-left: 10px;" value="{% trans "Save" %}" />
                </form>
            </div>
        </div>
    </li>
    <li class="entry small-row key" style="display: none">
        <div class="summary" id="reset-key" data-url="{% url one.views.key_ajax_reset %}">
            <div class="name">{% trans "Reset key" %}</div>
            <div class="clear"></div>
        </div>
    </li>
    <li class="file-upload entry small-row">
        <div class="summary" data-bind="click: getUploadURL">
            <div class="quota">
                <div id="upload-progress" class="used" style="background-color: rgba(0,255,0,0.2);" data-bind="style: {width: uploadProgress}"></div>
            </div>
            <div class="name filetype-up">{% trans "File upload" %}</div>
            <div class="clear"></div>
        </div>
        <div class="details">
            <div class="details-container">
                <div class="container">
                    <div id="upload-zone" class="upload-zone">
                        <p>{% trans "Drag and drop files here to start uploading." %}</p>
                        <p>
                            {% trans 'You can also use the <a href="#" id="old-upload">the traditional upload form</a>.' %}
                        </p>
                        <p>{% trans 'Upload limit is 1GB per file!' %}</p>
                    </div>
                    <div style="display: none" id="upload-progress-text" class="upload-zone"></div>
                    <div style="display: none" id="upload-error" class="upload-zone">
                        <p id="upload-error-size" style="display: none">{% trans "Error: File is bigger than 1GB!" %}</p>
                        <p id="upload-error-server" style="display: none">{% trans "Error: Upload server is not available!" %}</p>
                        <p id="upload-error-overwrite" style="display: none">{% trans "Error: File already exists!" %}</p>
                        <p id="upload-error-unknown" style="display: none"></p>
                    </div>
                    <div style="display: none" class="upload-zone" id="old-upload-form">
                        <form action="{% url one.views.home %}" method="POST" data-bind="attr: {action: uploadURL}" enctype="multipart/form-data">
                            <input type="file" name="data" />
                            <input type="submit" value="Feltöltés" />
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </li>
    <li class="entry small">
        <div class="summary">
            <div class="quota">
                <div class="used" style="background-color: rgba(0,255,0,0.2)" data-bind="style: {width: quota.usedBar}"></div>
                <div class="softLimit" data-bind="style: {left: quota.softPos}"></div>
            </div>
            <div class="name">
                {% trans "File quota" %}: <abbr data-bind="text: quota.used" title="{% trans "Used space" %}"></abbr>
                / <abbr data-bind="text: quota.soft" title="{% trans "soft limit" %}"></abbr>
                (
                <abbr title="{% trans "hard limit" %}" data-bind="text: quota.hard"></abbr>
                )
            </div>
            <div class="clear"></div>
        </div>
    </li>
</ul>
{% endblock content %}
