{% extends "base.html" %}
{% load wagtailcore_tags core_tags wagtailimages_tags gem_tags %}
{% wagtail_site as current_site %}
{% block content %}
{% if search_results %}
  <div class="search-page">
    <div class="banner">
      <div class="heading heading--hero">
        <h1 class="heading__title">{% trans "Search" %}</h1>
      </div>
    </div>
    <div class="search-page__wrapper">
      <div class="heading">
        <h3 class="heading__title">{{results|length}} {% trans "Results found for" %}: <span class="search-page__query-term">'{{search_query}}'</span></h3>
      </div>
      <div class="article-teaser__wrapper">
        <ul class="teaser-stacklist">
          {% for article in search_results %}
            <li class="teaser-stacklist__item">
              {% if article.image %}
                <div class="teaser-stacklist__images">
                  <a href="{% pageurl article.specific %}" class="teaser-stacklist__anchor">
                    {% image article.image width-1080 format-jpeg as teaser_thumbnail %}
                    <img alt="{{ article.title }}" src="{{ teaser_thumbnail.url }}" class="teaser-stacklist__thumbnail"/>
                  </a>
                </div>
              {% endif %}
              <div class="teaser-stacklist__container">
                {% load_tags_for_article article as tags %}
                <ul class="teaser-tags">
                  {% if tags %}
                    {% if settings.core.SiteSettings.enable_tag_navigation %}
                      {% for tag in tags %}
                        {% if not tag.title.20 %}
                          <li class="teaser-tags__item">
                            <a href="{% url 'tags_list' tag.slug %}" class="teaser-tags__anchor">
                              <span class="teaser-tags__title">{{ tag.title }}</span>
                            </a>
                          </li>
                        {% endif %}
                      {% endfor %}
                    {% elif settings.core.SiteSettings.enable_clickable_tags %}
                      {% for tag in article.tags_list %}
                        <li class="teaser-tags__item">
                          <span class="teaser-tags__title">{{tag}}</span>
                        </li>
                      {% endfor %}
                    {% endif %}
                  {% endif %}
                </ul>
                <a href="{% pageurl article.specific %}" class="teaser-stacklist__anchor">
                  <h3 class="teaser-stacklist__title {% if article.title_highlight %}teaser-stacklist__title--highlight{% endif %}">
                    {% if article.title_highlight %}
                      {{ article.title_highlight|smarttruncatechars:100|safe}}
                    {% else %}
                      {{ article.title|safe}}
                    {% endif %}
                  </h3>
                </a>
                {% if article.subtitle_highlight or article.body_highlight %}
                  <h6 class="teaser-stacklist__subtitle">
                    {% if article.subtitle_highlight %}
                      {{article.subtitle_highlight|smarttruncatechars:150|safe}}
                    {% elif article.body_highlight %}
                      {{article.body_highlight|smarttruncatechars:150|safe}}
                    {% endif %}
                  </h6>
                {% elif article.subtitle %}
                  <h6 class="teaser-stacklist__subtitle">
                    {{ article.subtitle|smarttruncatechars:150|safe}}
                  </h6>
                {% endif %}
                {% with article.body|first as block %}
                  {% if block.block_type == 'paragraph' %}
                    <p>{{block.value|smarttruncatechars:150|safe}}</p>
                  {% endif %}
                {% endwith %}
                <a class="call-to-action__item call-to-action__item--paginate" href="{% pageurl article.specific %}">
                  {% trans "Read more" %}</a>
              </div>
            </li>
          {% endfor %}
        </ul>
      </div>
      {% if search_results.paginator.num_pages > 1 %}
        <div class="pagination">
          {% if search_results.has_previous %}
            <a href="?p={{ search_results.previous_page_number }}&amp;q={{search_query}}" class="call-to-action__button call-to-action__button--previous">
              {% trans "Previous" %}
            </a>
          {% endif %}
          <p class="call-to-action__item--text call-to-action__item--text-current">
            {% trans "Pages" %} <span class="call-to-action__counter">{{ search_results.number }}</span> {% trans "of" %} <span class="call-to-action__counter">{{ search_results.paginator.num_pages }}</span></p>
          {% if search_results.has_next %}
            <a href="?p={{ search_results.next_page_number }}&amp;q={{search_query}}" class="call-to-action__button call-to-action__button--next">
              {% trans "Newer" %}
            </a>
          {% endif %}
        </div>
      {% endif %}
    </div>
  </div>
  {% else %}
    <div class="search-page">
      <div class="banner">
        <div class="heading heading--hero">
          <h1 class="heading__title">{% trans "Search" %}</h1>
        </div>
      </div>
      <div class="search-page__wrapper">
        <div class="heading">
          <h1 class="heading__title">{% trans "Search" %}</h1>
        </div>
        <div class="heading  heading--macro">
          <h4 class="heading__title">{% trans "No search results for" %}: <span class="search-page__query-term">'{{ search_query }}'</span></h4>
          <p class="heading__subtitle">
            {% trans "Please check spelling or insert another word" %}. <a href="{{current_site.root_page.specific.url}}" class="call-to-action__item call-to-action__item--text">
              {% trans "Go to homepage" %}
            </a>
          </p>
        </div>
        <form action="{% url 'search' %}" class="search-page__form" novalidate>
          <label class="search__label" for="search_inner">{% trans "Search" %}</label>
          <input name="q" type="search" aria-label="Search Input" id="search_inner" placeholder="{% trans "Search Yegna" %}">
          <input type="submit" value="{% trans "Go" %}" class="call-to-action__item call-to-action__item--text">
        </form>
      </div>
    </div>
  {% endif %}
{% endblock %}
