{% set search = true %}

{% extends "layout.html" %}

{% block title %}Search{% endblock %}

{% block head %}
  <script type="text/javascript" src="/static/js/toggle.js"></script>

  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/jquery-bonsai@2.1.3/jquery.bonsai.min.css" integrity="sha384-VwH79MjVc4vHJMedSXJPGOIYBb6Sn0zj7qEv8dfoctXuRmyk72jZKCKjQaWUkTuI" crossorigin="anonymous">
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery-bonsai@2.1.3/jquery.bonsai.min.js" integrity="sha384-6tHeUHkvxX60Ea66TlEvjgBuIhXv37ETzU8gIu1gWPgt/4XCgQRWWVkDyDVTeHFA" crossorigin="anonymous"></script>
{% endblock %}

{% block breadcrumb %}
  <li><a href="/search">Search</a>
{% endblock %}

{% macro searchlink(query, page, perpage, radius) %}
/search?query={{ query.replace(" ", "+") }}&page={{ page }}&perpage={{ perpage }}&radius={{ radius }}
{% endmacro %}

{% block sidebar %}
  <div class="interaction">
  </div>

  {% if count > 10 %}
    <nav id="results-per-page" class="pagination">
      <span class="page-item{% if perpage == 10 %} active{% endif %}"><a class="page-link" href="{{ searchlink(query, 1, 10, radius) }}">10</a></span>
      <span class="page-item{% if perpage == 50 %} active{% endif %}"><a class="page-link" href="{{ searchlink(query, 1, 50, radius) }}">50</a></span>
      <span class="page-item{% if perpage == 2**63-1 %} active{% endif %}"><a class="page-link" href="{{ searchlink(query, 1, "oo", radius) }}">&infin;</a></span>

      <p>results per page</span>
    </nav>
  {% endif %}

  <hr>

  You can use <a href="https://www.sqlite.org/fts3.html#full_text_index_queries">fulltext search</a>. Some suggestions:
  <ul>
    <li>use wildcards, <var>ideal</var> doesn't match <var>ideals</var>, but <var>ideal*</var> matches both;
    <li>strings like <var>quasi-compact</var> should be enclosed by double quotes, otherwise you are looking for tags containing <var>quasi</var> but not <var>compact</var>
  </ul>

{% endblock %}

{% block hamburger %}
  <div class="interaction"></div>

  {% if count > 10 %}
    <nav id="results-per-page" class="pagination">
      <span class="page-item{% if perpage == 10 %} active{% endif %}"><a class="page-link" href="{{ searchlink(query, 1, 10, radius) }}">10</a></span>
      <span class="page-item{% if perpage == 50 %} active{% endif %}"><a class="page-link" href="{{ searchlink(query, 1, 50, radius) }}">50</a></span>
      <span class="page-item{% if perpage == 2**63-1 %} active{% endif %}"><a class="page-link" href="{{ searchlink(query, 1, "oo", radius) }}">&infin;</a></span>

      <p>results per page</span>
    </nav>
  {% endif %}
{% endblock %}

