{% extends 'home_base.html' %}
{% load seahub_tags i18n %}
{% load url from future %}

{% block sub_title %}{% trans "Folders - Share" %} - {% endblock %}

{% block cur_share_folders %}tab-cur{% endblock %}

{% block right_panel %}
<h3 class="hd">{% trans "Folders" %}</h3>
{% if shared_folders %}
<table>
    <tr>
        <th width="4%"><!--icon--></th>
        <th width="19%">{% trans "Name"%}</th>
        <th width="20%">{% trans "Share To"%}</th>
        <th width="15%">{% trans "Permission"%}</th>
        <th width="29%">{% trans "Description"%}</th>
        <th width="13%">{% trans "Operations"%}</th>
    </tr>
    {% for repo in shared_folders %}
    <tr data="{{repo.props.share_type}}">
        <td><img src="{{MEDIA_URL}}img/folder-icon-24.png" title="{% trans "Read-Write"%}" alt="{% trans "directory icon" %}" /></td>
        <td data="{{ repo.props.repo_id }}"><a href="{% url 'view_priv_shared_folder' repo.repo_id %}">{{ repo.props.repo_name }}</a></td>
        <td data="{{repo.props.user_info}}">{{ repo.props.user }}</td>
        <td>
            <div class="share-permission">
                <span class="share-permission-cur-value">{{ repo.share_permission }}</span>
                <img src="{{MEDIA_URL}}img/edit_12.png" alt="{% trans "Edit"%}" title="{% trans "Edit"%}" class="share-permission-edit-icon op-icon vh" />
            </div>
            <select name="permission" class="share-permission-select hide">
                <option value="{{ repo.props.permission }}" selected="selected">{{ repo.share_permission }}</option>
                {% if repo.props.permission == 'rw' %}
                <option value="r">{% trans "Read-Only"%}</option>
                {% else %}
                <option value="rw">{% trans "Read-Write"%}</option>
                {% endif %} 
            </select>
        </td>
        <td>{{ repo.props.repo_desc }}</td>
        <td>
            {% if repo.props.share_type == 'group' %}
            <a href="#" data="{% url 'repo_remove_share' %}?repo_id={{ repo.props.repo_id }}&from={{ request.user.username|urlencode }}&gid={{ repo.props.group_id }}" class="cancel-share op vh">{% trans "Unshare"%}</a>
            {% endif %}
            {% if repo.props.share_type == 'personal' %}
            <a href="#" data="{% url 'repo_remove_share' %}?repo_id={{ repo.props.repo_id }}&from={{ request.user.username|urlencode }}&to={{ repo.props.user|urlencode }}" class="cancel-share op vh">{% trans "Unshare"%}</a>
            {% endif %}
            {% if repo.props.share_type == 'public' %}
            {% if not org %}
            <a href="#" data="{% url 'unsetinnerpub' repo.repo_id %}" class="cancel-share op vh">{% trans "Unshare"%}</a>
            {% else %}
            <a href="#" data="{{ SITE_ROOT }}organizations/{{ org.url_prefix }}/innerpubrepo/unset/{{ repo.props.repo_id }}" class="cancel-share op vh">{% trans "Unshare"%}</a>
            {% endif %}
            {% endif %}
        </td>
    </tr>
    {% endfor %}
</table>
{% else %}
<div class="empty-tips">
    <h2 class="alc">{% trans "You have not shared any folder" %}</h2>
    <p>{% trans "You can share a single folder with a registered user if you don't want to share a whole library." %}</p>
</div>
{% endif %}
{% endblock %}

{% block extra_script %}{{block.super}}
<script type="text/javascript">
{% if shared_folders %}
$('.share-permission-edit-icon').click(function() {
    $(this).parent().addClass('hide');
    $(this).parent().next().removeClass('hide'); // show 'share-permission-select'
});
$('.share-permission-select').change(function() {
    var select = $(this),
        select_cont = $(this).parent(),
        user = select_cont.prev(),
        share_type = select_cont.parent().attr('data');
        {% if org %}
        var url = '{% url 'org_share_permission_admin' org.url_prefix %}?org_id={{ org.org_id }}&share_type=' + share_type;
        {% else %}
        var url = '{% url 'share_permission_admin' %}?share_type=' + share_type;
        {% endif %}
    $.ajax({
        url: url,
        type: 'POST',
        dataType: 'json',
        cache: false,
        beforeSend: prepareCSRFToken,
        data: {
            repo_id: user.prev().attr('data'),
            email_or_group: user.attr('data'),
            permission: select.val()
        },
        success: function(data) {
            if (data['success']) {
                feedback("{% trans "Edit succeeded" %}", 'success');
                select.prev().children('.share-permission-cur-value').html(select.children('option[value="' +select.val() + '"]').text());
            }
            select.addClass('hide');
            select.prev().removeClass('hide');
        },
        error: function() {
            feedback("{% trans "Edit failed." %}", 'error');
            select.addClass('hide');
            select.prev().removeClass('hide');
        }   
    });
});
// select shows, but the user doesn't select a value, or doesn't change the permission, click other place to hide the select
$(document).click(function(e) {
    var target = e.target || event.srcElement;
    // target can't be edit-icon
    if (!$('.share-permission-edit-icon, .share-permission-select').is(target)) {
        $('.share-permission').removeClass('hide');
        $('.share-permission-select').addClass('hide');
    }
});
$('.cancel-share').click(function() {
    location.href = $(this).attr('data');
});
{% endif %}                     // shared_repos

</script>
{% endblock %}
