{% extends "base.html" %}

{% block head %}
<script>
        $("#prev").bind("click", function() {
            elem = document.getElementbyId('prev');
            elem.value = elem.value-1;
            console.log("the value"+elem.value);

        });

</script>
{% endblock %}
{% block content %}

<h2>Query Analysis</h2>
<form class="form-inline" id="search_form" action="{{ url_for ('.search') }}" method="GET">
    <div class="form-group" style="width:50%;">
        <input type="text" style="width:100%;" class="form-control" name="q" required=""
               placeholder="Query ..."
               value="{% if q %} {{ q }} {% endif %}">
    </div>
    <div class="form-group">
        <select name="ql" id="queryLanguage" style="margin:auto 5pt;" class="form-control">
            {% for key, value in lang.iteritems() %}
            <option value="{{ key }}"
                    {% if ql== key %}selected="selected" {% endif %}>{{ value }}
            </option>
            {% endfor %}
        </select>
    </div>
    <input type="hidden" id="page" value="1">
    <button type="submit" id="search" class="btn btn-sm btn-primary">Search
    </button>
    {% if result.matches %}
    <ul class="pager">
        <li class="previous">
            <a id="prev" role="button">&larr; Prev</a>
        </li>
        <li class="next">
            <a id="next" role="button">Next &rarr;</a>
        </li>
    </ul>
    {% endif %}
</form>
{% include 'flash_messages.html' %}
{% if result %}
<p id="notification">
    <a href="#" id="show" style="font-weight:bold;text-align:right;"
       title="Display raw JSON">Found {{ result.totalResults | default("0") }} matches</a>
</p>
{% autoescape off %}
<pre id="message" class="i-layout" style="display:none;">
    {{ result_string | safe }}
</pre>
{% for entry in result.matches %}
<div class="matches">
    {{ entry.snippet }}
</div>
{% endfor %}
{% endautoescape %}
{% endif %}
{% endblock %}