{% extends base %}

{% block head %}

<style type="text/css">

.gallery-item {
    float: left;
    width: 150px;
    height: 170px;
    text-align: center;
    overflow: hidden;
    border:1px solid #eee;
}

@media screen and (max-width: 400px) {
    /** mobile **/
    .gallery-item {
        width: 33.33%;
    }
}

.checkbox-box {
    float: left;
    width: 100%;
    height: 20px;
    line-height: 20px;
}

.icon-box {
    float: left;
    width:100%;
    height:120px;
    line-height:120px;
}

.gallery-item img {
    max-width:100%;
    max-height:100%;
    display:inline-block;
    vertical-align:middle;
}

.gallery-item a {
    display: block;
    float: left;
    width: 100%;
}

.menu {
    display: block;
}

.fs-icon {
    width: 80px;
    height: 80px;
}
</style>

    {% set search_action = '/fs_find' %}
    {% set search_placeholder = '搜索文件' %}
    
{% end %}

{% block search_form %}
    <input type="text" name="mode" class="hide" value="grid"/>
    <input type="text" name="path" class="hide" value="{{?path}}"/>
{% end %}

{% block body %}

{% import xutils.textutil as textutil %}
{% init parent_path = None %}
{% init get_file_thumbnail = xutils.get_func_by_name("fs.get_file_thumbnail") %}

<div class="card">
    {% include fs/component/fs_title.html %}
</div>

<div class="card">
    {% include mod_fs_path.html %}
    {% include fs/component/options/fs_options.html %}

    <div class="file-list">
        {% for item in filelist %}
            {% if not item.name.startswith("._") %}
                <div class="gallery-item">
                    <div class="checkbox-box">
                        <input type="checkbox" class="float-left" data-path="{{item.path}}" data-name="{{item.name}}">
                    </div>
                    <div class="icon-box">
                        {% if item.type == "dir" %}
                            <img class="fs-icon" src="{{_server_home}}/_static/image/folder2.png">
                        {% elif xutils.is_img_file(item.path) %}
                            <img class="x-photo" src="{{_server_home}}{{get_file_thumbnail(item.path)}}" 
                                data-src="{{_server_home}}/fs/~{{item.encoded_path}}">
                        {% elif xutils.is_text_file(item.path) %}
                            <img class="fs-icon" src="{{_server_home}}/_static/image/icon_txt.png">
                        {% else %}
                            <img class="fs-icon" src="{{_server_home}}/_static/image/file2.png">
                        {% end %}
                    </div>
                    <a href="{{_server_home}}/fs/~{{item.path}}?mode=grid">{{textutil.get_short_text(item.name, 10)}}</a>
                </div>
            {% end %}
        {% end %}
    </div>

</div>

{% end %}

{% block body_right %}
    {% include fs/component/fs_sidebar.html %}
{% end %}