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

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

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

{% block right_panel %}
<div id="tabs" class="tab-tabs">
    <ul class="tab-tabs-nav hd w100 ovhd">
        <li class="tab"><a href="#download-links" class="a">{% trans "Download Links" %}</a></li>
        <li class="tab long-tab"><a href="#upload-links" class="a">{% trans "Upload Links" %}</a></li>
    </ul>
    <div id="download-links">
        {% if fileshares %}
        <table>
            <tr>
                <th width="4%"><!--icon--></th>
                <th width="40%" class="by-name cspt">{% trans "Name"%} <span class="sort-icon hide"></span></th>
                <th width="24%">{% trans "Library"%}</th>
                <th width="10%">{% trans "Visits"%}</th>
                <th width="12%" class="by-time cspt">{% trans "Expiration"%} <span class="sort-icon hide"></span></th>
                <th width="10%"><!--Operations--></th>
            </tr>
            {% for fs in fileshares %}
            <tr data-type="{{fs.s_type}}" data-name="{{ fs.filename }}" data-time="{{ fs.expire_date|date:'Y-m-d' }}">
                {% if fs.s_type == 'f' %}
                <td class="alc"><img src="{{ MEDIA_URL }}img/file/{{ fs.filename|file_icon_filter }}" alt="{% trans "File"%}" /></td>
                <td><a href="{% url 'view_lib_file' fs.repo.id fs.path|urlencode %}">{{ fs.filename }}</a></td>
                {% else %}
                <td class="alc"><img src="{{ MEDIA_URL }}img/folder-icon-24.png" alt="{% trans "Directory icon"%}" /></td>
                <td><a href="{% url 'view_common_lib_dir' fs.repo.id fs.path|urlencode|strip_slash %}">{{ fs.filename }}</a></td>
                {% endif %}
                <td><a href="{% url 'view_common_lib_dir' fs.repo.id '' %}">{{ fs.repo.name }}</a></td>
                <td>{{ fs.view_cnt }}</td>
                {% if fs.expire_date %}
                {% if fs.is_expired %}
                <td class='error'>{{ fs.expire_date|date:'Y-m-d' }}</td>
                {% else %}
                <td>{{ fs.expire_date|date:'Y-m-d' }}</td>
                {% endif %}
                {% else %}
                <td>--</td>
                {% endif %}
                <td>
                    <img src="{{ MEDIA_URL }}img/link.png" alt="" class="view-link op-icon vh" data-link="{{ fs.shared_link }}" title="{% trans "View"%}" />
                    <img src="{{ MEDIA_URL }}img/rm.png" alt="" class="rm-link op-icon vh" data-token="{{ fs.token }}" title="{% trans "Remove"%}" />
                </td>
            </tr>
            {% endfor %}
        </table>
        {% else %}
        <div class="empty-tips">
            <h2 class="alc">{% trans "You don't have any download link"%}</h2>
            <p>{% trans "You can generate a download link for a folder or a file. People receive this link can view the folder or the file online." %}</p>
        </div>
        {% endif %}
    </div>

    <div id="upload-links" class="hide">
        {% if uploadlinks %}
        <table>
            <tr>
                <th width="4%"><!--icon--></th>
                <th width="44%">{% trans "Name"%}</th>
                <th width="25%">{% trans "Library"%}</th>
                <th width="12%">{% trans "Visits"%}</th>
                <th width="15%">{% trans "Operations"%}</th>
            </tr>
            {% for link in uploadlinks %}
            <tr>
                <td class="alc"><img src="{{ MEDIA_URL }}img/folder-icon-24.png" alt="{% trans "Directory icon"%}" /></td>
                <td><a href="{% url 'view_common_lib_dir' link.repo.id link.path|urlencode|strip_slash %}">{{ link.dir_name }}</a></td>
                <td><a href="{% url 'view_common_lib_dir' link.repo.id '' %}">{{ link.repo.name }}</a></td>
                <td>{{ link.view_cnt }}</td>
                <td>
                    <img src="{{ MEDIA_URL }}img/link.png" alt="" class="view-link op-icon vh" data-link="{{ link.shared_link }}" title="{% trans "View"%}" />
                    <img src="{{ MEDIA_URL }}img/rm.png" alt="" class="rm-upload-link op-icon vh" data-token="{{ link.token }}" title="{% trans "Remove"%}" />
                </td>
            </tr>
            {% endfor %}
        </table>
        {% else %}
        <div class="empty-tips">
            <h2 class="alc">{% trans "You don't have any upload link"%}</h2>
            <p>{% trans "You can generate an upload link from any folder. People receive this link can upload files to this folder." %}</p>
        </div>
        {% endif %}
    </div>
</div>
<input type="text" readonly="readonly" value="" id="shared-link" class="hide" />
{% endblock %}

