{% extends "base_for_backbone.html" %}
{% load seahub_tags avatar_tags group_avatar_tags i18n %}
{% load staticfiles %}

{% block sub_title %}{% trans "Libraries" %} - {% endblock %}

{% block right_panel %}
{% endblock %}

{% block extra_script %}
<script type="text/template" id="my-own-repos-tmpl">
    <div class="hd ovhd">
        <h3 class="fleft">{% trans "Mine" %}</h3>
        <button class="repo-create btn-white fright"><span aria-hidden="true" class="icon-plus-square add vam"></span><span class="vam">{% trans "New Library" %}</span></button>
    </div>
    <table class="my-own-repos-table hide">
        <thead></thead>
        <tbody></tbody>
    </table>
    <div class="empty-tips hide">
        <h2 class="alc">{% 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>
    </div>
    <span class="loading-icon loading-tip"></span>
    <p class="error error-tip hide"></p>
</script>

<script type="text/template" id="repos-shared-to-me-tmpl">
    <h3 class="hd">{% trans "Shared" %}</h3>
    <table class="hide">
        <thead></thead>
        <tbody></tbody>
    </table>
    <div class="empty-tips hide">
        <h2 class="alc">{% trans "No library is shared to you" %}</h2>
    </div>
    <span class="loading-icon loading-tip"></span>
    <p class="error error-tip hide"></p>
</script>

<script type="text/template" id="organization-repos-tmpl">
    <div class="hd">{# no 'ovhd' as there is a .dropdown-menu in it #}
        <h3 class="fleft">{% trans "Organization" context "This is a label in navigation, meaning the public area for all registered users to share libraries." %}</h3>
        {% if can_add_pub_repo %}
        <div class="fright dropdown js-add-pub-lib-dropdown">
            <button class="btn-white dropdown-toggle"><span aria-hidden="true" class="icon-plus-square add vam"></span><span class="vam">{% trans "Add Library"%}</span></button>
            <ul class="dropdown-menu hide">
                <li><a class="op share-existing" href="#">{% trans "Share existing libraries" %}</a></li>
                <li><a class="op create-new" href="#">{% trans "Create a new library" %}</a></li>
            </ul>
        </div>
        {% endif %}
    </div>

    <table class="repo-list hide">
        <thead></thead>
        <tbody></tbody>
    </table>
    <div class="empty-tips hide">
        <h2 class="alc">{% 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>
    <span class="loading-icon loading-tip"></span>
    <p class="error error-tip hide"></p>
</script>

<script type="text/template" id="groups-tmpl">
    <div class="hd ovhd">
        <h3 class="fleft">{% trans "My Groups" %}</h3>
        {% if user.permissions.can_add_group %}
        <button id="add-group" class="btn-white fright"><span aria-hidden="true" class="icon-plus-square add vam"></span><span class="vam">{% trans "New Group" %}</span></button>
        {% endif %}
    </div>

    <div id="group-list" class="hide"></div>
    <div class="empty-tips hide">
        <h2 class="alc">{% trans "You are not in any group" %}</h2>
        {% if user.permissions.can_add_group %}
        <p>{% blocktrans %}Group is a place for you and your friends leaving messages and collaborating on libraries. You can create a group by clicking "New Group" button.{% endblocktrans %}</p>
        {% else %}
        <p>{% trans "Group is a place for you and your friends leaving messages and collaborating on libraries. Groups you join will be listed here." %}</p>
        {% endif %}
    </div>
    <span class="loading-icon loading-tip"></span>
    <p class="error error-tip hide"></p>

    {% if user.permissions.can_add_group %}
    <form id="group-add-form" action="" method="post" class="hide">{% csrf_token %}
        <h3 id="dialogTitle">{% trans "New Group" %}</h3>
        <label for="group-name">{% trans "Name" %}</label><br />
        <input type="text" name="group_name" value="" class="input" id="group-name" /><br />
        <p class="error hide"></p>
        <input type="submit" class="submit" value="{% trans "Submit" %}" />
    </form>
    {% endif %}
</script>

<script type="text/template" id="group-tmpl">
    <div id="group-top"></div>

    <div id="group-repos">
        <table class="hide">
            <thead></thead>
            <tbody></tbody>
        </table>
        <div class="empty-tips" style="margin-bottom:150px; display:none;">
            <h2 class="alc">{% trans "No library is shared to this group" %}</h2>
            <p>{% blocktrans %}You can share libraries by clicking the "New Library" button above or the "Share" icon on your libraries list.{% endblocktrans %}</p>
            <p>{% trans "Libraries shared as writable can be downloaded and synced by other group members. Read only libraries can only be downloaded, updates by others will not be uploaded." %}</p>
        </div>
        <span class="loading-icon loading-tip"></span>
        <p class="error error-tip hide"></p>
    </div>
</script>

<script type="text/template" id="group-settings-tmpl">
    <div class="outer-caret up-outer-caret"><div class="inner-caret"></div></div>
    <div class="popover-hd ovhd">
        <a href="#" title="{% trans "Close" %}" aria-label="{% trans "Close" %}" class="popover-close close sf2-icon-x1 op-icon fright"></a>
        <h3 class="popover-title">{% trans "Settings" %}</h3>
    </div>
    <div class="popover-con">
    </div>
</script>

<script type="text/template" id="group-members-tmpl">
    <div class="outer-caret up-outer-caret"><div class="inner-caret"></div></div>
    <div class="popover-hd ovhd">
        <a href="#" title="{% trans "Close" %}" aria-label="{% trans "Close" %}" class="popover-close close sf2-icon-x1 op-icon fright"></a>
        <h3 class="popover-title">{% trans "Members" %}</h3>
    </div>
    <div class="popover-con">
        <div class="loading-icon loading-tip"></div>
        <ul id="group-member-list" class="hide"></ul>
        <p class="error hide"></p>
    </div>
</script>

<script type="text/template" id="group-discussions-tmpl">
    <div class="outer-caret up-outer-caret"><div class="inner-caret"></div></div>
    <div class="popover-hd ovhd">
        <a href="#" title="{% trans "Close" %}" aria-label="{% trans "Close" %}" class="popover-close close sf2-icon-x1 op-icon fright"></a>
        <h3 class="popover-title">{% trans "Discussions" %}</h3>
    </div>
    <div class="popover-con">
        <div class="loading-icon loading-tip"></div>
        <p class="load-more-discussion hide js-load-more">{% trans "More..." %}</p>
        <ul id="group-discussion-list" class="hide"></ul>
        <p class="no-discussion-tip hide">{% trans "No discussion in this group yet." %}</p>
        <p class="error hide"></p>
    </div>
    <div class="popover-footer">
        <form action="" method="post" class="msg-form">
            <img src="{% avatar_url request.user 64 %}" alt="" width="32" class="avatar-circle fleft" />
            <div class="msg-body">
                <textarea name="message" placeholder="{% trans "Add a discussion..." %}" class="msg-input"></textarea>
                <button type="submit" class="submit msg-submit">{% trans "Submit" %}</button>
            </div>
        </form>
    </div>
</script>

<script type="text/template" id="starred-file-tmpl">
    <h3 class="hd">{% trans "Starred" %}</h3>
    <table class="hide">
        <thead>
            <tr>
                <th width="5%"></th>
                <th width="40%">{% trans "File Name" %}</th>
                <th width="32%">{% trans "Library" %}</th>
                <th width="18%">{% trans "Last Update" %}</th>
                <th width="5%"></th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <span class="loading-icon loading-tip"></span>
    <div class="empty-tips hide">
        <h2 class="alc">{% 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>
</script>

<script type="text/template" id="activities-tmpl">
    <div id="activities-body" class="hide"></div>
    <span class="loading-icon loading-tip"></span>
    <button id="activities-more" class="hide">{% trans 'More' %}</button>
</script>

<script type="text/template" id="devices-tmpl">
    <h3 class="hd">{% trans "Devices" %}</h3>
    <table class="hide">
        <thead>
            <tr>
                <th width="13%">{% trans "Platform" %}</th>
                <th width="25%">{% trans "Device Name" %}</th>
                <th width="20%">{% trans "IP" %}</th>
                <th width="17%">{% trans "Last Access" %}</th>
                <th width="15%">{% trans "# Libraries" %}</th>
                <th width="10%"></th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <span class="loading-icon loading-tip"></span>
    <div class="empty-tips hide">
        <h2 class="alc">{% trans "You do not have connected devices" %}</h2>
        <p>{% trans "Your clients (Desktop/Android/iOS) will be listed here." %}</p>
    </div>
</script>

{% include "js/dir-view.html" %}

{% include "js/lib-op-popups.html" %}
<script type="text/javascript">
app["pageOptions"] = {
    site_root: "{{ SITE_ROOT }}",
    csrfToken: "{{ csrf_token }}",
    groups: (function () {
        var groups = [];
        {% for group in request.user.joined_groups %}
        groups.push({'name': '{{group.group_name}}', 'id': '{{group.id}}'});
        {% endfor %}
        return groups;
    })(),
    user_mods_available: (function () {
        var mods_available = [];
        {% for mod in request.user.mods_available %}
        mods_available.push('{{mod}}');
        {% endfor %}
        return mods_available;
    })(),
    user_mods_enabled: (function () {
        var mods_enabled = [];
        {% for mod in request.user.mods_enabled %}
        mods_enabled.push('{{mod}}');
        {% endfor %}
        return mods_enabled;
    })(),
    username: "{{request.user.username}}",
    name: "{{request.user.username|email2nickname|escapejs}}",
    events_enabled: {% if events_enabled %} true {% else %} false {% endif %},
    can_add_repo: {% if user.permissions.can_add_repo %} true {% else %} false {% endif %},
    can_generate_shared_link: {% if user.permissions.can_generate_shared_link %} true {% else %} false {% endif %},
    is_staff: {% if request.user.is_staff %} true {% else %} false {% endif %},
    repo_password_min_length: {{ repo_password_min_length }},
    share_link_password_min_length: {{ share_link_password_min_length }},
    guide_enabled: {% if guide_enabled %} true {% else %} false {% endif %},
    enable_upload_folder: {% if enable_upload_folder %} true {% else %} false {% endif %},
    enable_resumable_fileupload: {% if enable_resumable_fileupload %} true {% else %} false {% endif %},
    enable_thumbnail: {% if enable_thumbnail %} true {% else %} false {% endif %},
    thumbnail_default_size: {{ thumbnail_default_size }},
    thumbnail_size_for_grid: {{ thumbnail_size_for_grid }},
    language_code: "{{ LANGUAGE_CODE }}",
    enable_encrypted_library: {% if enable_encrypted_library %} true {% else %} false {% endif %},
    enable_repo_history_setting: {% if enable_repo_history_setting %} true {% else %} false {% endif %},
    max_upload_file_size: {% if max_upload_file_size %} {{ max_upload_file_size }} {% else %} '' {% endif %},
    folder_perm_enabled: {% if folder_perm_enabled %} true {% else %} false {% endif %},
    is_pro: {% if is_pro %} true {% else %} false {% endif %},
    file_audit_enabled: {% if file_audit_enabled %} true {% else %} false {% endif %},
    cur_note: {% if request.cur_note %} {'id': '{{ request.cur_note.id }}'} {% else %} null {% endif %}
};
app.ui = {
    currentDropdown: null,
    currentPopover: null,
    currentHighlightedItem: null,
    freezeItemHightlight: false
};
</script>
{% if debug %}
<script data-main="{% static "scripts/main.js" %}" src="{% static "scripts/lib/require.js" %}"></script>
{% else %}
<script data-main="{% static "scripts/dist/main.js" %}" src="{% static "scripts/lib/require.js" %}"></script>
{% endif %}
{% endblock %}