{% extends base_template %}

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

{% block info_bar_message %}
{% if request.user.is_authenticated %}
  {{ block.super }}
{% else %}
  <div id="sharelink-infobar">
    <p>{% blocktrans %}This page will be invalid shortly, you can join <a href="http://seafile.com/" target="_blank">Seafile</a> to experience more.{% endblocktrans %}</p>
  </div>
{% endif %}
{% endblock %}

{% block main_panel %}
    <div class="w100 ovhd">
        <h2 class="fleft">{{repo.props.name}}</h2>
        <div class="fright">
            {% if path == '/' %}
                {% if user_perm %}
                  <button id="repo-download-btn" class="repo-top-op-btn">{% trans "Download"%}</button>
                {% endif %}
                {% if is_repo_owner %}
                  <button id="repo-setting-btn" class="repo-top-op-btn">{% trans "Settings" %}</button>
                {% endif %}
                {% if user_perm == 'rw' %}
                  <button id="recycle-btn" data="{% url 'repo_recycle_view' repo.id %}" class="repo-top-op-btn">{% trans "Trash"%}</button>
                {% endif %}
            {% else %}
                <input id="shared-link" class="hide" type="text" readonly="readonly" value="{{ dir_shared_link }}" />
                <button data="{% url 'get_shared_link' %}?repo_id={{ repo.id }}&p={{ path|urlencode }}&type=d" id="get-shared-link" class="hide">{% trans "Share link"%}</button>
                <button id="send-shared-link" class="hide">{% trans "Send"%}</button>
                <button data="{% url 'remove_shared_link' %}?t={{ fileshare.token }}" id="rm-shared-link" class="hide">{% trans "Delete"%}</button>
            {% endif %}
        </div>
    </div>
    {% if user_perm == 'r' %}
    <p>{% trans "This library is read-only, you can not modify the contents of this library."%}</p>
    {% endif %}

    {% if user_perm and path == '/' %}
    <div id="repo-basic-info">
      <p class="desc">{{repo.props.desc}}</p>
      <p class="size">{% trans 'Size: ' %}{{ repo_size|filesizeformat }}</p>
    </div>

    <div id="repo-latest-commit">
        <p class="commit-msg ovhd">
        <span class="fleft">
            {{ current_commit.props.desc|translate_commit_desc }}
            <a class="lsch" href="#" data-url="{% url 'repo_history_changes' repo.id %}?commit_id={{ current_commit.id }}" data-time="{{ current_commit.props.ctime|tsstr_sec }}">{% trans "Details"%}</a>
        </span>
        {% if user_perm  %}
        <a href="{% url 'seahub.views.repo_history' repo.id %}" class="more fright">{% trans "History"%}</a>
        {% endif %}
        </p>
        <p class="meta-info">
        <span class="author">
            {% if current_commit.props.creator_name %}
                {% if not current_commit.second_parent_id %}
                {% avatar current_commit.props.creator_name 20 %}
                <a class="name" href="{% url 'profile.views.user_profile' current_commit.props.creator_name %}">{{ current_commit.creator_name|email2nickname }}</a>
                {% else %}
                <span class="name">{% trans "Generated by system"%}</span>
                {% endif %}
            {% else %}
                {% trans "Unknown"%}
            {% endif %}
        </span>
        <span class="time">{{ current_commit.props.ctime|translate_seahub_time }}</span>
        </p>
    </div>
    {% endif %}

    <div class="repo-file-list-outer-container">
        <div class="repo-file-list-inner-container">
            {% if not user_perm %}
            <div class="repo-file-list-not-show">
                <p class="access-notice">{% trans "You can't access this library."%}</p>
            </div>
            {% else %}
            <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 }}repo/{{ repo.id }}/?p={{ link|urlencode }}">{{ name }}</a> /                
                {% else %}
                {{ name }}
                {% endif %}
                {% endfor %}
                </p>
                <div class="repo-op fright">
                  {% if user_perm and path != '/' %}
                    <button data="{% url 'repo_download_dir' repo.id %}?p={{ path|urlencode }}" id="download-dir" class="op-btn">{% trans "ZIP"%}</button>
                  {% endif %}
                  {% if user_perm == 'rw' %}
                    <button data="{{ SITE_ROOT }}repo/upload_file/{{repo.id}}/?p={{ path|urlencode }}" id="upload-file" class="op-btn">{% trans "Upload"%}</button>
                    <button id="add-new-dir" class="op-btn">{% trans "New Directory"%}</button>
                    <button id="add-new-file" class="op-btn">{% trans "New File"%}</button>
                  {% endif %}
                </div>
            </div>
            <table class="repo-file-list">
                <tr>
                    <th width="3%"></th>
                    <th width="5%"></th>
                    <th width="43%" class="dirent-name"> {% trans "Name"%} <span id="name-up" class="tri-bg tri-up-order-bg"></span> <span id="name-down" class="tri-bg tri-down-order-bg"></span></th>
                    <th width="10%">{% trans "Size"%}</th>
                    <th width="12%">{% trans "Last Update" %} <span id="time-up" class="tri-bg tri-up-order-bg"></span> <span id="time-down" class="tri-bg tri-down-order-bg"></span></th>
                    <th width="27%" class="dirent-op">{% trans "Operations"%}</th>
                </tr>

                {% for dirent in dir_list %}
                <tr class="dir-item" data-name="{{dirent.obj_name}}" data-time="{% if dirent.last_modified %}{{ dirent.last_modified }} {%else %}0{% endif %}">
                    <td></td>
                    <td class="icon-container"><img src="{{ MEDIA_URL }}img/folder-icon-24.png" alt="{% trans "Directory icon"%}" /></td>
                    <td>
                        <a href="{{ SITE_ROOT }}repo/{{ repo.id }}/?p={{ path|urlencode }}{{ dirent.obj_name|urlencode }}">{{ dirent.obj_name }}</a>
                    </td>

                    <td></td>
                    <td>
                        {% if dirent.last_modified %}
                        {{ dirent.last_modified|translate_seahub_time }}
                        {% else %}
                        {% trans "Fetch failed" %}
                        {% endif %}
                    </td>
                    <td>
                        {% if user_perm %}
                        <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 }}">{% trans 'Download' %}</a>
                                  <a class="op file-share" href="#" data-name="{{ dirent.obj_name }}" data-link="{{ dirent.sharelink }}" data-token="{{ dirent.sharetoken }}" data-type="d">{% trans "Share" %}</a>
                            </div>
                            {% if user_perm == 'rw' %}
                            <img src="{{ MEDIA_URL }}img/dropdown-arrow.png" title="{% trans 'More operations'%}" alt="{% trans 'More operations'%}" class="more-op-icon" data="no-popup" />
                            <ul class="hidden-op hide">
                                <li><a class="op" href="{{ SITE_ROOT }}repo/{{ repo.props.id }}/{{ dirent.props.obj_id }}/?p={{ path|urlencode }}&file_name={{ dirent.props.obj_name|urlencode }}&op=del">{% trans "Delete"%}</a></li>
                                <li><a class="op dir-rename" href="#" data="{{ dirent.obj_name }}">{% trans "Rename"%}</a></li>
                                <li><a class="op dir-mv" href="#" data="{{ dirent.obj_name }}">{% trans "Move"%}</a></li>
                                <li><a class="op dir-cp" href="#" data="{{ dirent.obj_name }}">{% trans "Copy"%}</a></li>
                            </ul>
                            {% endif %} 
                        </div>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}

                {% for dirent in file_list %}
                <tr class="file-item" data-name="{{dirent.obj_name}}" data-time="{% if dirent.last_modified %}{{ dirent.last_modified }} {%else %}0{% endif %}">
                    <td class="icon-container">
                        {% if dirent.starred %}
                        <img src="{{ MEDIA_URL }}img/gray-star-icon.png" alt="{% trans 'starred' %}" title="{% trans 'starred' %}" class="file-star" data-path="{{ path }}{{dirent.obj_name}}" data-status="starred" />
                        {% else %}
                        <img src="{{ MEDIA_URL }}img/gray-unstar-icon.png" alt="{% trans 'unstarred' %}" title="{% trans 'unstarred' %}" class="file-star" data-path="{{ path }}{{dirent.obj_name}}" data-status="unstarred" />
                        {% endif %}
                    </td>
                    <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 }}repo/{{ repo.props.id }}/files/?p={{ path|urlencode }}{{ dirent.obj_name|urlencode }}">{{ dirent.props.obj_name }}</a>
                    </td>

                    <td>{{ dirent.file_size|filesizeformat }}</td>
                    <td>
                        {% if dirent.last_modified %}
                        {{ dirent.last_modified|translate_seahub_time }}
                        {% else %}
                        {% trans "Fetch failed" %}
                        {% endif %}
                    </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">{% trans "Download"%}</a>
                                {% if user_perm == 'rw' %}
                                  <a class="op update-file" data-target="{{ path }}{{dirent.obj_name}}" href="#">{% trans "Update"%}</a>
                                    <a class="op file-share" href="#" data-name="{{ dirent.obj_name }}" data-link="{{ dirent.sharelink }}" data-token="{{ dirent.sharetoken }}">{% trans "Share" %}</a>
                                {% endif %}
                            </div>
                            {% if user_perm == 'rw' %}
                            <img src="{{ MEDIA_URL }}img/dropdown-arrow.png" title="{% trans "More Operations"%}" alt="{% trans "More Operations"%}" class="more-op-icon" data="no-popup" />
                            <ul class="hidden-op hide">
                                <li><a class="op" href="{{ SITE_ROOT }}repo/{{ repo.props.id }}/{{ dirent.props.obj_id }}/?p={{ path|urlencode }}&file_name={{ dirent.props.obj_name|urlencode }}&op=del">{% trans "Delete" %}</a></li>
                                <li><a class="op file-rename" href="#" data="{{ dirent.obj_name }}">{% trans "Rename" %}</a></li>
                                <li><a class="op file-mv" href="#" data="{{ dirent.obj_name }}">{% trans "Move" %}</a></li>
                                <li><a class="op file-cp" href="#" data="{{ dirent.obj_name }}">{% trans "Copy" %}</a></li>
                                <li><a class="op" href="{% url 'file_revisions' repo.props.id %}?p={{ path }}{{ dirent.obj_name }}">{% trans "History" %}</a></li>
                            </ul>
                            {% endif %}
                        </div>
                    </td>
                </tr>
                {% endfor %}
            </table>
            {% endif %}
        </div>
    </div>

    {% if user_perm %}
    <div id="upload-file-dialog" class="hide">
        <h3>{% trans "Upload Files" %}</h3>
        {% if no_quota %}
        <p class="error">{% trans "The owner of this library has ran out of space." %}</p>
        {% else %}
        <form id="upload-file-form" enctype="multipart/form-data" method="post" action="{{ upload_url }}">
            <input type="hidden" name="parent_dir" id="parent_dir" value="{{ parent_dir }}" />
            <div class="files-add">
                <span class="op add">{% trans "Add files" %}</span>
                <span id="upload-add-tip">({% trans "smaller than" %} {{ max_upload_file_size|filesizeformat }})</span>
                <input type="file" name="file" id="file-upload-input" />
            </div>
            <div id="upload-file-list"></div>
            <p class="error">{{ error_msg }}</p>
            <input type="submit" value="{% trans "Upload" %}" class="submit" />
        </form>
        <div id="upload-progress-con" class="upload-progress-con hide">
            <p>{% trans "Uploaded:" %} <span class="upload-progress-text">{% trans "Fetching ..." %}</span></p>
            <div class="upload-progress-bar"></div>
            <button class="upload-cancel">{% trans "Cancel" %}</button>
            <iframe class="hide"><!--for chrome--></iframe>
        </div>
        {% endif %}
    </div>

    <div id="update-file-dialog" class="hide">
        <h3>{% trans "Update File" %}</h3>
        {% if no_quota %}
        <p class="error">{% trans "The owner of this library has ran out of space." %}</p>
        {% else %}      
        <form id="update-file-form" enctype="multipart/form-data" method="post" action="{{ update_url }}?head={{ head_id }}">
            <input type="hidden" name="target_file" />
            <input type="file" name="file" id="file-update-input" />
            <p>({% trans "Smaller than" %} {{ max_upload_file_size|filesizeformat }})</p>          
            <p class="error">{{ error_msg }}</p>
            <input type="submit" value="{% trans "Update" %}" class="submit" />
        </form>

        <div id="update-progress-con" class="upload-progress-con hide">
            <p>{% trans "Uploaded:" %} <span class="upload-progress-text">{% trans "Fetching..." %}</span></p>
            <div class="upload-progress-bar"></div>
            <button class="upload-cancel">{% trans "Cancel" %}</button>
            <iframe class="hide"><!--for chrome--></iframe>
        </div>
        {% endif %}
    </div>

    {% if is_repo_owner %}
    <form id="repo-setting-form" action="" method="post" class="simple-input-popup hide">{% csrf_token %}
        <h3>{% trans "Library Settings" %}</h3>
        <label>{% trans "Name" %}</label><br />
        <input type="text" name="repo_name" value="{{ repo.name }}" class="long-input" /><br />
        <label>{% trans "Description" %}</label></br />
        <input type="text" name="repo_desc" value="{{ repo.desc }}" class="long-input" /><br />
        <label>{% trans "History" %}</label><br />
        <input type="hidden" name="repo_id" value="{{ repo.id }}" />
        <input type="radio" name="history" value="full_history" {% if history_limit < 0 %}checked="checked"{% endif %} /> {% trans "Keep full history" %}<br />
        <input type="radio" name="history" value="no_history" {% if history_limit == 0 %}checked="checked"{% endif %} /> {% trans "Don't keep history" %}<br />
        <input type="radio" name="history" value="partial_history" {% if history_limit > 0 %}checked="checked"{% endif %} /> {% trans "Only keep a period of history:" %}
        <input type="text" name="days" size="4" {% if history_limit <= 0 %} disabled="disabled" class="input-disabled" {% else %} value="{{history_limit}}" {% endif %} /> {% trans "days" %}<br />
        <p class="error hide"></p>
        <input type="submit" value="{% trans "Submit" %}" class="submit" />
        <button class="simplemodal-close">{% trans "Cancel" %}</button>
    </form>
    {% endif %}

    <form id="add-new-dir-form" action="" method="post" class="simple-input-popup hide">{% csrf_token %}
        <h3>{% trans "New Directory" %}</h3>
        <label>{% trans "Directory Name" %}</label><br /><!-- <br/> for ie 7 -->
        <input type="hidden" name="repo_id" value="{{ repo.id }}" />
        <input type="hidden" name="parent_dir" value="{{ path }}" />
        <input type="text" name="new_dir_name" value="" class="long-input" maxlength="{{max_file_name}}"/><br />
        <p class="error hide"></p>
        <input type="submit" value="{% trans "Submit" %}" class="submit" />
        <button class="simplemodal-close">{% trans "Cancel" %}</button>
    </form>

    <form id="add-new-file-form" action="" method="post" class="simple-input-popup hide">{% csrf_token %}
        <h3>{% trans "New File" %}</h3>
        <div id="featured-filetype">
            <label>{% trans "Featured File Type" %}</label><br />
            <button type="button" data="seaf" title="{% trans "Click to choose" %}">seaf</button> <span>{% trans "online Rich Text format (experimental)." %}</span>
            {% if LANGUAGE_CODE == 'zh-cn' %}
            <a href="http://www.seafile.com/help/seaf/" target="_blank">{% trans 'Details' %}</a><br /> 
            {% else %}
            <a href="http://www.seafile.com/en/help/seaf/" target="_blank">{% trans 'Details' %}</a><br /> 
            {% endif %}
            <button type="button" data="md" title="{% trans "Click to choose" %}">markdown</button> <span>{% trans "simple markup format." %}</span>
            {% if LANGUAGE_CODE == 'zh-cn' %}
            <a href="http://www.seafile.com/help/markdown/" target="_blank">{% trans 'Details' %}</a>            
            {% else %}
            <a href="http://www.seafile.com/en/help/markdown/" target="_blank">{% trans 'Details' %}</a>            
            {% endif %}
        </div>
        <label>{% trans "File Name" %}</label><br/>
        <input type="hidden" name="repo_id" value="{{ repo.id }}" />
        <input type="hidden" name="parent_dir" value="{{ path }}" />
        <input type="text" name="new_file_name" value="" class="long-input" maxlength="{{max_file_name}}"/><br />
        <p class="error hide"></p>
        <input type="submit" value="{% trans "Submit"%}" class="submit" />
        <button class="simplemodal-close">{% trans "Cancel"%}</button>
    </form>

    <form id="mv-form" action="{{ SITE_ROOT }}file/move/" method="post" class="hide">
        <h3 id="mv-hd"></h3>
        <h4 id="mv-detail"></h4>
        <div id="mv-dir-list">
            <h5><span class="tri-bg tri-down-bg"></span>{% trans "Current Library"%}</h5>
            <div id="current-repo-dirs"></div>
            <h5><span class="tri-bg tri-right-bg"></span>{% trans "Other Libraries"%}</h5>
            <div id="other-repos-dirs" class="hide"></div>
        </div>
        <input type="hidden" name="operation" id="mv-type" value="" />
        <input type="hidden" name="src_repo" value="{{ repo.id }}" />
        <input type="hidden" name="src_path" value="{{ path }}" />
        <input type="hidden" name="obj_name" value="" />
        <input type="hidden" name="obj_type" value="" />
        <input type="hidden" name="dst_repo" value="" />
        <input type="hidden" name="dst_path" value="" />
        <p class="error hide">{% trans "Please click and choose a directory."%}</p>
        <input type="submit" value="{% trans "Submit"%}" class="submit" />
        <button class="simplemodal-close">{% trans "Cancel"%}</button>
    </form>

    <form id="rename-form" action="{{ SITE_ROOT}}repo/file_rename/" method="post" class="simple-input-popup hide">
        <h3>{% trans 'Rename <span id="rename-type"></span>' %}</h3>
        <p>{% trans 'Rename <span id="rename-obj" class="op-target"></span> as: ' %}</p>
        <input type="hidden" name="repo_id" value="{{ repo.id }}" />
        <input type="hidden" name="parent_dir" value="{{ path }}" />
        <input type="hidden" name="oldname" value="" />
        <input type="text" name="newname" value="" class="long-input" maxlength="{{max_file_name}}"/><br />
        <p class="error hide"></p>
        <input type="submit" value="{% trans "Submit"%}" class="submit" />
        <button class="simplemodal-close">{% trans "Cancel"%}</button>
    </form>

    <div id="file-share" class="hide">
        <h3>{% trans 'Share' %} <span class="op-target"></span></h3>
        <p>{% trans 'Link: ' %}<input type="text" readonly="readonly" id="shared-link-text" /></p>
        <button id="send-link">{% trans 'Send' %}</button>
        <form id="link-send-form" action="" method="post" class="hide">
            <label>{% trans "Send to:"%}</label><br />
            <textarea id="link-send-input" name="email" placeholder="{% trans "Emails, Seperated by ','"%}"></textarea><br />
            <input type="hidden" name="file_shared_link" value="{{ dir_shared_link }}" />
            <input type="submit" value="{% trans "Submit"%}" class="submit" />
            <p class="error hide"></p>
            <p id="sending" class="hide">{% trans "Sending..."%}</p>
        </form>
    </div>
{% endif %}

    {% with attach_type='dir' %}
    {% include "snippets/group_recommend_form.html" %}
    {% endwith %}
{% endblock %}

