{% extends "admin_base.html" %}
{% load i18n avatar_tags %}
{% load url from future %}

{% block nav_useradmin_class %}class="cur"{% endblock %}

{% block extra_style %}
<style type="text/css">
#set-quota-form {
    min-width:255px;
}
</style>
{% endblock %}

{% block left_panel %}
<div class="side-info">
    <h3 class="hd">{% trans "Profile" %}</h3>
    {% avatar email 48 %}
    <dl>
        {% if profile %}
        <dt>{% trans "Name" context "true name" %}</dt>
        <dd>{{ profile.nickname }}</dd>

        <dt>{% trans "Self-introduction" %}</dt>
        <dd>{{ profile.intro }}</dd>
        {% endif %}

        {% if d_profile %}
        <dt>{% trans "Department" %}</dt>
        <dd>{{ d_profile.department }}</dd>

        <dt>{% trans "Telephone" %}</dt>
        <dd>{{ d_profile.telephone }}</dd>
        {% endif %}
    </dl>

    <h3 class="hd">{% trans "Space Used" %}</h3>
    {% if CALC_SHARE_USAGE %}
    <p>{% trans "Total" %}: {{ quota_usage|filesizeformat }} {% if quota > 0 %}/ {{ quota|filesizeformat }} {% endif %}</p>
    <p>{% trans "Used" %}: {{ my_usage|filesizeformat }}</p>
    <p>{% trans "Sharing" %}: {{ share_usage|filesizeformat }}</p>
    {% else %}
    <p>{{ quota_usage|filesizeformat }} {% if quota > 0 %}/ {{ quota|filesizeformat }} {% endif %}</p>
    {% endif %}
    <a href="#" id="set-quota">{% trans "Set Quota" %}</a>
</div>
<form id="set-quota-form" method="post" class="hide">{% csrf_token %}
    <h3>{% trans "Set user storage limit" %}</h3>
    <input type="hidden" name="email" value="{{ email }}" />
    <input type="text" name="quota" /> MB
    <p class="tip">{% trans "Tip: 0 means default limit" %}</p>
    <p class="error hide"></p>
    <input type="submit" value="{% trans "Submit" %}" class="submit" />
</form>
{% endblock %}

{% block right_panel %}
<div id="tabs" class="tab-tabs">
    <div class="hd ovhd">
        <ul class="tab-tabs-nav fleft">
            <li class="tab"><a href="#owned" class="a">{% trans "Owned" %}</a></li>
            <li class="tab"><a href="#shared" class="a">{% trans "Shared" %}</a></li>
        </ul>
    </div>

    <div id="owned">
        {% if owned_repos %}
        <table class="repo-list">
            <tr>
                <th width="4%"><!--icon--></th>
                <th width="30%">{% trans "Name" %}</th>
                <th width="46%">{% trans "Description" %}</th>
                <th width="20%">{% trans "Operations" %}</th>
            </tr>

            {% for repo in owned_repos %}
            <tr>
                <td><img src="{{MEDIA_URL}}img/sync-folder-20.png?t=1387267140" title="{% trans "Read-Write" %}" alt="{% trans "directory icon" %}" /></td>
                <td><a href="{{ SITE_ROOT }}repo/{{ repo.props.id }}/">{{ repo.props.name }}</a></td>
                <td>{{ repo.props.desc }}</td>
                <td data-id="{{ repo.props.id }}" data-name="{{repo.name}}">
                    <div><a href="#" class="repo-delete-btn op vh">{% trans "Delete" %}</a></div>
                </td>
            </tr>
            {% endfor %}
        </table>
        {% else %}
        <p>{% trans "None" %}</p>
        {% endif %}
    </div>

    <div id="shared">
        {% if in_repos %}
        <table>
            <tr>
                <th width="4%"><!--icon--></th>
                <th width="30%">{% trans "Name" %}</th>
                <th width="26%">{% trans "Share From" %}</th>
                <th width="40%">{% trans "Description" %}</th>
            </tr>

            {% for repo in in_repos %}
            <tr>
                <td><img src="{{MEDIA_URL}}img/sync-folder-20.png?t=1387267140" title="{% trans "Read-Write" %}" alt="library icon" /></td>
                <td><a href="{{ SITE_ROOT }}repo/{{ repo.props.id }}">{{ repo.props.repo_name }}</a></td>
                <td>{{ repo.props.user }}</td>
                <td>{{ repo.props.repo_desc }}</td>
            </tr>
            {% endfor %}
        </table>
        {% else %}
        <p>{% trans "None" %}</p>
        {% endif %}
    </div>
</div>

{% include 'snippets/repo_del_popup.html' %}
{% endblock %}


{% block extra_script %}
<script type="text/javascript">

$('#set-quota').click(function() {
    $("#set-quota-form").modal({appendTo: "#main"});
    return false;
});

$('#set-quota-form .submit').click(function() {
    var form = $('#set-quota-form'),
        form_id = form.attr('id');

    var quota = $('input[name="quota"]', form).val();
    if (!$.trim(quota)) {
        apply_form_error(form_id, "{% trans "Quota can't be empty" %}");
        return false;
    }

    var sb_btn = $(this);
    disable(sb_btn);
    $.ajax({
        url: '{% url 'user_set_quota' email %}',
        type: 'POST',
        dataType: 'json',
        cache: 'false',
        beforeSend: prepareCSRFToken,
        data: {
            'email': $('input[name="email"]', form).val(),
            'quota': quota
        },
        success: function(data) {
            location.reload(true);
        },
        error: function(xhr, textStatus, errorThrown) {
            if (xhr.responseText) {
                apply_form_error(form_id, $.parseJSON(xhr.responseText).error);
            } else {
                apply_form_error(form_id, "{% trans "Failed. Please check the network." %}");
            }
            enable(sb_btn);
        }
    });
    return false;
});

{% include 'snippets/repo_del_js.html' %}
</script>
{% endblock %}
