<div class="issues-filters">
    <div class="filtered-search-block issues-details-filters row-content-block second-block" v-pre="false">
        <form id="filter-form" class="filter-form js-filter-form" action="#" accept-charset="UTF-8" method="get" >
            <input name="utf8" type="hidden" value="&#x2713;"/>
            <input name="page" id="filter_page" type="hidden" value="1">
            <div class="issues-other-filters filtered-search-wrapper">
                <div class="filtered-search-box" title="按回车键提交查询或点击搜索按钮">
                    <div class="dropdown filtered-search-history-dropdown-wrapper" id="history-dropdown">
                        <button class="dropdown-menu-toggle filtered-search-history-dropdown-toggle-button" type="button" data-toggle="dropdown">
                            <span class="dropdown-toggle-text">
                                <i class="fa fa-history"></i>
                            </span>
                            <i class="fa fa-chevron-down"></i>
                        </button>
                        <div class="dropdown-menu dropdown-select filtered-search-history-dropdown">
                            <div class="dropdown-title">
                                <span>历史搜索</span>
                                <button class="dropdown-title-button dropdown-menu-close" aria-label="Close" type="button">
                                    <i class="fa fa-times dropdown-menu-close-icon"></i>
                                </button>
                            </div>
                            <div class="dropdown-content filtered-search-history-dropdown-content">
                                <ul class="js-filtered-search-history-dropdown"></ul>
                            </div>
                            <div class="dropdown-loading">
                                <i class="fa fa-spinner fa-spin"></i>
                            </div>
                        </div>
                    </div>