{% block extra_script %}
<script type="text/javascript" src="{{ MEDIA_URL }}jstree_pre1.0_stable/jquery.jstree.js"></script>
<script type="text/javascript" src="{{ MEDIA_URL }}js/jquery.MultiFile.pack.js"></script>
<script type="text/javascript">
//download, trash
$('#repo-download-btn').click(function() {
    window.open('{{ SITE_ROOT }}seafile_access_check/?repo_id={{repo.props.id}}');
});

$('#recycle-btn').click(function() {
    location.href = $(this).attr('data');
});

{% if is_repo_owner %}
$('#repo-setting-btn').click(function () {
    $('#repo-setting-form').modal({appendTo:'#main'});
});

$('#repo-setting-form input[name="history"]').change(function() {
    var value = $(this).attr('value');
    if (value == 'full_history' || value == 'no_history') {
        $('#repo-setting-form input[name="days"]').attr('disabled', true).addClass('input-disabled');
    } else {
        $('#repo-setting-form input[name="days"]').attr('disabled', false).removeClass('input-disabled');
    }
});

$('#repo-setting-form').submit(function() {
    var days;
    var value = $(this).find('input[name="history"]:checked').val();

    if (value == 'partial_history') {
        days = $(this).find('input[name="days"]').val();
    } else if (value == 'full_history') {
        days = -1;
    } else {
        days = 0;
    }

    var submit_btn = $(this).children('input[type="submit"]');  
    disable(submit_btn);
    $.ajax({
        url: '{% url 'views.repo_save_settings' %}',
        type: 'POST',
        dataType: 'json',
        beforeSend: prepareCSRFToken,
        data: {
            'repo_id': $('#repo-setting-form input[name="repo_id"]').val(),
            'repo_name': $('#repo-setting-form input[name="repo_name"]').val(),
            'repo_desc': $('#repo-setting-form input[name="repo_desc"]').val(),
            'days': days 
        },
        success: function(data) {
            if (data['success']) {
                location.reload(true);
            }
        },
        error: function(jqXHR, textStatus, errorThrown) {
            if (jqXHR.responseText) {
                apply_form_error('repo-setting-form', $.parseJSON(jqXHR.responseText).error);
            } else {
                apply_form_error('repo-setting-form', '{% trans "Failed. Please check the network." %}');
            }
            enable(submit_btn);
        }
    });
    return false;
});
{% endif %}

