{% extends 'base_wide_page.html' %}

{% load seahub_tags i18n staticfiles %}
{% load url from future %}

{% block wide_page_content %}
    {% if traffic_over_limit %}
    <p class="strip-tip">{% trans "File download is disabled: the share link traffic of owner is used up." %}</p>
    {% endif %}

    <h2>{{ dir_name }}</h2>
    <p>{% trans "Shared by: " %}{{ username|email2nickname }}</p>

    <div class="repo-file-list-topbar ovhd">
        <p class="path fleft">
        {% trans "Current path: "%}
        {% for name, link in zipped %}
        {% if not forloop.last %}
        <a href="{% url "view_shared_dir" token %}?p={{ link|urlencode }}&mode={{mode}}">{{ name }}</a> /
        {% else %}
        {{ name }}
        {% endif %}
        {% endfor %}
        </p>

        <div class="fright">
            <a href="?p={{ path|urlencode }}&mode=list" title="{% trans "List" %}" aria-label="{% trans "List" %}" class="mode-link vam{% if mode == 'list' %} cur-mode-link{% endif %} list-mode-link">
                {% if mode == 'list' %}
                    <img src="{{ MEDIA_URL }}img/list-white.png" alt="{% trans "List" %}" width="20" />
                {% else %}
                    <img src="{{ MEDIA_URL }}img/list.png" alt="{% trans "List" %}" width="20" />
                {% endif %}
            </a><a href="?p={{ path|urlencode }}&mode=grid" title="{% trans "Grid" %}" aria-label="{% trans "Grid" %}" class="mode-link vam{% if mode == 'grid' %} cur-mode-link{% endif %}">
                {% if mode == 'grid' %}
                    <img src="{{ MEDIA_URL }}img/grid-white.png" alt="{% trans "Grid" %}" width="20" />
                {% else %}
                    <img src="{{ MEDIA_URL }}img/grid.png" alt="{% trans "Grid" %}" width="20" />
                {% endif %}
            </a>
            {% if not traffic_over_limit and permissions.can_download %}
            <a href="#" class="obv-btn vam shared-dir-zip">{% trans "ZIP"%}</a>
            {% endif %}
        </div>
    </div>
    {% if mode == 'list' %}
    <table>
        <thead>
            <tr>
                <th width="5%"></th>
                <th width="55%">{% trans "Name"%}</th>
                <th width="14%">{% trans "Size"%}</th>
                <th width="16%">{% trans "Last Update"%}</th>
                <th width="10%">{% trans "Operations"%}</th>
            </tr>
        </thead>

        <tbody>
            {% for dirent in dir_list %}
            <tr>
                <td class="alc"><img src="{{ MEDIA_URL }}img/folder-24.png" alt="{% trans "Directory icon"%}" /></td>
                <td>
                    <a href="?p={{ path|urlencode }}{{ dirent.obj_name|urlencode }}&mode={{mode}}" class="normal">{{ dirent.obj_name }}</a>
                </td>
                <td></td>
                <td>{{ dirent.last_modified|translate_seahub_time }}</td>
                <td>
                    {% if not traffic_over_limit and permissions.can_download %}
                    <a class="op-icon vh download-dir" data-name="{{ dirent.obj_name }}" href="#" title="{% trans 'Download' %}" aria-label="{% trans 'Download' %}">
                        <img src="{{MEDIA_URL}}img/download.png" alt="{% trans 'Download' %}" />
                    </a>
                    {% endif %}
                </td>
            </tr>
            {% endfor %}

            {% for dirent in file_list %}
            <tr class="file-item" data-name="{{dirent.obj_name}}" >
                {% if dirent.is_img or dirent.is_video %}
                {% if dirent.encoded_thumbnail_src %}
                <td class="alc"><img class="thumbnail" src="{{ SITE_ROOT }}{{ dirent.encoded_thumbnail_src }}" alt="{% trans "File"%}" /></td>
                {% else %}
                <td class="alc"><img class="not-thumbnail" src="{{ MEDIA_URL }}img/file/{{ dirent.obj_name|file_icon_filter }}" alt="{% trans "File"%}" /></td>
                {% endif %}
                {% else %}
                <td class="alc"><img src="{{ MEDIA_URL }}img/file/{{ dirent.obj_name|file_icon_filter }}" alt="{% trans "File"%}" /></td>
                {% endif %}

                <td>
                    {% if dirent.is_img %}
                    <a class="normal img-name-link" href="{% url "view_file_via_shared_dir" token %}?p={{ path|urlencode }}{{ dirent.obj_name|urlencode }}" data-mfp-src="{% url "view_file_via_shared_dir" token %}?p={{ path|urlencode }}{{ dirent.obj_name|urlencode }}&raw=1">{{ dirent.obj_name }}</a>
                    {% else %}
                    <a class="normal" href="{% url "view_file_via_shared_dir" token %}?p={{ path|urlencode }}{{ dirent.obj_name|urlencode }}">{{ dirent.obj_name }}</a>
                    {% endif %}
                </td>

                <td>{{ dirent.file_size|filesizeformat }}</td>
                <td>{{ dirent.last_modified|translate_seahub_time }}</td>
                <td>
                    {% if not traffic_over_limit and permissions.can_download %}
                    <a class="op-icon vh" href="{% url "view_file_via_shared_dir" token %}?p={{ path|urlencode }}{{ dirent.obj_name|urlencode }}&dl=1" title="{% trans "Download"%}" aria-label="{% trans "Download"%}">
                        <img src="{{MEDIA_URL}}img/download.png" alt="{% trans "Download"%}" />
                    </a>
                    {% endif %}
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    {% else %}
        <ul class="grid">
            {% for dirent in dir_list %}
            <li class="grid-item" title="{{ dirent.obj_name }}">
                <a href="?p={{ path|urlencode }}{{ dirent.obj_name|urlencode }}&mode={{mode}}" class="img-link">
                    <img src="{{ MEDIA_URL }}img/folder-beige-192.png" alt="" width="96" class="vam" />
                </a>
                <a href="?p={{ path|urlencode }}{{ dirent.obj_name|urlencode }}&mode={{mode}}" class="normal text-link ellipsis">{{ dirent.obj_name }}</a>
                {% if not traffic_over_limit and permissions.can_download %}
                <a class="op-icon vh download-dir" data-name="{{ dirent.obj_name }}" href="#" title="{% trans 'Download' %}">
                    <img src="{{MEDIA_URL}}img/download.png" alt="" />
                </a>
                  {% endif %}
            </li>
            {% endfor %}

            {% for dirent in file_list %}
            <li class="file-item grid-item" data-name="{{dirent.obj_name}}" title="{{dirent.obj_name}}">
                {% if dirent.is_img %}
                <a class="img-link img-img-link" href="{% url "view_file_via_shared_dir" token %}?p={{ path|urlencode }}{{ dirent.obj_name|urlencode }}" data-mfp-src="{% url "view_file_via_shared_dir" token %}?p={{ path|urlencode }}{{ dirent.obj_name|urlencode }}&raw=1">
                {% else %}
                <a class="img-link" href="{% url "view_file_via_shared_dir" token %}?p={{ path|urlencode }}{{ dirent.obj_name|urlencode }}">
                {% endif %}

                {% if dirent.is_img or dirent.is_video %}
                    {% if dirent.encoded_thumbnail_src %}
                        <img class="thumbnail vam" src="{{ SITE_ROOT }}{{ dirent.encoded_thumbnail_src }}" alt="" />
                    {% else %}
                        <img class="not-thumbnail vam" src="{{ MEDIA_URL }}img/file/{{ dirent.obj_name|file_icon_filter:192 }}" alt="" width="96" />
                    {% endif %}
                {% else %}
                    <img class="vam" src="{{ MEDIA_URL }}img/file/{{ dirent.obj_name|file_icon_filter:192 }}" alt="" width="96" />
                {% endif %}

                </a>

                {% if dirent.is_img %}
                <a class="normal img-name-link text-link ellipsis" href="{% url "view_file_via_shared_dir" token %}?p={{ path|urlencode }}{{ dirent.obj_name|urlencode }}" data-mfp-src="{% url "view_file_via_shared_dir" token %}?p={{ path|urlencode }}{{ dirent.obj_name|urlencode }}&raw=1">{{ dirent.obj_name }}</a>
                {% else %}
                <a class="normal text-link ellipsis" href="{% url "view_file_via_shared_dir" token %}?p={{ path|urlencode }}{{ dirent.obj_name|urlencode }}">{{ dirent.obj_name }}</a>
                {% endif %}

                {% if not traffic_over_limit and permissions.can_download %}
                <a class="op-icon vh" href="{% url "view_file_via_shared_dir" token %}?p={{ path|urlencode }}{{ dirent.obj_name|urlencode }}&dl=1" title="{% trans "Download"%}">
                    <img src="{{MEDIA_URL}}img/download.png" alt="" />
                </a>
                {% endif %}
            </li>
            {% endfor %}
        </ul>
    {% endif %}
{% endblock %}