{% verbatim %}
                    <div class="filtered-search-box-input-container">
                        <div class="scroll-container">
                            <ul class="tokens-container list-unstyled">
                                <li class="input-token">
                                    <input class="form-control filtered-search" data-base-endpoint="/" data-project-id="" data-username-params="[]" id="filtered-search-issues" placeholder="搜索或过滤结果..." autocomplete="off">
                                </li>
                            </ul>
                            <i class="fa fa-filter"></i>
                            <button class="clear-search hidden" type="button">
                                <i class="fa fa-times"></i>
                            </button>
                        </div>
                        <div class="filtered-search-input-dropdown-menu dropdown-menu hint-dropdown" id="js-dropdown-hint">
                            <ul data-dropdown>
                                <li class="filter-dropdown-item" data-action="submit" id="li-filter-search">
                                    <button class="btn btn-link" id="btn-filter-search">
                                        <i class="fa fa-search"></i>
                                        <span>提示:按"回车键"进行查询</span>
                                    </button>
                                </li>
                            </ul>
                            <ul class="filter-dropdown" data-dropdown data-dynamic>
                                <li class="filter-dropdown-item">
                                    <button class="btn btn-link">
                                        <i class="fa {{icon}}"></i>
                                        <span class="js-filter-hint">{{hint}}</span>
                                        <span class="js-filter-tag dropdown-light-content">{{tag}}</span>
                                    </button>
                                </li>
                            </ul>
                        </div>

                        <div class="filtered-search-input-dropdown-menu dropdown-menu hint-dropdown" id="js-dropdown-operator">
                            <ul class="filter-dropdown" data-dropdown="" data-dynamic="">
                                <li class="filter-dropdown-item" data-value="{{value}}">
                                    <button class="btn btn-link" type="button">
                                        <span class="value">{{value}}</span>
                                        <span class="btn-helptext name">
													{{name}}
												</span>
                                    </button>
                                </li>
                            </ul>
                        </div>

                        <div class="filtered-search-input-dropdown-menu dropdown-menu" data-hint="报告人" id="js-dropdown-author">
                            <ul class="filter-dropdown" data-dropdown data-dynamic>
                                <li class="filter-dropdown-item">
                                    <button class="btn btn-link dropdown-user">
                                        <img alt="{{name}}&#39;s avatar" class="avatar" data-src="{{avatar_url}}" src="{{avatar_url}}"  width="30">
                                        <div class="dropdown-user-details">
                                            <span class="name">{{name}}</span>
                                            <span class="dropdown-light-content value">@{{username}}</span>
                                        </div>
                                    </button>
                                </li>
                            </ul>
                        </div>
                        <div class="filtered-search-input-dropdown-menu dropdown-menu" data-hint="经办人" id="js-dropdown-assignee">
                            <ul data-dropdown>
                                <li class="filter-dropdown-item" data-value="none">
                                    <button class="btn btn-link">
                                        --
                                    </button>
                                </li>
                                <li class="divider"></li>
                            </ul>
                            <ul class="filter-dropdown" data-dropdown data-dynamic>
                                <li class="filter-dropdown-item">
                                    <button class="btn btn-link dropdown-user">
                                        <img alt="{{name}}&#39;s avatar" class="avatar" data-src="{{avatar_url}}"  src="{{avatar_url}}" width="30">
                                        <div class="dropdown-user-details">
                                            <span class="name">{{name}}</span>
                                            <span class="dropdown-light-content value">@{{username}}</span>
                                        </div>
                                    </button>
                                </li>
                            </ul>
                        </div>
                        <div class="filtered-search-input-dropdown-menu dropdown-menu" data-hint="迭代" data-type="input" id="js-dropdown-sprint">
                            <ul data-dropdown>
                                <li class="filter-dropdown-item" data-value="none">
                                    <button class="btn btn-link">
                                        --
                                    </button>
                                </li>
                                <li class="divider"></li>
                            </ul>
                            <ul class="filter-dropdown" data-dropdown data-dynamic>
                                <li class="filter-dropdown-item">
                                    <button class="btn btn-link">
                                        <span class="label-title js-data-value value">{{name}}</span>
                                    </button>
                                </li>
                            </ul>
                        </div>
                        <div class="filtered-search-input-dropdown-menu dropdown-menu" data-hint="模块" data-type="input" id="js-dropdown-module">
                            <ul data-dropdown>
                                <li class="filter-dropdown-item" data-value="none">
                                    <button class="btn btn-link">
                                        --
                                    </button>
                                </li>
                                <li class="divider"></li>
                            </ul>
                            <ul class="filter-dropdown" data-dropdown data-dynamic>
                                <li class="filter-dropdown-item">
                                    <button class="btn btn-link">
                                        <span class="label-title js-data-value value">{{name}}</span>
                                    </button>
                                </li>
                            </ul>
                        </div>
                        <div class="filtered-search-input-dropdown-menu dropdown-menu" data-hint="状态" data-type="input" id="js-dropdown-status">
                            <ul class="filter-dropdown" data-dropdown data-dynamic>
                                <li class="filter-dropdown-item">
                                    <button class="btn btn-link">
                                        <span class="label label-{{color}} js-data-value value">{{name}}</span>
                                    </button>
                                </li>
                            </ul>
                        </div>
                        <div class="filtered-search-input-dropdown-menu dropdown-menu" data-hint="解决结果" data-type="input" id="js-dropdown-resolve">
                            <ul class="filter-dropdown" data-dropdown data-dynamic>
                                <li class="filter-dropdown-item">
                                    <button class="btn btn-link">
                                        <span style="color:{{color}}" class="label-title js-data-value value">{{name}}</span>
                                    </button>
                                </li>
                            </ul>
                        </div>
                        <div class="filtered-search-input-dropdown-menu dropdown-menu" data-hint="优先级" data-type="input" id="js-dropdown-priority">
                            <ul class="filter-dropdown" data-dropdown data-dynamic>
                                <li class="filter-dropdown-item">
                                    <button class="btn btn-link">
                                        <span style="color:{{status_color}}" class="label-title js-data-value value">{{name}}</span>
                                    </button>
                                </li>
                            </ul>
                        </div>
                        <div class="filtered-search-input-dropdown-menu dropdown-menu" data-hint="类型" data-type="input" id="js-dropdown-issue_type">
                            <ul class="filter-dropdown" data-dropdown data-dynamic>
                                <li class="filter-dropdown-item">
                                    <button class="btn btn-link">
                                        <span  class="label-title js-data-value value"><i class="fa {{font_awesome}}"></i>{{name}}</span>
                                    </button>
                                </li>
                            </ul>
                        </div>
                    </div>
                    {% endverbatim %}
                </div>
                <button class="dropdown-toggle" id="btn-go_search" type="submit"
                        title="请求数据" style="margin-left: -1px;">
                    <i class="fa fa-search "></i>
                    搜 索
                </button>
                <button class="dropdown-toggle btn-adv-search" id="save_filter-btn" type="button"
                        title="保存搜索的条件"  >
                    <i class="fa fa-save "></i>
                    保 存
                </button>
                <button class="dropdown-toggle btn-adv-search" id="btn-adv_search" type="button"
                        title="高级查询" data-target="#modal-adv_query" data-toggle="modal">
                    <i class="fa fa-binoculars "></i>
                    高 级
                </button>
                <div class="filter-dropdown-container" style="margin-left: -1px">
                    <div class="dropdown inline   issue-sort-dropdown">
                        <div class="btn-group" role="group">
                            <div class="btn-group" role="group">
                                <button id="btn-sort_field"
                                        title="排序字段"
                                        style="height: 38.5px; width: 110px;"
                                        data-sort_field="<?= sort_field ?>"
                                        class="btn btn-default dropdown-menu-toggle"
                                        data-display="static"
                                        data-toggle="dropdown"
                                        type="button">
                                    <?= avl_sort_fields[sort_field] ?>
                                    <i aria-hidden="true" data-hidden="true"
                                       class="fa fa-chevron-down"></i>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-right dropdown-menu-selectable dropdown-menu-sort">
                                    <li>
                                        {% for avl_sort_field,field_name in avl_sort_fields %}
                                            <a class="sort_select <?= sort_field == avl_sort_field ? 'is-active' : '' ?>"
                                               data-field="<?= avl_sort_field ?>" href="#">
                                                <?= field_name ?>
                                            </a>
                                        {% endfor %}
                                    </li>
                                </ul>
                            </div>
                            <a id="btn_sort_by" type="button" data-sortby="<?= sort_by ?>"
                               class="btn btn-default has-tooltip reverse-sort-btn qa-reverse-sort"
                               title="<?= sort_by == 'desc' ? '降序' : '升序' ?>"
                               style="height:38.5px" href="#">
                                {% if (sort_by == '' or sort_by == 'desc') %}
                                    <svg class="s16">
                                        <use style="stroke: rgba(245, 245, 245, 0.85);"
                                             xlink:href="/dev/img/svg/icons-sort.svg#sort-highest"></use>
                                    </svg>
                                {% endif %}
                                {% if (sort_by == 'asc') %}
                                    <svg class="s16">
                                        <use style="stroke: rgba(245, 245, 245, 0.85);"
                                             xlink:href="/dev/img/svg/icons-sort.svg#sort-lowest"></use>
                                    </svg>
                                {% endif %}
                            </a>
                        </div>
                    </div>
                </div>

                <div class="filter-dropdown-container">
                    <div class="dropdown inline prepend-left-10" style="height: 38.5px">

                        <div class="list-settings">
                            <button id="change_view" class="dropdown-toggle " type="button"
                                    title="切换视图" data-toggle="dropdown" aria-haspopup="true"
                                    aria-expanded="false" style="height: 38.5px">
                                <i id="change_view_icon"
                                   class="fa {% if (issue_view == 'list') %}fa-table{% endif %} {% if (issue_view == 'detail') %}fa-outdent{% endif %} {% if (issue_view == 'responsive') %}fa-outdent{% endif %}"></i>
                                <span id="change_view_span">
                                                                {% if (issue_view == 'list') %}
                                                                    表格视图
                                                                {% endif %}
                                    {% if (issue_view == 'detail') %}
                                        左右视图
                                    {% endif %}
                                    {% if (issue_view == 'responsive') %}
                                        响应式视图
                                    {% endif %}
																	</span>
                                <i aria-hidden="true" data-hidden="true"
                                   class="fa fa-chevron-down"></i>
                            </button>
                            <!-- aria-haspopup="true" aria-expanded="false"-->
                            <ul class="dropdown-menu action-list"
                                aria-labelledby="dropdownMenuButton" id="view_choice">
                                <li data-issue_view="list"
                                    class="normal  {% if (issue_view == 'list') %} active {% endif %}"
                                    data-stoppropagation="true">
                                    <i class="fa fa-table"></i>
                                    表格视图
                                </li>

                                <li data-issue_view="detail"
                                    class="float-part   {% if (issue_view == 'detail') %} active  {% endif %}"
                                    data-stoppropagation="true">
                                    <i class="fa fa-outdent"></i>
                                    左右视图
                                </li>

                                <li data-issue_view="responsive"
                                    class="float {% if (issue_view == 'responsive') %} active {% endif %}">
                                    <i class="fa fa-list"></i>
                                    响应式视图
                                </li>
                            </ul>
                        </div>
                        <div class="list-settings">
                            <button id="list_opt" class="dropdown-toggle" type="button"
                                    title="操作" data-toggle="dropdown" aria-haspopup="true"
                                    style="height: 38.5px" aria-expanded="false">
                                更 多
                                <i class="fa fa-chevron-down"></i>
                            </button>
                            <!-- aria-haspopup="true" aria-expanded="false"-->
                            <ul class="dropdown-menu settings-list"
                                aria-labelledby="dropdownMenuButton" for-id="list_opt"
                                id="opt_choice">
                                <li class="normal" data-stoppropagation="true">
                                    <a href="/user/filters">
                                        <i class="fa fa-filter"></i>
                                        管理自定义过滤器</a>
                                </li>
                                <li class="normal" data-stoppropagation="true">
                                    <a data-target="#modal-setting_columns"
                                       data-toggle="modal" id="a-setting_columns"
                                       href="#modal-setting_columns">
                                        <i class="fa fa-check-square-o"></i>
                                        设置显示列</a>
                                </li>
                                {% if (this.isAdmin or projectPermArr['IMPORT_EXCEL'] is defined) %}

                                    <li class="float-part" data-stoppropagation="true">
                                        <a data-target="#modal-import_excel"
                                           data-toggle="modal" id="a-import-excel"
                                           href="#modal-import_excel">
                                            <i class="fa fa-arrow-up"></i>
                                            导入Excel数据
                                        </a>
                                    </li>
                                {% endif %}

                                {% if (this.isAdmin or projectPermArr['EXPORT_EXCEL'] is defined) %}

                                    <li class="float-part" data-stoppropagation="true">
                                        <a data-target="#modal-export_excel"
                                           data-toggle="modal" id="a-export-excel"
                                           href="#modal-export_excel">
                                            <i class="fa fa-download"></i>
                                            导出Excel数据
                                        </a>
                                    </li>
                                {% endif %}

                            </ul>
                        </div>

                        {% if (projectPermArr['CREATE_ISSUES'] is defined) %}

                            <a class="btn btn-new js-key-create"
                               title="快捷键 C 可呼出创建事项表单"
                               data-target="#modal-create-issue"
                               data-toggle="modal"
                               id="btn-create-issue"
                               style="height:36px;margin-bottom: 3px"
                               href="#modal-create-issue">
                                <i class="fa fa-plus fa-fw"></i>
                                创 建
                            </a>
                        {% endif %}

                    </div>

                </div>
            </div>
        </form>
    </div>
    <div id="adv_query_display_container" class="row-content-block second-block adv-query-display hide"  style="padding: 8px;">

        <div class="selector-set" >
            <strong>高级查询 </strong><i class="fa fa-angle-right"></i>
            <span  id="adv_query_diplay" class="adv-query-diplay-item"></span>
            <a class="clear-adv-query" onclick="window.location = '<?=project_root_url?>'" href="#">清空筛选</a>
        </div>
        <style type="text/css">
            .selector-set .ss-item {
                position: relative;
                display: inline-block;
                line-height: 22px;
                border: 1px solid #e8e8e8;
                color: #666;
                font-size: 12px;
                margin: 0 5px 0 4px;
                padding: 2px 6px 2px 6px;
                cursor: pointer;
            }

            .adv-query-display .selector-set {
                display: flex;
                flex-direction: row;
                align-items: center;
            }

            .adv-query-display .selector-set > i {
                margin: 0 6px;
            }

            .selector-set .ss-item strong,
            .selector-set .ss-item b{
                margin-right: 2px;
            }

            .clear-adv-query {
                line-height: 26px;
                padding: 0 8px;
                border: solid 1px #e8e8e8;
                background: #f9f9f9;
                display: block;
                margin-left: 8px;
                color: #6b6b6b;
            }

            .selector-set .ss-item:hover {
                text-decoration: none;
                color: #333;
            }

            .adv-query-display {
                background: #fff;
                line-height: 28px;
            }
            .ss-item a {
                color: #666;
                text-decoration: none;
            }
            /*.selector-set .ss-item i {
                display: block;
                position: absolute;
                width: 25px;
                height: 22px;
                right: 0;
                top: 0;
                background: url(/dev/img/search.ele.png) no-repeat 7px -140px;
            }*/
            .selector-set .ss-item em {
                color: #e4393c;
            }

        </style>
    </div>