//upload, new-dir, new-file, download-dir
$('#download-dir').click(function() {
    location.href = $(this).attr('data');
});
$('#upload-file').click(function () {
    $('#upload-file-dialog').modal({focus:false});
    $('#file-upload-input').MultiFile({
        list: '#upload-file-list',
        STRING: {
            file: '<span title="{% trans "Click to remove" %}" onclick="$(this).parent().prev().click()">$file</span>',
            duplicate: '{% trans "This file has already been selected:\n$file!" %}'
        },
        afterFileAppend:function() {
            $('#upload-file-form .files-add input').css({'right':$('#upload-add-tip').width()});
        }
    });
    $('#simplemodal-container').css({'height':'auto', 'width':'auto'});
    $('#upload-file-form .files-add').css({'width':$('#upload-file-form .files-add').width() + 1}); // '+ 1' for ie
    $('#file-upload-input').css({'right':$('#upload-add-tip').width()});
});
$('#add-new-dir').click(function () {
    $('#add-new-dir-form').modal({appendTo:'#main'});
});
  
$('#add-new-file').click(function () {
    $('#add-new-file-form').modal({appendTo:'#main', focus:false, containerCss:{'padding':'20px 25px'}});
});

$('#upload-file, #add-new-dir, #add-new-file, #repo-download-btn, #repo-setting-btn, #recycle-btn, #download-dir').hover(
    function() {
        $(this).css({'background-color': '#fff', 'cursor': 'pointer'});
    },
    function() {
        $(this).css('background-color', '#f5f5f5');
    }
);
$('#featured-filetype button').click(function() {
   var file_name = $('#add-new-file-form input[name="new_file_name"]');
   file_name.val('.' + $(this).attr('data')); 
   setCaretPos(file_name[0], 0); 
});

