{% extends 'base.html' %}
{% block self_head_css_js %}
    <link href="/static/css/plugins/datepicker/datepicker3.css" rel="stylesheet">
    <link href="/static/css/plugins/chosen/chosen.css" rel="stylesheet">
    <script src="/static/js/plugins/chosen/chosen.jquery.js"></script>
{% endblock %}
{% block content %}
{% include 'nav_cat_bar.html' %}

<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div id="ibox-content" class="ibox-title">
                    <h5> 用户日志详细信息列表 </h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>

                <div class="ibox-content">
                    <div class="panel-options">
                        <ul class="nav nav-tabs">
                            <li><a href="/jlog/log_list/online/" class="text-center"><i class="fa fa-laptop"></i> 在线 </a></li>
                            <li><a href="/jlog/log_list/offline/" class="text-center"><i class="fa fa-bar-chart-o"></i> 历史记录 </a></li>
                            <li class="active"><a href="/jlog/search/" class="text-center"><i class="fa fa-bar-chart-o"></i> 详细搜索 </a></li>
                        </ul>
                    </div>
                    <br/>
                    <div class="tab-content">
                        <form method="get" action="" role="form" class="form-inline">
                            <p>
                                选择相应条件进行搜索
                            </p>
                            <div class="form-group" id="data_5">
                                <div class="input-daterange input-group" id="datepicker">
                                    <input type="text" class="input-sm form-control" style="width: 100px;" name="start" value="{{ date_seven_day }}">
                                    <span class="input-group-addon">to</span>
                                    <input type="text" class="input-sm form-control" style="width: 100px;" name="end" value="{{ date_now_str }}">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="input-group">
                                    <select name="single" data-placeholder="用户名" class="chosen-select" multiple style="width:300px;" tabindex="2">
                                        <option value="用户">用户名</option>
                                        <option value="Bolivia, Plurinational State of">hongweiguang</option>
                                        <option value="Bonaire, Sint Eustatius and Saba">wangyong</option>
                                        <option value="Bosnia and Herzegovina">hehe</option>
                                        <option value="Botswana">wangyong</option>
                                        <option value="Bouvet Island">wangyongd</option>
                                        <option value="Romania">Romania</option>
                                        <option value="Zambia">Zambia</option>
                                        <option value="Zimbabwe">Zimbabwe</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="input-group">
                                    <select name="multi" data-placeholder="主机" class="chosen-select" multiple style="width:200px;" tabindex="4">
                                        <option value="主机">主机</option>
                                        <option value="United States">172.16.1.1</option>
                                        <option value="Afghanistan">172.16.1.1</option>
                                        <option value="Aland Islands">172.16.1.1</option>
                                        <option value="Albania">172.16.1.1</option>
                                        <option value="Algeria">172.16.1.1</option>
                                        <option value="American Samoa">172.16.1.1</option>
                                        <option value="Andorra">172.16.1.1</option>
                                        <option value="Angola">172.16.1.1</option>
                                        <option value="Anguilla">172.16.1.1</option>
                                        <option value="Antarctica">172.16.1.1</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <input id="cmd" name="cmd" placeholder="命令" type="text" class="form-control" style="width: 200px;">
                            </div>
                            <div class="form-group">
                                <button id="submit_button" class="btn btn-primary" type="submit">搜索</button>
                            </div>
                        </form>

                        <div class="row">
                            <div class="col-sm-6">
                            </div>
                            {% include 'paginator.html' %}
                        </div>
                    </div>    
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    function log_search(){
        $.ajax({
            type: "GET",
            url: "/jlog/search/?env=offline",
            data: $("#search_form").serialize(),
            success: function (data) {
                $(".tab-content").html(data);
            }
        });
    }

    $(document).ready(function(){
        $('#data_5 .input-daterange').datepicker({
            dateFormat: 'yy-mm-dd',
            keyboardNavigation: false,
            forceParse: false,
            autoclose: true
        });
    });

    var config = {
                '.chosen-select'           : {},
                '.chosen-select-deselect'  : {allow_single_deselect:true},
                '.chosen-select-no-single' : {disable_search_threshold:10},
                '.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},
                '.chosen-select-width'     : {width:"95%"}
            };
    for (var selector in config) {
        $(selector).chosen(config[selector]);
    }

</script>
{% endblock %}
{% block self_footer_js %}
    <script src="/static/js/cropper/cropper.min.js"></script>
    <script src="/static/js/datapicker/bootstrap-datepicker.js"></script>
    <script src="/static/js/plugins/chosen/chosen.jquery.js"></script>
{% endblock %}