{% 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_seahub_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-url="{{ SITE_ROOT }}repo/remove/{{ repo.props.id }}/?next={{ request.path }}" data-target="{{ repo.props.name }}" class="repo-delete-btn op-icon vh" title="{% trans "Delete" %}" alt="{% trans "Delete" %}" />
        </td>
    </tr>
    {% endfor %}
</table>
{% else %}
<div class="empty-tips">
  <h2 class="center-contents">{% trans "You have not created any libraries" %}</h2>
  <p>{% 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>
  <h3>{% trans "Synchronize libraries with PC client" %}</h3>
  <p>{% trans "1. Download the library (make sure PC client is running)." %}</p>
  <p>{% trans "2. Add files to the folder and they will be uploaded automatically." %}</p>
</div>
{% 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="33%">{% trans "Description" %}</th>
        <th width="15%">{% trans "Last Update" %}</th>
        <th width="15%">{% trans "Shared By" %}</th>
        <th width="13%">{% 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_seahub_time }}</td>
        {% else %}
        <td>--</td>
        {% endif %}
        <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" %}" />
            <img src="{{ MEDIA_URL }}img/delete-20.png" data-url="{% url 'repo_remove_share' %}?repo_id={{ repo.props.repo_id }}&from={{ repo.props.user }}&to={{ request.user }}" data-target="{{repo.props.repo_name}}" class="unshare-btn op-icon vh" title="{% trans "Leave Share" %}" alt="{% trans "Leave Share" %}" />
        </td>
    </tr>
    {% endfor %}
</table>
{% else %}
<div class="empty-tips">
  <h2 class="center-contents">{% trans "No library is shared to you" %}</h2>
  <p>{% trans "Libraries shared to you will be listed here. Libraries shared as writable can be downloaded and synced. Read only libraries can only be downloaded, updates on local files will not be uploaded." %}</p>
</div>
{% 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_seahub_time }}</td>
    </tr>
    {% endfor %}
</table>
{% else %}
<div class="empty-tips">
  <h2 class="center-contents">{% trans "You don't have any starred files yet" %}</h2>
  <p>{% blocktrans %}You can star important files by clicking the "Star" button on file viewing page, and they will be listed here.{% endblocktrans %}</p>
</div>
{% endif %}
</div>
</div>