<!doctype html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Brightway2 Web UI: Search</title>
    <link rel="shortcut icon" type="image/ico" href="{{ url_for('static', filename="img/favicon.ico") }}" />
    <meta name="description" content="Search using Brightway2">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
    <!--[if lt IE 9]>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7/html5shiv.js"></script>
    <![endif]-->
    <!--[if gt IE 8]><!-->
        <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/grids-responsive-min.css">
    <!--<![endif]-->
    <link rel="stylesheet" href="{{ url_for('static', filename="css/pure-bw2.css") }}" type="text/css" media="screen, projection">
    <!-- <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'> -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="{{ url_for('static', filename="js/mustache.js") }}"></script>
    <!-- <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script> -->
    <!-- <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/themes/flick/jquery-ui.css" type="text/css" media="screen, projection"> -->
</head>
<body>
    <div class="pure-g">
        <div class="pure-u-1-5">
            <div class="search-container">
                <div class="search-bar">
                    <form class="pure-form pure-form-stacked">
                        <fieldset>
                            <legend>BRIGHTWAY2 SEARCH</legend>

                            <label for="search-term">Search term(s)</label>
                            <input id="search-term" type="text">

                            <p><i>carbon</i> finds the complete term <i>carbon</i></p>
                            <p><i>carb*</i> finds <i>carbon</i>, <i>carbohydrate</i>, etc.</p>
                            <p><i>"fuel cell"</i> finds the phrase <i>fuel cell</i></p>

                        </fieldset>
                    </form>
                </div>
            </div>
        </div>
        <div class="pure-u-4-5">
            <div class="search-results-container">
                <h1 id="search-results-label" style="display: none">SEARCH RESULTS</h1>
                <div id="search-results">Search results will appear here soon (enter a search term to the left).</div>
            </div>
        </div>
    </div>
{% raw %}
<script id="search-result-template" type="text/x-tmpl-mustache">
    <li class="search-result">
        <a class="tooltip" href="{{ url }}">
            {{ name }} ({{ product}}, {{ location }})
            <span>
                <table class="pure-table pure-table-horizontal">
                    <thead>
                        <tr>
                            <th>Database</th>
                            <th>Product</th>
                            <th>Categories</th>
                            <th>Location</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>{{ database }}</td>
                            <td>{{ product }}</td>
                            <td>{{ categories }}</td>
                            <td>{{ location }}</td>
                        </tr>
                    </tbody>
                </table>

                <h2>Comments</h2>
                {{ #comments }}<p>{{{ comment }}}</p>
                {{ /comments }}
            </span>
        </a>
    </li>
</script>
{% endraw %}

<script type="text/javascript">
var typewatch = (function(){
  var timer = 0;
  return function(callback, ms){
    clearTimeout (timer);
    timer = setTimeout(callback, ms);
  }
})();

var prepare_search = function () {
    return JSON.stringify({
        'search_string': $("#search-term").val()
    });
}

var split_comments = function (data) {
    var formatted = [],
        comments = data.comment.split("\n");

    for (var i = 0; i < comments.length; i++) {
        formatted.push({'comment': comments[i]});
    };

    data['comments'] = formatted;
    return data;
}

var write_search_results = function (data) {
    var template = $('#search-result-template').html();
    Mustache.parse(template);
    var results = [];
    for (var i = 0; i < data.results.length; i++) {
        results.push(Mustache.render(template, split_comments(data.results[i])));
    };
    $("#search-results").html("<ul>" + results.join(" ") + "</ul>");
}

$("#search-term").keyup(function () {
    typewatch(function () {
        $("#search-results-label").show();
        $.ajax({
            url: "/search_request",
            contentType: "application/json",
            data: prepare_search(),
            dataType: 'json',
            type: 'POST'
        }).done( function (data) {write_search_results(data);});
    }, 200);
});

$("#search-term").focus();
</script>

</body>
</html>