var no_file_op_popup = true;
$("tr:gt(0)").unbind().hover( // remove previously binded hover handler at first
    function() {
        if (no_file_op_popup) {
            $(this).addClass('hl').find('.repo-file-op').removeClass('vh');
        }
    },
    function() {
        if (no_file_op_popup) {
            $(this).removeClass('hl').find('.repo-file-op').addClass('vh');
        }
    }
);

var current_repo = [],
    other_repos = [];
{% for a_repo in accessible_repos %}
    {% if a_repo.props.id == repo.props.id %}
        {% if a_repo.props.has_subdir %} 
            current_repo.push({
                'data': '{{ a_repo.props.name }}',
                'attr': {'repo_id': '{{ a_repo.props.id }}'},
                'state': 'closed'
            });  
        {% else %}
            current_repo.push({
                'data': '{{ a_repo.props.name }}',
                'attr': {'repo_id': '{{ a_repo.props.id }}'}
            });
        {% endif %}
    {% else %}
        {% if a_repo.props.has_subdir %} 
            other_repos.push({
                'data': '{{ a_repo.props.name }}',
                'attr': {'repo_id': '{{ a_repo.props.id }}'},
                'state': 'closed'
            });  
        {% else %}
            other_repos.push({
                'data': '{{ a_repo.props.name }}',
                'attr': {'repo_id': '{{ a_repo.props.id }}'}
            });
        {% endif %}
    {% endif %}
{% endfor %}

