{% extends "myhome_base.html" %}
{% load seahub_tags avatar_tags group_avatar_tags i18n %}
{% load url from future %}

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

{% block left_panel %}
{% include 'snippets/pubinfo.html' %}
{% endblock %}

{% block right_panel %}
<div class="tabnav">
    <button id="repo-create" class="add fright">{% trans "New Library"%}</button>
    <ul class="tabnav-tabs">
        <li class="tabnav-tab tabnav-tab-cur">{% trans "Libraries" %}</li>
        <li class="tabnav-tab"><a href="{% url 'pubgrp' %}">{% trans "Groups" %}</a></li>
        <li class="tabnav-tab"><a href="{% url 'pubuser' %}">{% trans "Users" %}</a></li>
    </ul>
</div>
{% if public_repos %}
<table>
    <tr>
        <th width="4%"></th>
        <th width="20%">{% trans "Name"%}</th>
        <th width="33%">{% trans "Description"%}</th>
        <th width="15%">{% trans "Last Update"%}</th>
        <th width="15%">{% trans "Share From"%}</th>
        <th width="13%">{% trans "Operations"%}</th>
    </tr>
    {% for repo in public_repos %}
    <tr>
        <td>
            {% if repo.user_perm == 'rw' %}
            <img src="{{MEDIA_URL}}img/sync-folder-20.png" title="{% trans "Read-Write"%}" alt="{% trans "Directory icon"%}" />
            {% else %}
            <img src="{{MEDIA_URL}}img/folder-no-write-20.png" title="{% trans "Read-Only"%}" alt="{% trans "Directory icon"%}" />
            {% endif %}
        </td>
        <td><a href="{% url 'repo' repo.props.repo_id %}">{{ repo.props.repo_name }}</a></td>
        <td>{{ repo.props.repo_desc }}</td>
        <td>{% if repo.props.last_modified %}{{ repo.props.last_modified|translate_seahub_time }}{% else %}--{% endif %}</td>
        <td>{{ repo.props.user|email2nickname }}</td>
        <td>
            <img src="{{ MEDIA_URL }}img/download-20.png" data="{{ repo.props.repo_id }}" class="download-btn op-icon vh" title="{% trans "Download"%}" alt="{% trans "Download"%}" />
        </td>
    </tr>
    {% endfor %}
</table>
{% else %}
<div class="empty-tips">
    <h2 class="center-contents">{% trans "No public library" %}</h2>
    <p>{% blocktrans %}You can create a public library by clicking "New Library" button, others can view and download this library.{% endblocktrans %}</p>
</div>
{% endif %}
{% include "snippets/repo_create_form.html" %}
{% endblock %}

{% block extra_script %}
<script type="text/javascript">
    $(".download-btn").click(function() {
        window.open('{{ SITE_ROOT }}seafile_access_check/?repo_id=' + $(this).attr('data'));
    }); 

    $("table tr:gt(0)").hover(
        function() {
            $(this).find('.op-icon').css('cursor', 'pointer').removeClass('vh');
        },  
        function() {
            $(this).find('.op-icon').addClass('vh');
        }   
    );  
{% url 'seahub.views.public_repo_create' as repo_create_url %}
{% with post_url=repo_create_url %}
    {% include "snippets/repo_create_js.html" %}
{% endwith %}
</script>
{% endblock %}