{% extends "institutions/base.html" %}
{% load i18n avatar_tags seahub_tags %}
{% load static %}

{% block right_panel %}
<p class="path-bar">
    <a class="normal" href="{% url "institutions:useradmin" %}">Users</a>
    <span class="path-split">/</span>
    {{ email }}
</p>

<div id="tabs" class="tab-tabs">
    <div class="hd ovhd">
        <ul class="tab-tabs-nav fleft">
            <li class="tab"><a href="#profile" class="a">{% trans "Profile" %}</a></li>
            <li class="tab"><a href="#owned" class="a">{% trans "Owned Libs" %}</a></li>
            <li class="tab"><a href="#user-admin-groups" class="a">{% trans "Groups" %}</a></li>
        </ul>
    </div>

    <div id="profile">
        <dl>
            <dt>{% trans "Avatar" %}</dt>
            <dd>{% avatar email 48 %}</dd>

            <dt>{% trans "Email" %}</dt>
            <dd>{{ email }}</dd>

            {% if profile %}
            <dt>{% trans "Name" context "true name" %}</dt>
            <dd>{{ profile.nickname }}</dd>
            {% endif %}

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

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

            <dt>{% trans "Space Used" %}</dt>
            <dd>{{ space_usage|seahub_filesizeformat }} {% if space_quota > 0 %} / {{ space_quota|seahub_filesizeformat }} {% endif %} <a href="#" class="sf-btn-link" style="margin-left:20px;" id="set-quota">{% trans "Set Quota" %}</a></dd>
        </dl>

        <form id="set-quota-form" method="post" class="hide">{% csrf_token %}
            <h3>{% trans "Set Quota" %}</h3>
            <input type="hidden" name="email" value="{{ email }}" />
            <input type="text" name="space_quota" class="input" /> MB
            <p class="tip">{% trans "Available quota:" %} {{ available_quota|seahub_filesizeformat}}</p>
            <p class="error hide"></p>
            <input type="submit" value="{% trans "Submit" %}" class="submit" />
        </form>
    </div>
    
    <div id="owned">
        {% if owned_repos %}
        <table class="repo-list">
            <tr>
                <th width="4%"><!--icon--></th>
                <th width="35%">{% trans "Name" %}</th>
                <th width="16%">{% trans "Size"%}</th>
                <th width="25%">{% trans "Last Update"%}</th>
                <th width="20%">{% trans "Operations" %}</th>
            </tr>

            {% for repo in owned_repos %}
            <tr>
                {% if repo.encrypted %}
                <td><img src="{{MEDIA_URL}}img/lib/48/lib-encrypted.png" width="24" title="{% trans "Encrypted"%}" alt="{% trans "library icon" %}" /></td>
                {% else %}
                <td><img src="{{MEDIA_URL}}img/lib/48/lib.png" width="24" title="{% trans "Read-Write" %}" alt="{% trans "library icon" %}" /></td>
                {% endif %}

                {% if not repo.name %}
                    <td>Broken ({{repo.id}})</td>
                {% else %}
                    {% if repo.encrypted %}
                        <td>{{ repo.name }}</td>
                    {% elif enable_sys_admin_view_repo %}
                        <td><a href="{{ SITE_ROOT }}sysadmin/#libs/{{ repo.id }}/">{{ repo.name }}</a></td>
                    {% else %}
                        <td>{{ repo.name }}</td>
                    {% endif %}
                {% endif %}

                <td>{{ repo.size|filesizeformat }}</td>
                <td>{{ repo.last_modify|translate_seahub_time }}</td>
                <td data-id="{{ repo.props.id }}" data-name="{{repo.name}}">
                </td>
            </tr>
            {% endfor %}
        </table>
        {% else %}
        <div class="empty-tips">
            <h2 class="alc">{% trans "This user has not created any libraries" %}</h2>
        </div>
        {% endif %}
    </div>

    <div id="user-admin-groups">
        {% if personal_groups %}
        <table>
            <tr>
                <th width="30%">{% trans "Name" %}</th>
                <th width="30%">{% trans "Role" %}</th>
                <th width="25%">{% trans "Create At" %}</th>
                <th width="15%">{% trans "Operations" %}</th>
            </tr>
            {% for group in personal_groups %}
                <tr>
                    <td><a href="{{ SITE_ROOT }}sysadmin/#groups/{{ group.id }}/libs/">{{ group.group_name }}</a></td>
                    <td>{{ group.role }}</td>
                    <td>{{ group.timestamp|tsstr_sec }}</td>
                    <td></td>
                </tr>
            {% endfor %}
        </table>
        {% else %}
        <div class="empty-tips">
            <h2 class="alc">{% trans "This user has not created or joined any groups" %}</h2>
        </div>
        {% endif %}
    </div>
</div>

{% endblock %}


{% block extra_script %}
<script type="text/javascript" src="{% static "scripts/lib/jquery-ui.min.js" %}"></script>
<script type="text/javascript">
$('#tabs').tabs({cookie:{expires:1}});

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

$('#set-quota-form').on('submit', function() {
    var form = $('#set-quota-form'),
        form_id = form.attr('id'),
        space_quota = $('input[name="space_quota"]', form).val();

    if (!$.trim(space_quota)) {
        apply_form_error(form_id, "{% trans "Space Quota can't be empty" %}");
        return false;
    }

    var data = { 'email': $('input[name="email"]', form).val(), 'space_quota': space_quota };

    var sb_btn = $(this);
    disable(sb_btn);
    $.ajax({
        url: '{% url 'institutions:user_set_quota' email %}',
        type: 'POST',
        dataType: 'json',
        cache: false,
        beforeSend: prepareCSRFToken,
        data: data,
        success: function(data) {
            location.reload(true);
        },
        error: function(xhr, textStatus, errorThrown) {
            var error_msg = prepareAjaxErrorMsg(xhr);
            apply_form_error(form_id, error_msg);
            enable(sb_btn);
        }
    });
    return false;
});
 
</script>
{% endblock %}