{% block extra_script %}{{block.super}}
{% if fileshares %}
<script type="text/javascript" src="{{MEDIA_URL}}js/ChinesePinYinInitials.js"></script>
{% endif %}
<script type="text/javascript">
{% if fileshares or uploadlinks %}
$(".view-link").click(function() {
    var link = $(this).attr('data-link');
    $('#shared-link').before('<p class="hide">' + link + '</p>')
    .val(link).css('width', $('#shared-link').prev().width() + 2)
    .modal({focus:false});
    $('#shared-link').prev().remove();
});

// rm download/upload link
$('.rm-link, .rm-upload-link').click(function() {
    var _this = $(this);
    $.ajax({
        url: $(this).hasClass('rm-link') ? '{% url 'ajax_remove_shared_link' %}' : '{% url 'ajax_remove_shared_upload_link' %}',
        type: 'POST',
        data: {'t': $(this).attr('data-token')},
        cache: false,
        dataType: 'json',
        beforeSend: prepareCSRFToken,
        success: function() {
            _this.closest('tr').remove();
        },
        error: ajaxErrorHandler
    });
});

$('#shared-link').click(function() {
    $(this).select();
});
{% endif %}

{% if fileshares %}
// sort download links
$('.by-name, .by-time').click(function() {
    var $table = $(this).closest('table');

    // handle sort-icon
    $('.sort-icon', $table).hide();
    var $sort_icon = $('.sort-icon', $(this)).show();
    if ($sort_icon.hasClass('icon-caret-up') ||
        $sort_icon.hasClass('icon-caret-down')) {
        $sort_icon.toggleClass('icon-caret-up icon-caret-down');
    } else {
        $sort_icon.addClass('icon-caret-up');
    }

    // prepare data
    var dir_item_list = [],
        file_item_list = [],
        $items = $('tr:gt(0)', $table);
    $items.each(function(index, item) {
        var obj = {
            'element': item,
            'name': $(item).attr('data-name'),
            'time': $(item).attr('data-time')
        };
        if ($(item).data('type') == 'd') {
            dir_item_list.push(obj);
        } else {
            file_item_list.push(obj);
        }
    });

    // define 'sort by' functions
    var by_name_up = function (a, b) {
        var a_name_code = a.name.charCodeAt(0); // get the first character code from a.name 
        var b_name_code = b.name.charCodeAt(0);
        if ((a_name_code >= 19968 && a_name_code <= 40869) &&
            (b_name_code >= 19968 && b_name_code <= 40869)) {
            var a_name_pinyin = ChinesePinYinInitials.charAt(a_name_code - 19968); // get the first letter of the name's first charater's pinyin
            var b_name_pinyin = ChinesePinYinInitials.charAt(b_name_code - 19968);
            if (a_name_pinyin == b_name_pinyin) {
                return 0;
            } else {
                return a_name_pinyin < b_name_pinyin ? -1 : 1;
            }

        } else {
            return a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1;
        }
    };
    var by_name_down = function (a, b) {
        var a_name_code = a.name.charCodeAt(0); // get the first character code from a.name 
        var b_name_code = b.name.charCodeAt(0);
        if ((a_name_code >= 19968 && a_name_code <= 40869) &&
            (b_name_code >= 19968 && b_name_code <= 40869)) {
            var a_name_pinyin = ChinesePinYinInitials.charAt(a_name_code - 19968); // get the first letter of the name's first charater's pinyin
            var b_name_pinyin = ChinesePinYinInitials.charAt(b_name_code - 19968);
            if (a_name_pinyin == b_name_pinyin) {
                return 0;
            } else {
                return a_name_pinyin < b_name_pinyin ? 1 : -1;
            }

        } else {
            return a.name.toLowerCase() < b.name.toLowerCase() ? 1 : -1;
        }
    };
    var by_time_up = function (a, b) {
        if (!a.time && !b.time) {
            return 0;
        }
        if (!a.time && b.time) {
            return 1;
        }
        if (a.time && !b.time) {
            return -1;
        }
        return a.time < b.time ? -1 : 1;
    };
    var by_time_down = function (a, b) {
        if (!a.time && !b.time) {
            return 0;
        }
        if (!a.time && b.time) {
            return -1;
        }
        if (a.time && !b.time) {
            return 1;
        }
        return a.time < b.time ? 1 : -1;
    };

    // sort
    if ($(this).hasClass('by-name')) {
        // by name
        if ($sort_icon.hasClass('icon-caret-up')) {
            dir_item_list.sort(by_name_up);
            file_item_list.sort(by_name_up);
        } else {
            dir_item_list.sort(by_name_down);
            file_item_list.sort(by_name_down);
        }
    } else {
        // by time
        if ($sort_icon.hasClass('icon-caret-up')) {
            dir_item_list.sort(by_time_up);
            file_item_list.sort(by_time_up);
        } else {
            dir_item_list.sort(by_time_down);
            file_item_list.sort(by_time_down);
        }
    }

    // DOM op
    $items.detach();
    $(dir_item_list).each(function(index, item) {
        $table.append(item.element);
    });
    $(file_item_list).each(function(index, item) {
        $table.append(item.element);
    });
});
{% endif %}
</script>
{% endblock %}