function opOnDirent() {

var popup_tr = ''; // the tr which the shown popup belongs to
$('#main-panel').removeClass('ovhd');
$('.more-op-icon').click(function() {
    var hidden_op = $(this).next();
    if ($(this).attr('data')) { // no popup
        if ($(this).position().left + $(this).width() + hidden_op.width() < $(this).parent().width()) {
            hidden_op.css({'left': $(this).position().left + $(this).width() + 5});
            if ($(this).offset().top + hidden_op.height() <= $('#main').offset().top + $('#main').height()) {
                hidden_op.css('top', 6);
            } else {
                hidden_op.css('bottom', 2);
            }
        } else {
            hidden_op.css({'right':0});
            if ($(this).offset().top + hidden_op.height() <= $('#main').offset().top + $('#main').height()) {
                hidden_op.css('top', $(this).position().top + $(this).height() + 3);
            } else {
                hidden_op.css('bottom', $(this).position().top + $(this).height() + 3);
            }
        }
        hidden_op.removeClass('hide');
        $(this).attr('data','');
        no_file_op_popup = false;
        $('.dirent-op').data('popup_tr', $(this).parents('tr'));
    } else {
        hidden_op.addClass('hide');
        $(this).attr('data','no-popup');
        no_file_op_popup = true;
        $('.dirent-op').data('popup_tr', '');
    }
});
$(document).click(function(e) {
    var target =  e.target || event.srcElement;
    var popup_tr = $('.dirent-op').data('popup_tr');

    if (!no_file_op_popup &&
        !$('.more-op-icon, .hidden-op').is(target) &&
        !$('.hidden-op').find('*').is(target)) {
        $('.hidden-op').addClass('hide');
        $('.more-op-icon').attr('data', 'no-popup');
        no_file_op_popup = true;
        if (!popup_tr.find('*').is(target)) {
            popup_tr.removeClass('hl').find('.repo-file-op').addClass('vh'); // clicked place: the first tr, place out of the table
            $('.dirent-op').data('popup_tr', '');
            $('tr:gt(0)').each(function() { // when other tr is clicked
                if ($(this).find('*').is(target)) {
                    $(this).addClass('hl').find('.repo-file-op').removeClass('vh');
                }
            });
        }
    }
});

$('.hidden-op li').hover(
    function() {
        $(this).css('background', '#eee');
    },
    function() {
        $(this).css('background', '#fff');
    }
);

$('.file-rename, .dir-rename').click(function () {
    var type = $(this).hasClass('file-rename') ? '{% trans "File" %}' : '{% trans "Directory" %}';
    var name = $(this).attr('data');
    $('#rename-type').html(type);
    $('#rename-obj').html(name);
    $('#rename-form input[name*="name"]').val(name);
    $('#rename-form').modal();
    $('#simplemodal-container').css({'width':'auto', 'height':'auto'});
    $(window).resize();// make the popup in the center of the window
    return false;
});

$('.file-cp, .file-mv, .dir-cp, .dir-mv').click(function () {
    var obj_name = $(this).attr('data'),
        mv_type = '',
        file_type = '';
    if ($(this).hasClass('file-cp') || $(this).hasClass('dir-cp')) {
        $('#mv-type').val('cp');
        mv_type = '{% trans "Copy " %}';
    } else {
        $('#mv-type').val('mv');
        mv_type = '{% trans "Move " %}';
    }

    if ($(this).hasClass('file-cp') || $(this).hasClass('file-mv')) {
        file_type = '{% trans "File" %}';
        $('input[name="obj_type"]').val('file');
    } else {
        file_type = '{% trans "Directory" %}';
        $('input[name="obj_type"]').val('dir');
    }

    $('input[name="obj_name"]').val(obj_name);
    $('#mv-hd').html(mv_type + file_type);
    $('#mv-detail').html(mv_type + ' <span class="op-target">' + obj_name + '</span> {% trans "to:" %}');
    $('#mv-form').modal({appendTo:'#main', autoResize:true, focus:false});
    renderDirTree($('#current-repo-dirs'), current_repo);
    return false;
});

$('a.update-file').click(function() {
    var target_file = $(this).data("target");
    $('#update-file-form input[name="target_file"]').val(target_file);
    $('#update-file-dialog').modal({focus:false});
    $('#simplemodal-container').css({'width':'auto', 'height':'auto'});
    return false;
});

$('.file-star').click(function() {
    var it = $(this);
    var state = it.data('status');
    var path = it.data('path');
    $.ajax({
        url: '{{ SITE_ROOT }}repo/star_file/{{ repo.props.id }}/',
        type: 'POST',
        cache: false,
        contentType: 'application/json; charset=utf-8',
        beforeSend: prepareCSRFToken,
        dataType: 'json',
        data: {
            path: path,
            state: state,
            org_id: {% if org %} {{ org.org_id }} {% else %} -1 {% endif %}
        },
        success:function(data) {
            if (data['success']) {
                if (state == 'starred') {
                    it.attr('src', '{{ MEDIA_URL }}img/gray-unstar-icon.png').attr('alt','{% trans 'unstarred' %}').attr('title','{% trans 'unstarred' %}').data('status','unstarred');
                } else {
                    it.attr('src', '{{ MEDIA_URL }}img/gray-star-icon.png').attr('alt','{% trans 'starred' %}').attr('title','{% trans 'starred' %}').data('status','starred');
                }
            }
        },
        error:function(xhr, textStatus, errorThrown) {
            if (xhr.responseText) {
                feedback(jQuery.parseJSON(xhr.responseText).error, 'error');
            } else {
                feedback('{% trans "Failed. Please check the network." %}', 'error');
            }
        }
   });
});

//file share
$('.file-share').click(function() {
    var filename = $(this).data('name');
    function showPopup(link) {
        $('#file-share .op-target').html(trimFilename(filename, 30));
        $('#shared-link-text, #link-send-form input[name="file_shared_link"]').val(link);
        $('#main').append('<p id="linkwidth" class="hide">' + link + '</p>');
        $('#shared-link-text').css({'width':$('#linkwidth').width() + 2});
        $('#file-share').modal({'focus':false}); // in ff: if 'focus' is true, 'shared-link-text' gets the focus
        $('#linkwidth').remove();
        $('#simplemodal-container').css({'height':'auto'});
    }
    if ($(this).data('link')) {
        showPopup($(this).data('link'));
    } else {
        var aj_url = '{% url 'get_shared_link' %}?repo_id={{ repo.id }}&p={{ path|urlencode }}' + e(filename);
        if ($(this).data('type') == 'd') {
            aj_url += '&type=d';
        }
        $.ajax({
            url: aj_url,
            dataType: 'json',
            cache: false,
            contentType: 'application/json; charset=utf-8',
            success: function(data) {
                showPopup(data['shared_link']);
            },
            error: function(xhr, textStatus, errorThrown) {
                if (xhr.responseText) {
                    feedback(jQuery.parseJSON(xhr.responseText).error, 'error');
                } else {
                    feedback('{% trans "Failed. Please check the network." %}', 'error');
                }   
            }
        });
    }
    return false;
});
} //function 'opOnDirent' ends here
opOnDirent();

