{% extends base_template %}
{% load seahub_tags i18n %}
{% load url from future %}

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

{% if org %}
{% block title_panel %}
<h2>{{ org.org_name }}</h2>
{% endblock %}
{% endif %}

{% block left_panel %}
<div class="info-item">
    <h3 class="info-item-top">{% trans "Tips" %}</h3>
    <div class="info-item-bottom">
        <p>{% blocktrans %}If you don't want others to change the contents of your shared libraries, you can set the share permission to "read-only" when sharing them.{% endblocktrans %}</p>
    </div>
</div>
{% endblock %}

{% block right_panel %}
<h3>{% trans "Shared Libraries"%}</h3>
{% if shared_repos %}
<table>
    <tr>
        <th width="4%"><!--icon--></th>
        <th width="18%">{% trans "Name"%}</th>
        <th width="21%">{% 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_repos %}
    <tr data="{{repo.props.share_type}}">
        <td><img src="{{MEDIA_URL}}img/sync-folder-20.png" title="{% trans "Read-Write"%}" alt="{% trans "directory icon" %}" /></td>
        <td data="{{ repo.props.repo_id }}"><a href="{{ SITE_ROOT }}repo/{{ repo.props.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"%} icon" title="{% trans "Edit"%}" class="share-permission-edit-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|quote }}&gid={{ repo.props.group_id }}" class="cancel-share op">{% 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|quote }}&to={{ repo.props.user|quote }}" class="cancel-share op">{% 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">{% trans "Unshare"%}</a>
	      {% else %}
	      <a href="#" data="{{ SITE_ROOT }}organizations/{{ org.url_prefix }}/innerpubrepo/unset/{{ repo.props.repo_id }}" class="cancel-share op">{% trans "Unshare"%}</a>
	      {% endif %}
          {% endif %}
        </td>
    </tr>
    {% endfor %}
</table>
{% else %}
<div class="empty-tips">
  <h2 class="center-contents">{% trans "You have not shared any library" %}</h2>
  <p>{% trans "You can share libraries to your friends and colleagues by clicking the share icon of your own libraries in your home page or creating a new library in groups you are in." %}</p>
</div>
{% endif %}

<h3>{% trans "Shared Links"%}</h3>
{% if fileshares %}
<table class="sharelink-list">
  <tr>
    <th width="45%">{% trans "File or Folder"%}</th>
    <th width="25%">{% trans "Library"%}</th>
    <th width="15%">{% trans "Visits"%}</th>
    <th width="15%">{% trans "Operations"%}</th>
  </tr>
  {% for fs in fileshares %}
  <tr>
    {% if fs.s_type == 'f' %}
    <td><a href="{% url 'repo_view_file' fs.repo.id %}?p={{ fs.path|urlencode }}">{{ fs.filename }}</a></td>
    {% else %}
    <td><a href="{% url 'repo' fs.repo.id %}?p={{ fs.path|urlencode }}">{{ fs.filename }}</a></td>
    {% endif %}
    <td><a href="{{ SITE_ROOT }}repo/{{ fs.repo.id }}/">{{ fs.repo.name }}</a></td>
    <td>{{ fs.view_cnt }}</td>
    <td>
        <a href="#" class="op view-link" data="{{ fs.shared_link }}">{% trans "View" %}</a>
        <a class="op" href="{% url 'remove_shared_link' %}?t={{ fs.token }}">{% trans "Remove"%}</a>
    </td>
  </tr>
  {% endfor %}
</table>
<input type="text" readonly="readonly" value="" id="shared-link" class="hide" />
{% else %}
<div class="empty-tips">
  <h2 class="center-contents">{% trans "You don't have any shared link"%}</h2>
  <p>{% trans "You can share a folder or a file when you view a library, or share a file when you view it." %}</p>
</div>
{% endif %}
{% endblock %}

{% block extra_script %}
<script type="text/javascript">
{% if shared_repos %}
$('tr:gt(0)').hover(
    function() {
        $(this).find('.share-permission-edit-icon').removeClass('vh');
    },
    function() {
        $(this).find('.share-permission-edit-icon').addClass('vh');
    }
);
$('.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,
        contentType: 'application/json; charset=utf-8',
        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 %}

{% if fileshares %}
$(".view-link").click(function() {
    var link = $(this).attr('data');
    $('#shared-link').before('<p class="hide">' + link + '</p>')
    .val(link).css('width', $('#shared-link').prev().width() + 2)
    .modal({focus:false});
    $('#shared-link').prev().remove();
    return false;
});
$('#shared-link').click(function() {
    $(this).select();
});
{% endif %}
</script>
{% endblock %}