{% import "search_macros.html" as search_macros %}
{% extends "base.html" %}

{% block fullmain %}
<div class="tablet-only" style="margin-top: 1.0em;">

  <details class="search_filters">
    <summary style="float: right;"><i class="filter icon"></i>{{ _("Filters") }}</summary>
    <p>
    {{ search_macros.query_option(query.time_options, query.filter_time) }}
    {{ search_macros.query_option(query.type_options, query.filter_type) }}
    {{ search_macros.query_option(query.availability_options, query.filter_availability) }}
    {{ search_macros.query_option(query.sort_options, query.sort_order) }}
    </p>
  </details>

  {% if hits %}
    {# <h2>{{ "{:,}".format(hits.count_found) }}</h2> #}
    <span style="font-size: 1.5em;">{{ "{:,}".format(hits.count_found) }}</span>
    Hits
    <span style="color: rgba(0,0,0,0.4);">in {{ "{:0.2}".format(hits.query_time_ms/1000.0) }}sec</span>
  {% else %}
    &nbsp;
  {% endif %}
</div>

<div class="ui equal height stackable divided grid" style="margin-top: 1em;">

  <div class="ui tablet-hide two wide column">
    {% if hits %}
      <div style="width: 100%; text-align: right;">
        {# <h2>{{ "{:,}".format(hits.count_found) }}</h2> #}
        <h3 style="font-size: {% if hits.count_found >= 10000000 %}1.0em{% elif hits.count_found >= 1000 %}1.5em{% else %}2.0em{% endif %};">{{ "{:,}".format(hits.count_found) }}</h3>
        Hits
      </div>
      <div style="text-align: right;">
        <span style="color: rgba(0,0,0,0.4);">in {{ "{:0.2}".format(hits.query_time_ms/1000.0) }}sec</span>
      </div>
      <div class="ui clearing divider"></div>
    {% endif %}

    <div style="text-align: right;">
      {{ search_macros.query_option(query.time_options, query.filter_time) }}
      {{ search_macros.query_option(query.type_options, query.filter_type) }}
      {{ search_macros.query_option(query.availability_options, query.filter_availability) }}
      {{ search_macros.query_option(query.sort_options, query.sort_order) }}
    </div>
    
  </div>

  <div class="ui fourteen wide column">
    {% if search_error %}
      <div class="ui icon error message">
        <i class="ban icon"></i>
        <div class="content">
          <div class="header">
            {% if search_error.type == "backend" %}
              {% trans %}Backend Search Engine Error{% endtrans %}
            {% elif search_error.type == "query" %}
              {% trans %}Search Query Error{% endtrans %}
            {% endif %}
          </div>
          <p>Computer said: <code>{{ search_error.message }}</code>
          <p>Query parsing is currently very naive. Sometimes you can fix this
          problem by adding quotes around terms or entire phrases.
        </div>
      </div>
    {% elif hits and hits.results %}
      {% if hits.results %}
        {% if hits.offset != 0 %}
          <div style="text-align: center; margin-bottom: 2em;">
            {{ search_macros.search_pagination(hits) }}
          </div>
        {% endif %}

        {# search results (rendered via macro) #}
        {% for paper in hits.results %}
          {{ search_macros.fulltext_search_result_row(paper) }}
        {% endfor %}

        {% if hits.count_found > hits.limit %}
          <div style="text-align: center; margin-top: 2em;">
            {{ search_macros.search_pagination(hits) }}
          </div>
        {% endif %}
      {% endif %}
    {% elif hits %}
      <div class="ui placeholder segment" style="height: 100%;">
        <div class="ui icon header">
          <i class="search icon"></i>
          {% trans %}We didn't find any documents matching your query{% endtrans %}
        </div>
        <div class="inline">
          <a href="https://archive.org/search.php?sin=TXT&query={{ query.q|urlencode }}" target="_blank" class="ui button" style="margin: 0.5em;">Try archive.org</a>
          <a href="https://fatcat.wiki/search&q={{ query.q|urlencode }}" target="_blank" class="ui button" style="margin: 0.5em;">Try fatcat.wiki</a>
          <a href="https://www.semanticscholar.org/search?q={{ query.q|urlencode }}" target="_blank" class="ui button" style="margin: 0.5em;">Try Semantic Scholar</a>
          <a href="https://scholar.google.com/scholar?q={{ query.q|urlencode }}" target="_blank" class="ui button" style="margin: 0.5em;">Try Google Scholar</a>
        </div>
      </div>
    {% else %}
      <div class="ui placeholder segment" style="height: 100%;">
        <div class="ui icon header">
          <i class="search icon"></i>
          {% trans %}Enter a query in the box above to get started{% endtrans %}
        </div>
      </div>
    {% endif %}
  </div>
</div>
{% endblock %}