//sort
var dir_list = [], file_list = [];
$('.dir-item').each(function() {
    dir_list.push({'name':$(this).data('name'), 'time':$(this).data('time'), 'item_html':$(this).html()});
});
$('.file-item').each(function() {
    file_list.push({'name':$(this).data('name'), 'time':$(this).data('time'), 'item_html':$(this).html()});
});
function afterSort() {
    $('.dir-item').each(function(index, item) {
        $(this).data('name', dir_list[index].name).html(dir_list[index].item_html);
    });
    $('.file-item').each(function(index, item) {
        $(this).data('name', file_list[index].name).html(file_list[index].item_html);
    });
    opOnDirent();
}
$('#name-down').click(function() {
    function byNameDown(a,b) {
        return a.name.toLowerCase() < b.name.toLowerCase() ? 1 : -1;
    }
    dir_list.sort(byNameDown);
    file_list.sort(byNameDown);
    afterSort();
    $(this).hide();
    $('#name-up').css({'display':'inline-block'});
});
$('#name-up').click(function() {
    function byNameUp(a,b) {
        return a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1;
    }
    dir_list.sort(byNameUp);
    file_list.sort(byNameUp);
    afterSort();
    $(this).hide();
    $('#name-down').removeAttr('style');
});
$('#time-up').click(function() {
    function byTimeUp(a, b) {
        return a.time < b.time ? -1 : 1;
    }
    dir_list.sort(byTimeUp);
    file_list.sort(byTimeUp);
    afterSort();
    $(this).hide();
    $('#time-down').removeAttr('style');
});
$('#time-down').click(function() {
    function byTimeDown(a, b) {
        return a.time < b.time ? 1 : -1;
    }
    dir_list.sort(byTimeDown);
    file_list.sort(byTimeDown);
    afterSort();
    $(this).hide();
    $('#time-up').css({'display':'inline-block'});
});