{% block extra_script %}
<script type="text/javascript" src="{% static "scripts/lib/jquery.magnific-popup.js" %}"></script>
<script type="text/javascript">
var cur_path = '{{path|escapejs}}';
var share_link_token = '{{token}}';
var file_server_root = '{{FILE_SERVER_ROOT}}';

var magnificOptions = {
    type: 'image',
    tClose: "{% trans "Close (Esc)" %}", // Alt text on close button
    tLoading: "{% trans "Loading..." %}", // Text that is displayed during loading. Can contain %curr% and %total% keys
    gallery: {
        enabled: true,
        tPrev: "{% trans "Previous (Left arrow key)" %}", // Alt text on left arrow
        tNext: "{% trans "Next (Right arrow key)" %}", // Alt text on right arrow
        tCounter: "{% trans "%curr% of %total%" %}" // Markup for "1 of 7" counter
    },
    image: {
        titleSrc: function(item) {
            var $el = item.el;
            var img_name = HTMLescape($el.closest('.file-item').attr('data-name'));
            var img_link = '<a href="' + $el.attr('href') + '" target="_blank">' + "{% trans "Open in New Tab" %}" + '</a>';
            return img_name + '<br />' + img_link;
        },
        tError: '{% trans '<a href="%url%" target="_blank">The image</a> could not be loaded.' %}' // Error message when image could not be loaded
    }
};

