{% extends base_template %}

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

{% block info_bar_message %}
{% if request.user.is_authenticated %}
  {{ block.super }}
{% else %}
  <div id="sharelink-infobar">
    <p>当前链接会在短期内失效，欢迎您 <a href="http://seafile.com/" target="_blank">加入Seafile </a>体验更多功能。</p>
  </div>
{% endif %}
{% endblock %}

{% block main_panel %}
    <div class="w100 ovhd">
        <h2 class="fleft">{{repo.props.name}}</h2>
        {% if user_perm == 'rw' %}
        <div class="fright">
            <button id="repo-download-btn">下载到本地</button>
            <button id="recycle-btn" data="{% url 'repo_recycle_view' repo.id %}">文件回收站</button>
        </div>
        {% endif %}
    </div>
    {% if user_perm == 'r' %}
    <p>这个资料库设置了只读共享，您只能在线浏览文件。</p>
    {% endif %}

    {% if user_perm %}
    <div id="repo-basic-info">
      <p class="desc">{{repo.props.desc}}</p>
      <p class="size">大小：{{ repo_size|filesizeformat }}</p>
    </div>
    {% endif %}

    {% if user_perm %}
    <div id="repo-latest-commit">
        <p class="commit-msg ovhd">
        <span class="fleft">
            {{ current_commit.props.desc|translate_commit_desc }}
            <a class="lsch" href="{{ SITE_ROOT }}repo/history/changes/{{ repo.id }}/?commit_id={{ current_commit.id }}" data="{{ current_commit.props.ctime|tsstr_sec }}">详情</a>
        </span>
        {% if user_perm == 'rw' %}
        <a href="{% url 'seahub.views.repo_history' repo.id %}" class="more fright">更多历史</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.props.creator_name|short_email }}</a>
		{% else %}
		    <span class="name">系统自动生成</span>
		{% endif %}
            {% else %}
            未知
            {% endif %}
        </span>
        <span class="time">{{ current_commit.props.ctime|translate_commit_time }}</span>
        </p>
        <div id="ls-ch" class="hide"></div><!--list modification details of a commit-->
    </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">无法在线查看该资料库。</p>
            </div>
            {% else %}
            <div class="repo-file-list-topbar ovhd">
                <p class="path fleft">
                当前路径：
                {% 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>
                {% if user_perm == 'rw' %}
                <div class="repo-op fright">
                    <button data="{{ SITE_ROOT }}repo/upload_file/{{repo.id}}/?p={{ path|urlencode }}" id="upload-file" class="op-btn">上传</button>
                    <button id="add-new-dir" class="op-btn">新建目录</button>
                    <button id="add-new-file" class="op-btn">新建文件</button>
                </div>
                {% endif %}
            </div>
            <!-- /.repo-file-list-topbar -->
            <table class="repo-file-list">
                <tr>
                    <th width="5%"></th>
                    <th width="60%">名字</th>
                    <th width="10%">大小</th>
                    <th width="30%">操作</th>
                </tr>

                {% for dirent in dir_list %}
                <tr>
                    <td class="icon-container"><img src="{{ MEDIA_URL }}img/folder-icon-24.png" alt="目录" /></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 user_perm == 'rw' %}
                        <div class="repo-file-op vh">
                            <img src="{{ MEDIA_URL }}img/dropdown-arrow.png" title="更多操作" alt="更多操作" 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">删除</a></li>
                                <li><a class="op dir-rename" href="#" data="{{ dirent.obj_name }}">重命名</a></li>
                                <li><a class="op dir-mv" href="#" data="{{ dirent.obj_name }}">移动</a></li>
                                <li><a class="op dir-cp" href="#" data="{{ dirent.obj_name }}">复制</a></li>
                            </ul>
                        </div>
                      {% endif %}
                    </td>
                </tr>
                {% endfor %}

                {% for dirent in file_list %}
                <tr>
                    <td class="icon-container"><img src="{{ MEDIA_URL }}img/file/{{ dirent.obj_name|file_icon_filter }}" alt="文件" /></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>
                        <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">下载</a>
                                {% if user_perm == 'rw' %}
                                <a class="op" href="{{ SITE_ROOT }}repo/update_file/{{repo.id}}/?p={{ path|urlencode }}{{dirent.obj_name|urlencode}}">更新</a>
                                {% endif %}
                            </div>
                            {% if user_perm == 'rw' %}
                            <img src="{{ MEDIA_URL }}img/dropdown-arrow.png" title="更多操作" alt="更多操作" 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">删除</a></li>
                                <li><a class="op file-rename" href="#" data="{{ dirent.obj_name }}">重命名</a></li>
                                <li><a class="op file-mv" href="#" data="{{ dirent.obj_name }}">移动</a></li>
                                <li><a class="op file-cp" href="#" data="{{ dirent.obj_name }}">复制</a></li>
                                <li><a class="op" href="{% url 'file_revisions' repo.props.id %}?p={{ path }}{{ dirent.obj_name }}">历史</a></li>
                            </ul>
                            {% endif %}
                        </div>
                    </td>
                </tr>
                {% endfor %}
            </table>
            <!-- /.repo-file-list -->
            {% endif %}
        </div>
    </div>

    <form id="add-new-dir-form" action="" method="post" class="hide">{% csrf_token %}
        <h4>新目录名称：</h4>
        <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="" /><br />
        <p class="error hide"></p>
        <input type="submit" value="提交" class="submit" />
        <button class="simplemodal-close">取消</button>
    </form>

    <form id="add-new-file-form" action="" method="post" class="hide">{% csrf_token %}
        <h4>新文件名称：</h4>
        <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="" /><br />
        <p class="error hide"></p>
        <input type="submit" value="提交" class="submit" />
        <button class="simplemodal-close">取消</button>
    </form>

    <form id="mv-form" action="{{ SITE_ROOT }}file/move/" method="post" class="hide">
        <h3 id="mv-hd"></h3>
        <div class="con">
            <h4><span class="tri-bg tri-down-bg"></span>当前资料库：</h4>
            <div id="current-repo-dirs"></div>
            <h4><span class="tri-bg tri-right-bg"></span>其他资料库：</h4>
            <div id="other-repos-dirs" class="hide"></div>
        </div>
        <input type="hidden" name="operation" id="operation" 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">请点击选择目标目录。</p>
        <input type="submit" value="提交" class="submit" />
        <button class="simplemodal-close">取消</button>
    </form>

    <form id="rename-form" action="{{ SITE_ROOT}}repo/file_rename/" method="post" class="hide">
        <h3 id="rename-hd"></h3>
        <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="new-name" /><br />
        <p class="error hide"></p>
        <input type="submit" value="提交" class="submit" />
        <button class="simplemodal-close">取消</button>
    </form>

    {% 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">
var clicked_more_op_icon, no_file_op_popup = true;
$("table 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');
        }
    }
);

