<!DOCTYPE html>
<html>
    <head>
        <title>Reactive Search</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <!-- inject:css -->
        <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.css">
        <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap-theme.css">
        <link rel="stylesheet" href="/bower_components/bootstrap-select/dist/css/bootstrap-select.css">
        <link rel="stylesheet" href="/css/style.css">
        <!-- endinject -->
    </head>
    <body>
        <div class="container">
            <!-- busy spinner -->
            <div class="page-header">
                <h1><img id="spinner" class="pull-right" src="images/spinner.gif" style="display: none;" width="32" height="32">Reactive Search</h1>
            </div>

            <!-- query input -->
            <div id="input" class="form-horizontal">
                <div class="form-group">
                    <label for="keywordsToSearch" class="col-md-2 control-label">Keywords</label>
                    <div class="col-md-10">
                        <select id="keywordsToSearch" class="form-control" multiple="multiple" data-max-options="4" data-live-search="data-live-search"></select>
                    </div>
                </div>
                <div class="form-group">
                    <label for="minScore" class="col-md-2 control-label">Minimum score</label>
                    <div class="col-md-10">
                        <input class="form-control" type="number" step="any" value="0.25" id="minScore">
                    </div>
                </div>
                <div class="form-group">
                    <label for="hintSteps" class="col-md-2 control-label">Hint steps</label>
                    <div class="col-md-10">
                        <input class="form-control" type="number" value="20" id="hintSteps">
                    </div>
                </div>
                <div class="form-group">
                    <label for="maxResults" class="col-md-2 control-label">Max results</label>
                    <div class="col-md-10">
                        <input class="form-control" type="number" value="100" id="maxResults">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-offset-2 col-md-10">
                        <button class="btn btn-primary" id="searchKeywords" type="button" disabled="disabled">
                            <span class="glyphicon glyphicon-search"></span> Search
                        </button>
                    </div>
                </div>
            </div>

            <!-- options dialog -->
            <div class="modal fade" id="optionsDialog" tabindex="-1">
                <div class="modal-dialog modal-sm">
                    <div class="modal-content">
                        <div class="modal-header"><big>Visualization Options</big></div>
                        <div class="modal-body">
                            <div class="checkbox">
                                <label><input type="checkbox" id="useLocalScale" checked="checked">Use local scale</label>
                            </div>
                            <div class="checkbox">
                                <label><input type="checkbox" id="useRelativeScale" checked="checked">Use relative scale</label>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- learn keyword dialog -->
            <div class="modal fade" id="learnDialog" tabindex="-1">
                <div class="modal-dialog modal-sm">
                    <div class="modal-content">
                        <div class="modal-header"><big>Learn Keyword</big></div>
                        <div class="modal-body">
                            <div class="form-group">
                                <label for="keyword" class="control-label">Learn keyword as</label>
                                <input class="form-control" type="text" id="keywordToLearn">
                            </div>
                            <div class="alert alert-danger" id="learnError" style="display: none;">Unable to learn keyword</div>
                        </div>
                        <div class="modal-footer">
                            <div class="btn-group">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                <button type="button" class="btn btn-success" id="learnKeyword" disabled="disabled">Learn</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- forget keyword dialog -->
            <div class="modal fade" id="forgetDialog" tabindex="-1">
                <div class="modal-dialog modal-sm">
                    <div class="modal-content">
                        <div class="modal-header"><big>Forget Keyword</big></div>
                        <div class="modal-body">
                            <div class="form-group">
                                <label for="keywordToForget">Keyword to forget</label>
                                <select id="keywordToForget" class="form-control"></select>
                            </div>
                            <div class="alert alert-danger" id="forgetError" style="display: none;">Unable to forget keyword</div>
                        </div>
                        <div class="modal-footer">
                            <div class="btn-group">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                <button type="button" class="btn btn-danger" id="forgetKeyword" disabled="disabled">Forget</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- query output -->
            <div id="output" style="display: none;">
                <!-- semantic tweaker -->
                <div class="panel panel-default unselectable">
                    <div class="panel-heading">
                        <big>Semantic tweaks to <span id="query" class="text-primary"></span></big>
                        <div class="btn-group pull-right">
                            <button class="btn btn-xs btn-success" data-toggle="modal" data-target="#learnDialog">Learn</button>
                            <button class="btn btn-xs btn-danger" data-toggle="modal" data-target="#forgetDialog">Forget</button>
                            <button class="btn btn-xs btn-default" data-toggle="modal" data-target="#optionsDialog">Options</button>
                        </div>
                    </div>
                    <div style="padding: 10px;">
                        <canvas id="grapher" width="800" height="550"></canvas>
                    </div>
                </div>

                <!-- result listing -->
                <div class="panel panel-default">
                    <div class="panel-heading"><big>Query results (<span id="count" class="text-primary"></span>)</big></div>
                    <div style="padding: 10px;">
                        <script id="template" type="text/x-handlers-template">
                            {{#if results}}
                            <table class="table table-striped table-condensed">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Name</th>
                                    <th>Score</th>
                                </tr>
                            </thead>
                            {{#each results}}
                                <tr>
                                    <td>{{@index}}</td>
                                    <td><a href="{{url}}">{{name}}</a></td>
                                    <td>{{score}}</td>
                                </tr>
                            {{/each}}
                            </table>
                            {{/if}}
                        </script>
                        <div id="results"></div>
                    </div>
                </div>
            </div>
        </div>
        <!-- inject:js -->
        <script src="/bower_components/underscore/underscore.js"></script>
        <script src="/bower_components/handlebars/handlebars.js"></script>
        <script src="/bower_components/jquery/dist/jquery.js"></script>
        <script src="/bower_components/fabric/dist/fabric.js"></script>
        <script src="/bower_components/tinycolor/tinycolor.js"></script>
        <script src="/bower_components/bootstrap/dist/js/bootstrap.js"></script>
        <script src="/bower_components/bootstrap-select/dist/js/bootstrap-select.js"></script>
        <script src="/js/application.js"></script>
        <script src="/js/grapher.js"></script>
        <!-- endinject -->
    </body>
</html>