{% extends "base.html" %}

{% block content %}
<div x-data="query">
    <div id="search-header" class="flex m-2 items-center border-b pb-2 border-red-900 mx-10">
      <a href="/" class="mx-10 text-2xl text-red-900 font-beyond-the-mountains">Squirrel</a>
      <form action="/search" method="get">
        <input 
          class="shadow appearance-none border-slate-600 rounded-full w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" 
          type="text" size="80" name="q"
          onfocus="this.select()"
          x-bind:value="query"></input>
      </form>
      <div class="grow text-right">
        Foo
      </div>
    </div>

    <div id="search-main" class="mx-auto w-2/3">
      <div id="search-info" class="flex">
        <p class="grow"></p>
        <p>Page <span x-text="page"></span> of <span x-text="pages"></span>,
        <span x-text="total"></span> results.</p>
      </div>

      <div id="search-results">
        <template x-for="result in results">
          <div class="p-4 m-4">
            <div class="m-2 flex">
            <img class="w-16 h-16 m-2" x-bind:src="'/icons/' + result.mtype.replace('/', '-') + '.svg'"></img>
              <div>
                <a class="text-xl text-red-900" x-text="result.title" x-bind:href="'/docs/' + result.fpath" target="_blank"></a><br/>
                <span class="text-sm" x-text="result.relevancyrating"></span>
              </div>
            </div>
            <div>
              <template x-for="snippet in result.snippets">
                <span class="text-sm"><span x-html="snippet[2]"></span><br/></span>
              </template>
            </div>
          </div>
        </template>
      </div>

      <div id="search-footer" class="text-sm">
        XQuery: <span x-text="xquery"></span>
      </div>
    </div>
<div>
<script>
var query = {{ search|tojson }};
</script>

{% endblock %}