{% extends base %}

{% block head %}
    <style type="text/css">
        .item {
            float: left;
            line-height: 25px;
            margin: 3px;
            padding: 3px;
        }

        .logo {
            width: 45px;
            height: 45px;
        }

        .plugin-name {

        }

        .plugin-time {
            float: right;
        }

    </style>
{% end %}


{% block body %}

{% init baseurl = "/plugin_list" %}
 
<div class="card">
    <a class="tab tab-link x-tab x-tab-default" href="{{baseurl}}?category=all">全部</a>
    <a class="tab tab-link x-tab" href="{{baseurl}}?category=note">笔记</a>
    <a class="tab tab-link x-tab" href="{{baseurl}}?category=dir">文件</a>
    <a class="tab tab-link x-tab" href="{{baseurl}}?category=network">网络</a>
    <a class="tab tab-link x-tab" href="{{baseurl}}?category=system">系统</a>

    {% if _is_admin %}
        <!-- <a class="inline-btn float-right" href="{{_server_home}}/plugins_new">新增</a> -->
        <a class="inline-btn float-right" href="{{_server_home}}/fs_link/scripts/plugins">管理</a>
    {% end %}
</div> 


{% if not show_aside %}
<div class="card hide">
    <a class="link" href="{{_server_home}}/plugins_new">新增插件</a>|
    <a class="link" href="{{_server_home}}/fs_link/scripts/plugins">插件管理</a>|
    <a class="link" href="{{_server_home}}/fs_api/download/plugins">打包下载</a>

    <div class="float-right">插件数: {{len(plugins)}}</div>
</div>
{% end %}

{% init recent = [] %}
<div class="plugin-list col-md-12">
    {% for index, link in enumerate(plugins) %}
        <div class="plugin-item hide">
            <div class="col-md-12">
                <a href="{{link.link}}">{{link.name}}</a>
                {% if _is_admin and link.editable %}
                <a class="float-right item-option" href="{{link.edit_link}}">编辑</a>
                {% end %}
            </div>
            <div class="hide">
                <span>{{link.title}}</span>
                <span class="plugin-time">{{link.atime}}</span>
            </div>
        </div>
    {% end %}
</div>
{% end %}


{% block aside %}
<div class="aside-item">
    <div class="aside-title">
        选项
    </div>
    <div class="aside-content">
        <ul>
            <li><a class="link" href="{{_server_home}}/plugins_new">{{T("New Plugin")}}</a></li>
            <li><a class="link" href="{{_server_home}}/plugins_new/command">{{T("New Command")}}</a></li>
            <li><a href="{{_server_home}}/fs_link/scripts/plugins" class="link">插件管理</a></li>
            <li><a href="{{_server_home}}/fs_api/download/plugins" class="link">打包下载</a></li>
        </ul>
    </div>
</div>

<div class="aside-item">
    <div class="aside-title">
        分类
    </div>
    <div class="aside-content">
        <ul>
            <li><a href="{{_server_home}}/plugin_list" class="link">全部</a></li>
            <li><a href="{{_server_home}}/plugin_list?category=system" class="link">系统</a></li>
            <li><a href="{{_server_home}}/plugin_list?category=note" class="link">笔记</a></li>
            <li><a href="{{_server_home}}/plugin_list?category=dir" class="link">文件</a></li>
            <li><a href="{{_server_home}}/plugin_list?category=network" class="link">网络</a></li>
            <li><a href="{{_server_home}}/plugin_list?category=None" class="link">其他</a></li>
        </ul>
    </div>
</div>

<div class="aside-item">
    <div class="aside-title">
        统计
    </div>
    <div class="aside-content">
        <ul>
            <li>插件数: {{len(plugins)}}</li>
        </ul>
    </div>
</div>

<script type="text/javascript">
function updateView() {
    var listWidth = $(".plugin-list").width();
    console.log("listWidth=" + listWidth);
    // 一行的卡片数量
    var itemCols = 3;
    var itemWidth = (listWidth - (itemCols-1) * 10) / itemCols;

    $(".plugin-item").each(function (index, element) {
        if (listWidth >= 600) {        
            $(element).css("width", itemWidth);
            if (index % itemCols == 0) {
                $(element).css("margin-left", "0px");
            } else {
                $(element).css("margin-left", "10px");
            }
        } else {
            $(element).css("margin-left", "0px");
            $(element).css("width", "100%");
        }
        $(element).show();
    });

}

$(function () {
    updateView();

    $("select").change(function (e) {
        var category = $(this).val();
        window.location.href = "/plugin_list?category=" + category;
    });

    window.onresize = function (e) {
        console.log(e);
        updateView();
    }

    setTimeout(updateView, 200);
});
</script>

{% end %}