{% extends 'base.html' %}

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

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

{% block main_panel %}
    <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 %}
            <a href="?p={{ path|urlencode }}&dl=1" 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 %}
                    <a class="op-icon vh" href="{% url "view_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 %}

            {% for dirent in file_list %}
            <tr class="file-item" data-name="{{dirent.obj_name}}" >
                {% if dirent.is_img %}
                {% 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 %}
                    <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 %}
                <a class="op-icon vh" href="{% url "view_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 %}

            {% 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">
                    {% 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 %}
                </a>
                {% else %}
                <a class="img-link" href="{% url "view_file_via_shared_dir" token %}?p={{ path|urlencode }}{{ dirent.obj_name|urlencode }}">
                    <img class="vam" src="{{ MEDIA_URL }}img/file/{{ dirent.obj_name|file_icon_filter:192 }}" alt="" width="96" />
                </a>
                {% endif %}

                {% 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 %}
                <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">
$(function() {
    {% if traffic_over_limit %}
    var tip = "{% trans "File download is disabled: the share link traffic of owner is used up." %}";
    $('#title-panel').html('<p class="alc" style="background:#fddaa4;color:#1f0600;padding:3px 0;margin:0 0 15px;">' + tip + '</p>').removeClass('hide');
    {% endif %}
});

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
    }
};
$('.img-name-link').magnificPopup(magnificOptions);
$('.img-img-link').magnificPopup(magnificOptions);

{% if not repo.encrypted and ENABLE_THUMBNAIL %}
// get thumbnails for image files
var cur_path = "{{path|escapejs}}";
$(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 %}