{% extends "myhome_base.html" %}

{% load i18n avatar_tags group_avatar_tags seahub_tags staticfiles %}

{% block sub_title %}{{repo.name}} - {% endblock %}

{% block extra_style %}
<link rel="stylesheet" type="text/css" href="{% static "css/select2-3.5.2.css" %}" />
<link rel="stylesheet" type="text/css" href="{% static "css/select2.custom.css" %}" />
{% endblock %}

{% block left_panel %}
<div class="side-textnav">
    <h3 class="hd"><span class="op-target">{{ repo.name }}</span> {% trans "Settings" %}</h3>
    <ul class="side-textnav-tabs">
        <li class="tab"><a href="{% url 'repo_basic_info' repo.id %}">{% trans "Basic Info" %}</a></li>
        <li class="tab"><a href="{% url 'repo_transfer_owner' repo.id %}">{% trans "Transfer Ownership" %}</a></li>
        {% if repo.encrypted and repo.enc_version == 2 %}
        <li class="tab"><a href="{% url 'repo_change_password' repo.id %}">{% trans "Change Password" %}</a></li>
        {% endif %}
        {% if not repo.encrypted %}
        <li class="tab"><a href="{% url 'repo_shared_link' repo.id %}">{% trans "Shared Links" %}</a></li>
        {% endif %}
        <li class="tab tab-cur"><a href="{% url 'repo_share_manage' repo.id %}">{% trans "Sharing Permission" %}</a></li>
        {% if ENABLE_FOLDER_PERM %}
        <li class="tab"><a href="{% url 'repo_folder_perm' repo.id %}">{% trans "Folder Permission" %}</a></li>
        {% endif %}
    </ul>
</div>
{% endblock %}

{% block right_panel %}
<div class="lib-setting">

    <div id="tabs" class="tab-tabs">
        <div class="hd ovhd">
            <ul class="tab-tabs-nav fleft">
                <li class="tab"><a href="#user-tab" class="a" id="user-tab">{% trans "User" %}</a></li>
                <li class="tab"><a href="#group-tab" class="a" id="group-tab">{% trans "Group" %}</a></li>
            </ul>
            <div class="fright">
                <button class="repo-share-btn"><img src="{{ MEDIA_URL }}img/add.png" alt="" class="add vam" /><span class="vam">{% trans "Share Library" %}</span></button>
            </div>
        </div>

        <div id="user-tab">
            <table>
                <tr>
                    <th width="40%">{% trans "Share To"%}</th>
                    <th width="40%">{% trans "Permission"%}</th>
                    <th width="20%">{% trans "Operations"%}</th>
                </tr>
                {% if repo_share_user %}
                {% for share in repo_share_user %}
                <tr class="perm-item" data-to_user="{{ share.user }}">
                    <td><a href="{% url 'user_profile' share.user %}">{{ share.user }}</a></td>
                    <td>
                        <div class="perm-change">
                          {% if share.permission == 'rw' %}
                            <span class="share-perm-cur-value">{% trans "Read-Write" %}</span>
                          {% else %}
                            <span class="share-perm-cur-value">{% trans "Read-Only" %}</span>
                          {% endif %}
                            <img src="{{MEDIA_URL}}img/edit_12.png" alt="{% trans "Edit"%}" title="{% trans "Edit"%}" class="perm-edit-icon cspt vh" />
                        </div>
                        <select class="perm-toggle-select hide">
                            <option value="rw" {%if share.permission == 'rw' %}selected="selected"{% endif %}>{% trans "Read-Write" %}</option>
                            <option value="r" {%if not share.permission == 'rw' %}selected="selected"{% endif %}>{% trans "Read-Only"%}</option>
                        </select>
                    </td>
                    <td>
                        <a href="{% url 'repo_remove_share' %}?repo_id={{ share.repo_id }}&from={{ request.user.username|urlencode }}&to={{ share.user|urlencode }}&permission={{ share.permission }}" class="cancel-share op-icon vh" title="{% trans "Unshare"%}"><img src="{{MEDIA_URL}}img/rm.png" alt="" /></a>
                    </td>
                </tr>
                {% endfor %}
                {% endif %}
            </table>
        </div>
        <div id="group-tab" class="hide">
            <table>
                <tr>
                    <th width="40%">{% trans "Share To"%}</th>
                    <th width="40%">{% trans "Permission"%}</th>
                    <th width="20%">{% trans "Operations"%}</th>
                </tr>
                {% if repo_share_group %}
                {% for share in repo_share_group %}
                <tr class="perm-item" data-group_id="{{ share.group_id }}">
                    <td><a href="{% url 'group_info' share.group_id%}">{{ share.group_name }}</a></td>
                    <td>
                        <div class="perm-change">
                          {% if share.permission == 'rw' %}
                            <span class="perm-cur-value">{% trans "Read-Write" %}</span>
                          {% else %}
                            <span class="perm-cur-value">{% trans "Read-Only" %}</span>
                          {% endif %}
                            <img src="{{MEDIA_URL}}img/edit_12.png" alt="{% trans "Edit"%}" title="{% trans "Edit"%}" class="perm-edit-icon cspt vh" />
                        </div>
                        <select class="perm-toggle-select hide">
                            <option value="rw" {%if share.permission == 'rw' %}selected="selected"{% endif %}>{% trans "Read-Write" %}</option>
                            <option value="r" {%if not share.permission == 'rw' %}selected="selected"{% endif %}>{% trans "Read-Only"%}</option>
                        </select>
                    </td>
                    <td>
                        <a href="{% url 'repo_remove_share' %}?repo_id={{ share.repo_id }}&from={{ request.user.username|urlencode }}&gid={{ share.group_id }}&permission={{ share.permission }}" class="cancel-share op-icon vh" title="{% trans "Unshare"%}"><img src="{{MEDIA_URL}}img/rm.png" alt="" /></a>
                    </td>
                </tr>
                {% endfor %}
                {% endif %}
            </table>
        </div>
    </div>