$('#main-panel').removeClass('ovhd');
$('.more-op-icon').click(function(e) {
    var its_op_list = $(this).next();
    if ($(this).attr('data')) { // no popup
        clicked_more_op_icon = $(this);
        $(this).parent().css('position','relative');
        its_op_list.css('left', $(this).position().left + $(this).width() + 5);
        if ($(this).offset().top + its_op_list.height() <= $('#main').offset().top + $('#main').height()) {
            its_op_list.css('top', 6);
        } else {
            its_op_list.css('bottom', 2);
        }
        its_op_list.removeClass('hide');
        $(this).attr('data','');
        no_file_op_popup = false;
    } else {
        its_op_list.addClass('hide');
        $(this).attr('data','no-popup');
        no_file_op_popup = true;
    }
});
$(document).click(function(e) {
    var target =  e.target || event.srcElement;
    if (clicked_more_op_icon && target != clicked_more_op_icon[0]) {
        clicked_more_op_icon.next().addClass('hide'); // hide the popup
        clicked_more_op_icon.attr('data','no-popup');
        var its_tr = clicked_more_op_icon.parent().parent().parent();
        if (!(its_tr.find('*').is(target))) {
            clicked_more_op_icon.parent().addClass('vh');
            its_tr.removeClass('hl');
            if ($('table tr:gt(0)').find('*').is(target)) {
                target.parentNode.className += 'hl';
                target.parentNode.getElementsByTagName('div')[0].className = 'repo-file-op';
            }
        }
        no_file_op_popup = true;
    }
});
$('.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') ? '文件 ' : '目录 ',
        name = $(this).attr('data');
        newname = $('#rename-form input[name="newname"]');
        $('#rename-hd').html( '将' + type + ' <span class="op-target">' + name + '</span> 重命名为：');
    $('#rename-form input[name="oldname"]').val(name);
    $('#rename-form').modal({appendTo:'#main'});
    newname.before('<p class="hide">' + name + '</p>');
    newname.val(name).css('width', newname.prev().width() + 3);
    newname.prev().remove();
    return false;
});

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 %}

