{% extends base_template %}

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

{% block main_panel %}
    <h2 id="view-hd">{{ dir_name }}</h2>
    <div>
      <p>{% trans "Shared by: " %}{{ username|email2nickname }}</p>
    </div>

    <div class="repo-file-list-outer-container">
        <div class="repo-file-list-inner-container">
            <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="{{ SITE_ROOT }}d/{{ token }}/?p={{ link|urlencode }}">{{ name }}</a> /               
                {% else %}
                {{ name }}
                {% endif %}
                {% endfor %}
                </p>
                <div class="repo-op fright">
                    <button data="{% url 'repo_download_dir' repo.id %}?p={{ path|urlencode }}&t={{ token }}" id="download-dir" class="op-btn">{% trans "ZIP"%}</button>
                </div>
            </div>
            <table class="repo-file-list">
                <tr>
                    <th width="5%"></th>
                    <th width="56%">{% trans "Name"%}</th>
                    <th width="10%">{% trans "Size"%}</th>
                    <th width="29%">{% trans "Operations"%}</th>
                </tr>

                {% for dirent in dir_list %}
                <tr>
                    <td class="icon-container"><img src="{{ MEDIA_URL }}img/folder-icon-24.png" alt="{% trans "Directory icon"%}" /></td>
                    <td>
                        <a href="{{ SITE_ROOT }}d/{{ token }}/?p={{ path|urlencode }}{{ dirent.obj_name|urlencode }}">{{ dirent.obj_name }}</a>
                    </td>

                    <td></td>
                    <td>
                        <div class="repo-file-op vh">
                            <div class="displayed-op">
                                <a class="op" href="{% url 'repo_download_dir' repo.id %}?p={{ path|urlencode }}{{ dirent.obj_name|urlencode }}&t={{token}}">{% trans 'Download' %}</a>
                            </div>
                        </div>
                    </td>
                </tr>
                {% endfor %}

                {% for dirent in file_list %}
                <tr>
                    <td class="icon-container"><img src="{{ MEDIA_URL }}img/file/{{ dirent.obj_name|file_icon_filter }}" alt="{% trans "File"%}" /></td>
                    <td>
                        <a class="op" href="{{ SITE_ROOT }}d/{{ token }}/files/?p={{ path|urlencode }}{{ dirent.obj_name|urlencode }}">{{ dirent.props.obj_name }}</a>
                    </td>

                    <td>{{ dirent.file_size|filesizeformat }}</td>
                    <td>
                        <div class="repo-file-op vh">
                            <div class="displayed-op">
                                <a class="op" href="{{ SITE_ROOT }}repo/{{ repo.props.id }}/{{ dirent.props.obj_id }}/?file_name={{ dirent.props.obj_name }}&op=download&t={{token}}">{% trans "Download"%}</a>
                            </div>
                        </div>
                    </td>
                </tr>
                {% endfor %}
            </table>
        </div>
    </div>
{% endblock %}

{% block extra_script %}
<script type="text/javascript">
$("tr:gt(0)").hover(
    function() {
        $(this).find('.repo-file-op').removeClass('vh');
    },
    function() {
        $(this).find('.repo-file-op').addClass('vh');
    }
);
$('#download-dir').click(function() {
    location.href = $(this).attr('data');
});
</script>
{% endblock %}