{% extends "base.html" %}
{% block content %}
<section class="h-feed">
    <p class="hide-on-mobile">Returned <b>{{ '{0:,}'.format(number_of_results) }} search result{% if number_of_results != 1 %}s{% endif %}</b> for your "{{ query }}" query.</p>
    {% if out_of_bounds_page == False %}
      <p>
        {% if query.startswith("discover ") %}
          Showing home pages that talk about "{{ query }}".
          You can also search for your query <a href="/results?query={{ query.replace('discover', '', 1) }}">on any page on any site in the index</a>.
        {% else %}
          Ordered by relevance. You can also <a href="/results?query=discover {{ query }}&page={{ page }}">discover individual sites that may write about your query</a>.
        {% endif %}
      </p>
    {% endif %}
    {% include "search/special_serp_items.html" %}
    {% if out_of_bounds_page == False %}
      <ol class="serp">
        {% for r in range(0, results | length) %}
        {% if results[r]['_source']['url'] != special_result.breadcrumb %}
          <li class="h-entry serp_result">
            {% include "search/breadcrumbs.html" %}
        {% endif %}
            <div class="serp-item">
              {% if results[r]['_source']['h_card'] and results[r]['_source']['h_card']['url'] and 
                results[r]['_source']['h_card']['url'][0].split("/")[2] == results[r]['_source']['url'].split('/')[2] and
                results[r]['_source']['domain'] != results[r-1]['_source']['domain'] %}
                <div class="h-card" style="float: right;">
                  {% if results[r]["_source"]["h_card"]["photo"] %}
                  <img src="
                    {% if results[r]['_source']['h_card']['photo'][0].startswith('/') %}
                      https://{{ results[r]['_source']['url'].split('/')[2] }}
                    {% endif %}
                    {{ results[r]['_source']['h_card']['photo'][0] }}" height="75" width="75" class="u-photo" style="float: left; margin-right: 10px;" />
                  {% endif %}
                </div>
              {% endif %}
              <p class="p-name" style="font-size: 22px; margin-bottom: 0;"><a href="{{ results[r]['_source']['url'] }}" class="u-url u-uid">
                {% if results[r]['_source']['title']|length == 0 %}{{ " ".join(results[r]['_source']['url'][0].split(" ")[:20]) }}
                {% if results[r]['_source']['url'][0].split(" ")|length > 20 %}...{% endif %}{% else %}{{ " ".join(results[r]['_source']['title'].split(" ")[:20]) }}
                {% if results[r]['_source']['title'].split(" ")|length > 20 %}...{% endif %}{% endif %}</a></p>
              {% if results[r]['_source']['h_card'] and results[r]['_source']['h_card']["name"] 
                and results[r]['_source']['h_card']["name"][0].strip() != results[r]['_source']['title'].strip() and results[r]['_source']['h_card']['url']
                and results[r]['_source']['h_card']['url'][0].split("/")[2] == results[r]['_source']['url'].split('/')[2] %}
              <p class="breadcrumbs">Written by <a href="{{ results[r]['_source']['h_card']['url'][0] }}" class="p-author">{{ results[r]['_source']['h_card']['name'][0] }}</a></p>
              {% endif %}
              {% if results[r]['_source'].get('json_ld', "{}") != "{}" %}
                  {% if results[r]['_source']['json_ld']['image'] is mapping %}
                  <img class="serp-item-image" src="{{ results[r]['_source']['json_ld']['image']['url'] }}" alt="{{ results[r]['_source']['json_ld']['name'] }}" width="300" style="margin-top: 10px">
                  {% elif results[r]['_source']['json_ld']['image'] %}
                  <img class="serp-item-image" src="{{ results[r]['_source']['json_ld']['image'] }}" alt="{{ results[r]['_source']['json_ld']['name'] }}" width="300" style="margin-top: 10px">
                  {% endif %}

                  {% if results[r]['_source']['json_ld']['description'] %}
                  {% for item in results[r]['_source']['json_ld']['description'].split('. ')[:3] %}
                    <p>{{ item.strip().replace("&nbsp;", "").replace("&amp;", "&") }}.</p>
                  {% endfor %}
                  {% endif %}
                  {% if results[r]['_source']['json_ld']['offers'] %}
                  <p>
                    {% if results[r]['_source']['json_ld']['offers']['lowPrice'] %}
                      Price: <span class="serp-item-price">{{ results[r]['_source']['json_ld']['offers']['lowPrice'] }}</span>
                      {{ results[r]['_source']['json_ld']['offers']['priceCurrency'] }}
                    {% elif results[r]['_source']['json_ld']['offers']['price'] %}
                      Price: <span class="serp-item-price">{{ results[r]['_source']['json_ld']['offers']['price'] }}</span>
                      {{ results[r]['_source']['json_ld']['offers']['priceCurrency'] }}
                    {% endif %}
                  </p>
                  <p>
                    {% if results[r]['_source']['json_ld']['offers']['availability'] != "InStock" %}
                      <span style="background: lightpink; padding: 5px; border-radius: 3px;">Out of stock</span>
                    {% else %}
                      <span style="background: lightgreen; padding: 5px; border-radius: 3px;">In stock</span>
                    {% endif %}
                  </p>
                  {% endif %}
              {% endif %}
              {% if results[r]['_source']["special_snippet"] and results[r]['_source']["special_snippet"]["type"][0] == 'h-review' %}
              {% if results[r]['_source']["special_snippet"]["properties"]["rating"] and results[r]['_source']["special_snippet"]["properties"]["rating"][0] | int <= 5 %}
                <p>
                {% for i in range(results[r]['_source']["special_snippet"]["properties"]["rating"][0] | int) %}
                  ⭐
                {% endfor %}
                </p>
              {% endif %}
              {% else %}
              <p class="p-summary">
                {% if results[r]['_source']['meta_description']|length > 0 %}
                  {{ results[r]['_source']['meta_description'] }}
                {% elif (results[r]['_source']['h1'].split(",") and results[r]['_source']['h1'].split(",")[0]|length > 0) or results[r]['_source']['h1'] != "" %}
                  {{ results[r]['_source']['h1'].split(",")[0] }}{% else %}{{ results[r]['_source']['h2'].split(",")[0] }}
                {% endif %}
              </p>
              {% endif %}
              {% include "search/special_result_markup.html" %}
              {% if results[r]['_source']['url'].startswith("https://indieweb.org/") or results[r]['_source']['url'].startswith("https://microformats.org/wiki/") %}
              {% set title_count = 0 %}
              <p>
                {% for header in results[r]['_source']['h2'].split(", ")[:5] %}
                  {% if header != "Navigation menu" and header != "See Also" %}
                    <a href="{{ results[r]['_source']['url'] }}#{{ header.replace(' ', '_') }}">{{ header }}</a>
                    {% if header != results[r]['_source']['h2'].split(", ")[:5][-1] %} | {% endif %}
                  {% endif %}
                {% endfor %}
              </p>
              {% endif %}
              {% if results[r]['_source']['published_on'] %}
                <p>Published on <time class="dt-published" datetime="{{ results[r]['_source']['published_on'] }}">{{ results[r]['_source']['published_on'] }}</time>.</p>
              {% endif %}
              {% if is_logged_in == True %}
                <p>
                  <a href="{{ base_results_query }}&page={{ page }}&evaluate=save&value=upvote">Upvote</a><br>
                  <a href="{{ base_results_query }}&page={{ page }}&evaluate=save&value=downvote">Downvote</a>
                </p>
              {% endif %}
            {% if not (results[r]['_source']['domain'] != results[r-1]['_source']['domain'] or 
              (special_result and results[r]['_source']['domain'] == special_result.breadcrumb.split("/")[2]) or r == 0) or not
              (results[r]['_source']["special_snippet"] and results[r]['_source']["special_snippet"] != {}) %}
            </div>
        {% endif %}
        {% endfor %}
      </ol>
    {% elif out_of_bounds_page == True %}
    <section class="main_content_box" style="margin: 0; max-width: initial;">
      <p>There are no results matching your query.</p>
      {% if suggestion_made and corrected_text.strip() != query.strip() %}
        <p>Did you mean <a href="/results?query={{ corrected_text.strip() }}">{{ corrected_text.strip() }}</a>?</p>
      {% else %}
        <p>If you cannot find what you are looking for, first check the spelling of your query.
          If your spelling is correct, consider searching for similar words or phrases that relate to your query.</p>
      {% endif %}
    </section>
    {% endif %}
    {% if page_count > 1 %}
      <ol class="tab">
        {% if page != 1 %}
        <li class="pages"><a href="{{ base_results_query }}&page={{ page -1 }}" rel="prev">Previous</a></li>
        {% endif %}
        {% for i in range(1, page_count+1) %}
          {% if i < 3 or i in [page-1, page, page+1] or i in [page_count-1, page_count] %}
            <li class="pages"><a href="{{ base_results_query }}&page={{ i }}" {% if i == page %}class="active_tab"{% endif %}>{{ i }}</a></li>
          {% endif %}
          {% if (i == page-2) or (i == page+2 and page+2 != page_count) %}
            <li>...</li>
          {% endif %}
        {% endfor %}
        {% if page < page_count %}
        <li class="pages"><a href="{{ base_results_query }}&page={{ page + 1 }}" rel="next">Next</a></li>
        {% endif %}
      </ol>
    {% endif %}
    <p>You can follow this page in a <a href="https://indieweb.org/reader">social reader</a> or a <a href="https://indieweb.org/feed_reader">feed reader</a>.</p>
    {% if featured_serp_contents.answer_html and "atlas.p3k.io" in featured_serp_contents.answer_html %}
    <p>The map at the top of this search result is provided by the <a href="https://atlas.p3k.io">p3k Atlas API</a>.</p>
    {% endif %}
    {% if base_results_query and base_results_query.endswith("social") %}
    <p>The icons in the direct answer at the top of this page are from Paul Robert Lloyd's <a href="https://github.com/paulrobertlloyd/socialmediaicons">socialmediaicons</a> collection.</p>
    {% endif %}
  {% endblock %}
  <script>
    var query_field = document.getElementById('query');
    
    // listen for . key press and escape keypress
    document.addEventListener('keydown', function(e) {
      if (e.keyCode == 190) {
        query_field.focus();
      } else if (e.keyCode == 17) {
        query_field.value = "";
      }
    });
  </script>
</section>