<!--
 Copyright (c) 2016, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
 WSO2 Inc. licenses this file to you under the Apache License,
 Version 2.0 (the "License"); you may not use this file except
 in compliance with the License.
 You may obtain a copy of the License at
 http://www.apache.org/licenses/LICENSE-2.0
 Unless required by applicable law or agreed to in writing,
 software distributed under the License is distributed on an
 "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
 either express or implied. See the License for the
 specific language governing permissions and limitations
 under the License.
-->
{{unit "cdmf.unit.ui.modal"}}
{{unit "cdmf.unit.data-tables-extended"}}
{{#zone "breadcrumbs"}}
    <li>
        <a href="{{@app.context}}/">
            <i class="icon fw fw-home"></i>
        </a>
    </li>
    <li>
        <!--suppress HtmlUnknownTarget -->
        <a href="{{@app.context}}/devices">
            Devices
        </a>
    </li>
    <li>
        <!--suppress HtmlUnknownTarget -->
        <a href="{{@app.context}}/devices/search">
            Search
        </a>
    </li>
{{/zone}}


{{#zone "content"}}
    <!-- content/body -->
    <div class="row">
        <div class="col-md-12">
            <!-- content -->
            <div class="row">
                <div class="col-md-10 col-centered">
                    <button id="back-to-search" class="wr-btn col-fixed-right hidden">Back to Search Query</button>
                    <button id="view-search-param" class="wr-btn col-fixed-right hidden">View Search Query</button>
                </div>
            </div>
            <div id="advance-search-form" class="container col-centered wr-content">
                <div class="wr-form">
                    <p class="page-sub-title">Advanced Device Search</p>
                    <hr/>
                    <div id="device-listing-status" class="row hidden">
                        <div class="col-lg-12 col-md-12">
                            <ul style="list-style-type: none; padding:0px;">
                                <li class="message message-info">
                                    <h4>
                                        <i class="icon fw fw-info"></i>
                                        <a id="device-listing-status-msg"></a>
                                    </h4>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-12 col-md-12">
                            <div id="device-search-error-msg" class="alert alert-danger hidden" role="alert">
                                <i class="icon fw fw-error"></i><span></span>
                            </div>

                            <label class="wr-input-label ">
                                Location
                            </label>
                            <br>
                            <div class="row">
                                <div id="locationInputField" class=" col-md-10 form-group wr-input-control">
                                    <input type="text" id="location" class="form-control"/>
                                    <br>
                                    <span class=" locationError hidden glyphicon glyphicon-remove form-control-feedback"></span>
                                    <label class="error usernameEmpty hidden" for="summary">This field is
                                        required.</label>
                                </div>
                                <div class="col-md-2 form-group wr-input-control col-fixed-right">
                                    <button id="device-search-btn" class="wr-btn-search ">Search</button>
                                </div>
                            </div>

                            <button id="add-custom-param" class="wr-btn">Add a custom search parameter</button>
                            <br>
                        </div>
                        <br>
                        <div id="customSearchParam" class="col-lg-10 col-md-10">

                        </div>
                        <div class="row">
                            <div id="customSearchParam" class="col-lg-12 col-md-12"></div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /content -->
            <div id="group-error-content" class="hide">
                <div class="modal-content">
                    <div class="row">
                        <div class="col-md-7 col-centered center-container">
                            <h4 id="error-msg">Unexpected error occurred!</h4>
                            <br/>
                            <div class="buttons">
                                <a href="#" id="group-unexpected-error-link" class="btn-operations">
                                    Ok
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- loading -->
            <div id="loading-content" class="col-centered hidden">
                <i class="fw fw-settings fw-spin fw-2x"></i>

                Searching for Devices . . .
                <br>
            </div>
            <!--/loading-->

            <!-- result content -->
            <div id="advance-search-result" class="col-centered hidden">
                <div class="wr-form">
                    <b class="page-sub-title title-result">Advanced Search Results</b>
                    <hr/>
                    <div id="device-table">
                        <table class="table table-striped table-hover list-table display responsive nowrap data-table grid-view hidden"
                               id="device-grid">
                            <thead class="hidden">
                            <tr>
                                <th></th>
                                <th></th>
                                <th></th>
                                <th></th>
                                <th></th>
                                <th></th>
                                <th></th>
                            </tr>
                            </thead>
                            <tbody id="ast-container">

                            <br class="c-both"/>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <!-- / result content -->
        </div>
    </div>
    </div>
    <!-- /content/body -->
{{/zone}}
{{#zone "bottomJs"}}
    {{js "/js/bottomJs.js"}}
    <script id="device-listing" src="{{@page.publicUri}}/templates/device-listing.hbs"
            type="text/x-handlebars-template"></script>
{{/zone}}