$('.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')) {
        $('#operation').val('cp');
        mv_type = '复制';
    } else {
        $('#operation').val('mv');
        mv_type = '移动';
    }

    if ($(this).hasClass('file-cp') || $(this).hasClass('file-mv')) {
        file_type = '文件';
        $('input[name="obj_type"]').val('file');
    } else {
        file_type = '目录';
        $('input[name="obj_type"]').val('dir');
    }

    $('input[name="obj_name"]').val(obj_name);
    $('#mv-hd').html('将' + file_type + ' <span class="op-target">' + obj_name + '</span> ' + mv_type + '到：');
    $('#mv-form').modal({appendTo:'#main', autoResize:true});
    renderDirTree($('#current-repo-dirs'), current_repo);
    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-form h4').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');
    }
});

$('#rename-form .submit').click(function() {
    var self = $(this);
    self.attr('disabled', 'disabled');
    
    $.ajax({
        url: '{% url 'views.repo_rename_file' %}',
        type: 'POST',
        dataType: 'json',
        cache: 'false',
        beforeSend: prepareCSRFToken,
        data: {
            'repo_id': $('#rename-form input[name="repo_id"]').val(),
            'parent_dir': $('#rename-form input[name="parent_dir"]').val(),
            'oldname': $('#rename-form input[name="oldname"]').val(),
            'newname': $('#rename-form input[name="newname"]').val()
        },
        success: function(data) {
            if (data['success']) {
                location.reload(true);
            } else {
                apply_form_error('rename-form', data['error']);
                self.removeAttr('disabled');                
            }
        },
        error: function(data, textStatus, jqXHR) {
            var errors = $.parseJSON(data.responseText);
            $.each(errors, function(index, value) {
                apply_form_error('rename-form', value[0]);
            });
            self.removeAttr('disabled');            
        }
    });
    return false;
});

$('#add-new-file-form .submit').click(function() {
    var self = $(this);
    self.attr('disabled', 'disabled');
    $.ajax({
        url: '{% url 'views.repo_new_file' %}',
        type: 'POST',
        dataType: 'json',
        cache: 'false',
        beforeSend: prepareCSRFToken,
        data: {
            'repo_id': $('#add-new-file-form input[name="repo_id"]').val(),
            'parent_dir': $('#add-new-file-form input[name="parent_dir"]').val(),
            'new_file_name': $('#add-new-file-form input[name="new_file_name"]').val()
        },
        success: function(data) {
            if (data['success']) {
                location.reload(true);
            } else {
                apply_form_error('add-new-file-form', data['error']);
                self.removeAttr('disabled');
            }
        },
        error: function(data, textStatus, jqXHR) {
            var errors = $.parseJSON(data.responseText);
            $.each(errors, function(index, value) {
                apply_form_error('add-new-file-form', value[0]);
            });
            self.removeAttr('disabled');
        }
    });
    return false;
});

$('#add-new-dir-form .submit').click(function() {
    var self = $(this);
    self.attr('disabled', 'disabled');
    
    $.ajax({
        url: '{% url 'views.repo_new_dir' %}',
        type: 'POST',
        dataType: 'json',
        cache: 'false',
        beforeSend: prepareCSRFToken,
        data: {
            'repo_id': $('#add-new-dir-form input[name="repo_id"]').val(),
            'parent_dir': $('#add-new-dir-form input[name="parent_dir"]').val(),
            'new_dir_name': $('#add-new-dir-form input[name="new_dir_name"]').val()
        },
        success: function(data) {
            if (data['success']) {
                location.reload(true);
            } else {
                apply_form_error('add-new-dir-form', data['error']);
                self.removeAttr('disabled');
            }
        },
        error: function(data, textStatus, jqXHR) {
            var errors = $.parseJSON(data.responseText);
            $.each(errors, function(index, value) {
                apply_form_error('add-new-dir-form', value[0]);
            });
            self.removeAttr('disabled');
        }
    });
    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;
    }
});

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

$('#add-new-dir').click(function () {
    $('#add-new-dir-form').modal({appendTo:'#main'});
});
  
$('#add-new-file').click(function () {
    $('#add-new-file-form').modal({appendTo:'#main'});
});

$('#upload-file, #add-new-dir, #add-new-file, #repo-download-btn, #recycle-btn').hover(
    function() {
        $(this).css({'background-color': '#fff', 'cursor': 'pointer'});
    },
    function() {
        $(this).css('background-color', '#f5f5f5');
    }
);

$('#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');
});

{% include "snippets/list_commit_detail.html" %}
{% include "snippets/bottom_bar.html" %}
</script>
{% endblock %}