{% if ENABLE_THUMBNAIL %}
$('[data-mfp-src]').each(function(index, item) {
    var $item = $(item);
    var file_name = $item.closest('.file-item').attr('data-name');
    var file_ext = file_name.substr(file_name.lastIndexOf('.') + 1).toLowerCase();
    var is_gif = file_ext == 'gif' ? true : false;
    if (!is_gif) {
        $item.attr('data-mfp-src', '{{ SITE_ROOT }}thumbnail/{{ token }}/{{ thumbnail_size_for_original }}' + encodePath(cur_path + file_name));
    }
});
{% endif %}
$('.img-name-link').magnificPopup(magnificOptions);
$('.img-img-link').magnificPopup(magnificOptions);


{% if not traffic_over_limit and permissions.can_download %}
$('.shared-dir-zip, .download-dir').click(function (e) {
    var cur_download_dir_path;
    var interval,
        zip_token,
        queryZipProgress;
    var packagingTip = "{% trans "Packaging..." %}";
    var $tip = $('<p></p>');

    if ($(this).hasClass("shared-dir-zip")) {
        cur_download_dir_path = cur_path;
    } else {
        cur_download_dir_path = cur_path + $(this).attr('data-name');
    }

    queryZipProgress = function() {
        $.ajax({
            url: '{% url 'api-v2.1-query-zip-progress' %}' + '?token=' + zip_token,
            dataType: 'json',
            cache: false,
            success: function(data) {
                var progress = data.total == 0 ? '100%' : (data.zipped/data.total*100).toFixed(2) + '%';
                $tip.html(packagingTip + ' ' + progress);
                if (data['total'] == data['zipped']) {
                    setTimeout(function() { $.modal.close(); }, 500);
                    clearInterval(interval);
                    location.href = file_server_root + 'zip/' + zip_token;
                }
            },
            error: function(xhr) {
                if (xhr.responseText) {
                    feedback($.parseJSON(xhr.responseText).error_msg, 'error');
                } else {
                    feedback("{% trans "Failed. Please check the network." %}", 'error');
                }
                clearInterval(interval);
            }
        });
    };

    $.ajax({
        url: '{% url 'api-v2.1-share-link-zip-task' %}' + '?share_link_token=' + share_link_token + '&path=' + encodeURIComponent(cur_download_dir_path),
        cache: false,
        dataType: 'json',
        success: function(data) {
            zip_token = data['zip_token'];
            $tip.html(packagingTip).modal();
            $('#simplemodal-container').css({'width':'auto'});
            queryZipProgress();
            interval = setInterval(queryZipProgress, 1000);
        },
        error: function(xhr) {
            if (xhr.responseText) {
                feedback($.parseJSON(xhr.responseText).error_msg, 'error');
            } else {
                feedback("{% trans "Failed. Please check the network." %}", 'error');
            }
        }
    });

    return false;
});
{% endif %}

{% if not repo.encrypted and ENABLE_THUMBNAIL %}
// get thumbnails for image files

$(function() {
    var img_icons = $('.not-thumbnail');
    if (img_icons.length == 0) {
        return;
    }
    var get_thumbnail = function(i) {
        var img_icon = $(img_icons[i]),
            file_name = img_icon.closest('.file-item').attr('data-name');
        $.ajax({
            url: '{% url "share_link_thumbnail_create" token %}?path=' + e(cur_path + file_name) + '&size={{thumbnail_size}}',
            cache: false,
            dataType: 'json',
            success: function(data) {
                if (data) {
                    img_icon.attr("src", '{{ SITE_ROOT }}' + data.encoded_thumbnail_src).load(function() {
                        $(this).removeClass("not-thumbnail").addClass("thumbnail")
                        .removeAttr('width'); // for grid view
                    });
                }
            },
            complete: function() {
                // cur_path may be changed. e.g., the user enter another directory
                if (i < img_icons.length - 1) {
                    get_thumbnail(++i);
                }
            }
        });
    };
    get_thumbnail(0);
});
{% endif %}

$('.grid-item').hover(
    function () {
        $('.img-link, .text-link', $(this)).addClass('hl');
        $('.op-icon', $(this)).removeClass('vh');
    },
    function () {
        $('.img-link, .text-link', $(this)).removeClass('hl');
        $('.op-icon', $(this)).addClass('vh');
    }
);
</script>
{% endblock %}