{% block pagination %}
  {% if count > perpage %}
    <nav class="col-md">
      <ul class="pagination search-pages flex-wrap">
        <li class="previous-search-page{% if page == 1%} inactive{% endif %}"><a href="{{ searchlink(query, page - 1, perpage, radius) }}">&laquo;</a></li>
      {% set lastpage = ((count - 1) // perpage) + 1 %}

      {% set pages = [1, page - 1, page, page + 1, lastpage] %}
      {% if page == 1 %}{% do pages.append(3) %}{% do pages.append(4) %}{% do pages.append(5) %}{% endif %}
      {% if page == 2 %}{% do pages.append(4) %}{% do pages.append(5) %}{% endif %}
      {% if page == 3 %}{% do pages.append(5) %}{% endif %}
      {% if page == lastpage - 2 %}{% do pages.append(lastpage - 4) %}{% endif %}
      {% if page == lastpage - 1 %}{% do pages.append(lastpage - 4) %}{% do pages.append(lastpage - 3) %}{% endif %}
      {% if page == lastpage %}{% do pages.append(lastpage - 4) %}{% do pages.append(lastpage - 3) %}{% do pages.append(lastpage - 2) %}{% endif %}

      {% set jump = {"jump": false} %} {# determines whether we want to add ellipsis, need dictionary for variable in loop... #}

      {% for i in range(1, lastpage + 1) %}
        {% if i in pages %}
    <br style="clear: both">
          {% do jump.update({"jump": true}) %}
          <li class="page-item{% if i == page %} active{% endif %}"><a class="page-link" href="{{ searchlink(query, i, perpage, radius) }}">{{ i }}</a>
        {% elif jump.jump %}
          <li class="page-item ellipsis">...</li>
          {% do jump.update({"jump": false}) %}
        {% endif %}

      {% endfor %}
      <li class="next-search-page{% if page == lastpage %} inactive{% endif %}"><a href="{{ searchlink(query, page + 1, perpage, radius) }}">&raquo;</a></li>
      </ul>
    </nav>
  {% endif %}
{% endblock %}

{% block body %}
<form id="search" action="/search">
  <div class="form-group">
    <label for="query">Keywords</label>
    <input type="search" class="form-control" name="query" id="query" placeholder="keywords or a tag" autofocus value="{{ query | e }}">
  </div>

  <div class="form-group">
    <button type="submit" class="btn btn-primary">Search</button>

    <input type="radio" name="radius" id="allRadio" value="all"{% if radius == "all" %} checked{% endif %}>
    <label for="allRadio">Search all tags</label>
    <br>
    <input type="radio" name="radius" id="statementsRadio" value="statements"{% if not radius == "all" %} checked{% endif %}>
    <label for="statementsRadio">Search only statements</label>
  </div>

  <input type="hidden" name="perpage" id="perpage" value="{{ perpage }}">

  <script type="text/javascript">
// synchronise the two text inputs
$("form[id=search] div input[type=search]").on("paste keyup", function() {
  $("form[id=quicksearch] input[type=search]").val($(this).val());
});
$("form[id=quicksearch] input[type=search]").on("paste keyup", function() {
  $("form[id=search] div input[type=search]").val($(this).val());
});
  </script>

</form>

<hr>

{% if count == -1 %}
  <p>This query returned too many search results, please refine it.
{% else %}
  {{ self.pagination() }}

  <h2>{% if count == 0 %}No{% else %}{{ count }}{% endif %} result{% if count != 1 %}s{% endif %}
    {% if count > perpage %}
      (now showing results {{ perpage * (page - 1) + 1 }}&ndash;{{ [perpage * page, count] | sort | first }})
    {% endif %}
  </h2>

  {% if misspelt | length > 0 %}
  <p>If the keyword{{ "(s)" if misspelt | length > 1 }} {% for keyword in misspelt %}<var>{{ keyword }}</var>{{ ", " if not loop.last }}{% endfor %} is not giving you the results you expect, then try searching for <a href="{{ searchlink(alternative, page, perpage, radius) }}"><var>{{ alternative }}</var></a>.
  {% endif %}

  <div id="search-results">
    {% if tree %}
      <ul id="tree" class="tree">
      {% for item in tree recursive %}
        <li class="expanded" id="{{ item.tag }}">
        <span class="preview-title">{{ item.type | capitalize }} <a href="/tag/{{ item.tag }}" data-tag="{{ item.tag }}">{{ item.ref }}</a>{% if item.name %}: {{ item.name | safe }}{% endif %}{{ macros.badges(item) }}</span>

        {% if item.type not in headings %}
          <div class="html preview tex2jax_ignore">
            {{ item.html | safe }}
          </div>
        {% endif %}

        {% if item.children %}
          <ul>{{ loop(item.children) }}</ul>
        {% endif %}
      {% endfor %}
      </ul>

      <script type="text/javascript">
$("ul#tree").bonsai({
  addExpandAll: true,
});

var storageID = "bonsai-{{ query | urlencode }}-{{ perpage }}-{{ page }}";
// load state of Bonsai
var state = sessionStorage.getItem(storageID);
if (state !== null)
  $("ul#tree").data("bonsai").restore(JSON.parse(state));

// update storage if necessary
$("div#search-results").click(function() {
  var bonsai = $("ul#tree").data("bonsai");
  var state = bonsai.serialize();
  sessionStorage.setItem(storageID, JSON.stringify(state));
});

// CSS doesn't have a parent selector so we mimick it in jQuery
$("ul#tree li div.preview").parent().prepend("<span class='previewable'></span>")

$("span.previewable").click(function(e) {
  $(e.target).siblings("div.preview").toggle();
  $(e.target).siblings("span.preview-title").toggle();
  $(e.target).toggleClass("previewing");

  // update MathJax
  $(e.target).siblings("div.preview").removeClass("tex2jax_ignore");
  MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
});

$(function () {
  $('[data-toggle="popover"]').popover()
})
      </script>
    {% endif %}
  </div>

  {{ self.pagination() }}
{% endif %}
{% endblock %}

