{% load seahub_tags i18n %}
{% load url from future %}
<h3>{% trans "Libraries" %}</h3>
<div id="repos-tabs">
<div class="ovhd">
    <ul class="fleft">
        <li><a href="#my-own-repos" onfocus="this.blur()">{% trans "Mine" %}</a></li>
        <li><a href="#repos-shared-to-me" onfocus="this.blur()">{% trans "Shared" %}</a></li>
        <li><a href="#starred-files" onfocus="this.blur()">{% trans "Starred" %}</a></li>
    </ul>
    <button id="repo-create" class="fright">{% trans "New Library" %}</button>
</div>
<div id="my-own-repos">
{% if owned_repos %}
<table>
    <tr>
        <th width="4%"><!--icon--></th>
        <th width="24%">{% trans "Name" %}</th>
        <th width="43%">{% trans "Description" %}</th>
        <th width="15%">{% trans "Last Update" %}</th>
        <th width="14%">{% trans "Operations" %}</th>
    </tr>
    {% for repo in owned_repos %}
    <tr>
        <td><img src="{{MEDIA_URL}}img/sync-folder-20.png" title="{% trans "Read-Write" %}" alt="{% trans "directory icon" %}" /></td>
        <td><a href="{{ SITE_ROOT }}repo/{{ repo.props.id }}/">{{ repo.props.name }}</a></td>
        <td>{{ repo.props.desc }}</td>
        {% if repo.latest_modify %}
        <td>{{ repo.latest_modify|translate_commit_time }}</td>
        {% else %}
        <td>--</td>
        {% endif %}
        <td>
            <img src="{{ MEDIA_URL }}img/download-20.png" data="{{ repo.props.id }}" class="download-btn op-icon vh" title="{% trans "Download" %}" alt="{% trans "Download" %}" />
            <img src="{{ MEDIA_URL }}img/share-20.png" data="{{ repo.props.id }}" class="repo-share-btn op-icon vh" title="{% trans "Share" %}" alt="{% trans "Share" %}" />
            <img src="{{ MEDIA_URL }}img/delete-20.png" data="{{ SITE_ROOT }}repo/remove/{{ repo.props.id }}/?next={{ request.path }}" class="repo-delete-btn op-icon vh" title="{% trans "Delete" %}" alt="{% trans "Delete" %}" />
        </td>
    </tr>
    {% endfor %}
</table>
{% else %}
<p class="empty-repo-tips">{% trans "You can create a library to organize your files. For example, you can create one for each of your projects. Each library can be synchronized and shared separately." %}</p>
{% endif %}
</div>
<div id="repos-shared-to-me">
{% if in_repos %}
<table>
    <tr>
        <th width="4%"><!--icon--></th>
        <th width="20%">{% trans "Name" %}</th>
        <th width="36%">{% trans "Description" %}</th>
        <th width="15%">{% trans "Last Update" %}</th>
        <th width="15%">{% trans "Shared By" %}</th>
        <th width="10%">{% trans "Operations" %}</th>
    </tr>

    {% for repo in in_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="{{ SITE_ROOT }}repo/{{ repo.props.repo_id }}">{{ repo.props.repo_name }}</a></td>
        <td>{{ repo.props.repo_desc }}</td>
        {% if repo.props.last_modified %}
        <td>{{ repo.props.last_modified|translate_commit_time }}</td>
        {% else %}
        <td>--</td>
        {% endif %}
        <td>{{ repo.props.user|email2nickname }}</td>
        <td>
        {% if repo.user_perm == 'rw' %}
            <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" %}" />
        {% endif %}
            <img src="{{ MEDIA_URL }}img/delete-20.png" data="{{ SITE_ROOT }}shareadmin/removeshare/?repo_id={{ repo.props.repo_id }}&from={{ repo.props.user }}&to={{ request.user }}" class="unshare-btn op-icon vh" title="{% trans "Remove Share" %}" alt="{% trans "Remove Share" %}" />
        </td>
    </tr>
    {% endfor %}
</table>
{% else %}
<p class="empty-repo-tips">{% trans "Libraries shared to you will be shown here." %}</p>
{% endif %}
</div>
<div id="starred-files">
{% if starred_files %}
<table>
    <tr>
        <th width="5%"></th>
        <th width="45%">{% trans "File Name" %}</th>
        <th width="30%">{% trans "Library" %}</th>
        <th width="20%">{% trans "Last Update" %}</th>
    </tr>
    {% for sfile in starred_files %}
    <tr>
        <td class="icon-container"><img src="{{ MEDIA_URL }}img/file/{{ sfile.path|file_icon_filter }}" alt="{% trans "icon" %}" /></td>
        <td>
            <a href="{% url 'repo_view_file' sfile.repo.id %}?p={{ sfile.path|urlencode }}">{{ sfile.formatted_path }}</a>
        </td>
        <td>{{ sfile.repo.name }}</td>
        <td>{{ sfile.last_modified|translate_commit_time }}</td>
    </tr>
    {% endfor %}
</table>
{% else %}
<p class="no-starred-file-tips">{% trans "You can star important files, and they will be shown here." %}</p>
{% endif %}
</div>
</div>