</div>
<script src="/dev/js/input_search.js"></script>

<script type="text/javascript">
    var $filterSreach = null;
    $(function(){
        var usersList = [ ];
        var from_user = _issueConfig.users;
        if(!is_empty(_cur_project_id)){
            from_user = _issueConfig.project_users;
        }
        for (let i=0;i< from_user.length;i++) {
            let user = {
                avatar_url: from_user[i].avatar,
                id: from_user[i].uid,
                name: from_user[i].display_name,
                username: from_user[i].username
            };
            usersList.push(user);
        }
        var _searches =  [
            {
                key: "报告人",
                name: "author",
                icon: "pencil",
                jsonData: usersList,
                symbol: "@"
            },
            {
                key: "经办人",
                name: "assignee",
                icon: "user",
                jsonData: usersList,
                symbol: "@"
            },
            {
                key: "迭代",
                name: "sprint",
                icon: "rocket",
                api: "/config/sprint?project_id=<?=project_id?>",
                symbol: ""
            },
            {
                key: "模块",
                name: "module",
                icon: "square",
                api: "/config/module?project_id=<?=project_id?>",
                symbol: ""
            },
            {
                key: "状态",
                name: "status",
                icon: "info",
                api: "/config/status",
                symbol: ""
            },
            {
                key: "解决结果",
                name: "resolve",
                icon: "info",
                api: "/config/resolve",
                symbol: ""
            },
            {
                key: "优先级",
                name: "priority",
                icon: "info",
                api: "/config/priority",
                symbol: ""
            },
            {
                key: "类型",
                name: "issue_type",
                icon: "info",
                api: "/config/issueType?project_id=<?=project_id?>",
                symbol: ""
            }];

        var operators = [
            {
                name: "等于",
                value: "="
            },
            {
                name: "不等于",
                value: "!="
            }
        ];

        $filterSreach = new InputSearch(_searches, operators);
{% verbatim %}
        var str = "{{fds}} span {{user}}";
        var regex = /[^{{}}]+(?=\}})/g;
        var str1 = str.match(regex);
{% endverbatim %}

        $('#li-filter-search').bind('click',function(e){
            $filterSreach.search();
        });
        $("#btn-go_search").on("click", function (e) {
            $filterSreach.search();
        });
    });
</script>