function trimFilename(name, n) {
    var len = name.length;
    var ext = '';
    var str = '';
    if (len > n) {
        if (name.lastIndexOf('.') != -1) { // with extension 
            ext = name.split('.').reverse()[0];
            str = name.substr(0, n - ext.length - 3) + '...' + name.substr(name.lastIndexOf('.') - 2);
        } else {
            str = name.substr(0, n) + '...';
        }
    } else {
        str = name;
    }
    return str;
}

$('#add-new-file-form, #add-new-dir-form, #rename-form').submit(function() {
    var form = $(this);
    var form_id = form.attr('id');
    var post_url = '';
    var post_data = {
        'repo_id': form.find('input[name="repo_id"]').val(),
        'parent_dir': form.find('input[name="parent_dir"]').val()
    };

    if (form_id == 'add-new-file-form') {
        var new_file =$.trim(form.find('input[name="new_file_name"]').val());
        if (!new_file) {
            apply_form_error(form_id, "{% trans "It can't be blank." %}");
            return false;
        }
        if (new_file.lastIndexOf('.') != -1 && new_file.substr(0, new_file.lastIndexOf('.')).length == 0) { // if it has an extension
            apply_form_error(form_id, "{% trans "Only an extension there, please input a name." %}");
            return false;
        }
        post_url = '{% url 'views.repo_new_file' %}';
        post_data['new_file_name'] = new_file;
    } else if (form_id == 'add-new-dir-form') {
        var new_dir = $.trim(form.find('input[name="new_dir_name"]').val());
        if (!new_dir) {
            apply_form_error(form_id, "{% trans "It can't be blank." %}");
            return false;
        }
        post_url = '{% url 'views.repo_new_dir' %}';
        post_data['new_dir_name'] = new_dir;
    } else {
        var new_name = $.trim(form.find('input[name="newname"]').val());
        if (!new_name) {
            apply_form_error(form_id, "{% trans "It can't be blank." %}");
            return false;
        }
        post_url = '{% url 'views.repo_rename_file' %}';
        post_data['oldname'] = form.find('input[name="oldname"]').val();
        post_data['newname'] = new_name
    }

    var submit_btn = form.children('input[type="submit"]');  
    disable(submit_btn);
    $.ajax({
        url: post_url,
        type: 'POST',
        dataType: 'json',
        beforeSend: prepareCSRFToken,
        data: post_data,
        success: function(data) {
            if (data['success']) {
                location.reload(true);
            }
        },
        error: function(xhr, textStatus, errorThrown) {
            var err;
            if (xhr.responseText) {
                err = $.parseJSON(xhr.responseText).error;
            } else {
                err = '{% trans "Failed. Please check the network." %}';
            }
            apply_form_error(form_id, err);
            enable(submit_btn);
        }
    });
    return false;
});

$('#mv-form .submit').click(function() {
    if (!$.trim($(this).prev().prev().val())) {//if the input is empty
        $(this).prev().removeClass('hide');//show error msg
        $('#simplemodal-container').css('height', $(this).parent().height());
        return false;
    }
});

function renderDirTree(container, repo_data) {
    container
        .delegate('.jstree-closed', 'dblclick', function(e) {
            container.jstree('open_node', $(this));
            $(this).find('a').removeClass('jstree-clicked');
        })
        .bind('before.jstree', function(e, data) {
            if (data.func === 'select_node') { // ensure only one selected dir display in the popup
                $('#mv-form .jstree-clicked').removeClass('jstree-clicked');
            }
        })
        .bind('select_node.jstree', function(e, data) {
            var repo_id = data.rslt.obj.attr('repo_id') || data.inst._get_parent(data.rslt.obj).attr('repo_id');
            $('input[name="dst_repo"]').attr('value', repo_id);
            var path = data.inst.get_path(data.rslt.obj);
            var mv_dst_path = '';
            if (path.length == 1) {
                mv_dst_path = '/';
            } else {
                path.shift();
                mv_dst_path = '/' + path.join('/') + '/';
            }
            $('input[name="dst_path"]').attr('value', mv_dst_path);
        })
        .jstree({
            'json_data': {
                'data': repo_data,
                'ajax': {
                    'url': function(data) {
                        var path = this.get_path(data);
                        var repo_id = data.attr('repo_id');
                        if (path.length == 1) {
                            path = '/';
                        } else {
                            path.shift();
                            path = '/' + path.join('/') + '/';
                        }
                        return '{{ SITE_ROOT }}file/move/get_subdir/?repo_id=' + e(repo_id) + '&path=' + e(path);
                    }
                }
            },
            'core': {
                'animation': 100
            },
            'plugins': ['themes', 'json_data', 'ui']
        });
}

$('#mv-dir-list h5').click(function() {
    var span = $(this).children('.tri-bg'),
        next = $(this).next();
    if (span.hasClass('tri-right-bg')) {
        span.attr('class','tri-bg tri-down-bg');
        if (next.attr('id') == 'current-repo-dirs') {
            renderDirTree(next, current_repo);
        } else {
            renderDirTree(next, other_repos);
        }
        next.removeClass('hide');
    } else {
        span.attr('class','tri-bg tri-right-bg');
        next.addClass('hide');
    }
});
{% if path == '/' %}
{% include "snippets/list_commit_detail.html" %}
{% endif %}
{% include "snippets/shared_link_js.html" %}
{% include "snippets/bottom_bar.html" %}
</script>
{% include 'snippets/file_upload_progress_js.html' %}
{% endblock %}