</div>

<form id="dir-private-share" class="hide">{% csrf_token %}
    <label class="label">{% trans "People:" %}</label><br />
    <input name="emails" class="w100" /><br />

    <label class="label">{% trans "Groups:" %}</label><br />
    <select name="groups" class="w100" multiple="multiple"></select><br />

    <label class="label">{% trans "Permission:" %}</label><br />
    <select name="permission" class="share-permission-select w100">
        <option value="rw" selected="selected">{% trans "Read-Write"%}</option>
        <option value="r">{% trans "Read-Only"%}</option>
    </select>
    <p class="error hide"></p>
    <input type="submit" value="{% trans "Submit" %}" class="submit" />
</form>

{% endblock %}

{% block extra_script %}
<script type="text/javascript" src="{% static "scripts/lib/select2-3.5.2.js" %}"></script>
<script type="text/javascript">
var g_opts = '';
{% for group in request.user.joined_groups %}
g_opts += '<option value="' + '{{ group.id}}'+ '" data-index="' + '{{forloop.counter0}}' + '">' + '{{ group.group_name}}' + '</option>';
{% endfor %}

$(".repo-share-btn").click(function() {
    var form = $('#dir-private-share');
    form.modal({appendTo: "#main", focus:false});
    $('#simplemodal-container').css({'width':'auto', 'height':'auto'});

    $('[name="emails"]', $('#dir-private-share')).select2($.extend({
        placeholder: "{% trans "Search users or enter emails" %}",
        width: '400px',
        formatInputTooShort: "{% trans "Please enter 1 or more character" %}",
        formatNoMatches: "{% trans "No matches" %}",
        formatSearching: "{% trans "Searching..." %}",
        formatAjaxError: "{% trans "Loading failed" %}",
        formatSelectionTooBig: "{% trans "You cannot select any more choices" %}" 
    }, userInputOPtionsForSelect2('{% url 'search-user' %}')));

    $('[name="groups"]', $('#dir-private-share')).html(g_opts).select2({
        placeholder: "{% trans "Select groups" %}",
        width: '400px',
        formatNoMatches: "{% trans "No matches" %}",
        escapeMarkup: function(m) { return m; }
    });
});

$('.submit', $('#dir-private-share')).click(function() {
    var form = $("#dir-private-share"),
        emails = $('[name="emails"]', form).val(), // string
        groups = $('[name="groups"]', form).val(), // null or [group.id]
        post_data = {
            'repo_id': '{{repo.id}}',
            'path': '/'
        };

    if (!emails && !groups) {
        apply_form_error(form.attr('id'), "{% trans "Please select a email or a group." %}");
        return false;
    }

    if (emails) {
        post_data['emails'] = emails;
    }
    if (groups) {
        post_data['groups'] = groups.join(',');
    }
    post_data['perm'] = $('[name="permission"]', form).val();

    $.ajax({
        url: '{% url 'ajax_private_share_dir' %}',
        type: 'POST',
        dataType: 'json',
        cache: 'false',
        beforeSend: prepareCSRFToken,
        data: post_data,
        success: function(data) {
            location.reload(true);
        },
        error: ajaxErrorHandler
    });

    return false;
});

{% include "repo_setting_extra_js.html" %}

$('.perm-toggle-select').on('change', function() {
    var select = $(this),
        perm_item = select.parents('.perm-item'),
        perm = select.val();

    if (is_user_tab == true) {
        var to_user = perm_item.attr('data-to_user'),
            data = { repo_id: '{{repo.id}}', email_or_group: to_user, permission: perm },
            url = '{% url 'share_permission_admin' %}?share_type=' + 'personal';
    } else {
        var group_id = perm_item.attr('data-group_id'),
            data = { repo_id: '{{repo.id}}', email_or_group: group_id, permission: perm },
            url = '{% url 'share_permission_admin' %}?share_type=' + 'group';
    }

    perm_toggle(select, data, url)
});

</script>
{% endblock %}
