{% extends "base.html" %}
{% load wagtailcore_tags wagtailimages_tags wagtailembeds_tags core_tags gem_tags %}
{% wagtail_site as current_site %}
{% block content %}
{% if search_results %}
  <div class="search-page">
    <div class="search-page__wrapper">
      <div class="heading heading--secondary">
        <h1 class="heading__headline">{% trans "Search Results" %}</h1>
      </div>
      <div class="heading">
        <h3 class="heading__subtitle">{{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-card">
          {% for article in search_results %}
            <li class="teaser-card__item">
              {% for block in article.body %}
                {% if block.value.type == "video" %}
                  {% if block.value.youtube_link %}
                    <div class="teaser-card__iframe">
                      {% embed block.value.youtube_link %}
                    </div>
                    {% endif %}
                {% else %}
                  {% if forloop.last and article.get_effective_image %}
                    <div class="teaser-card__images">
                      <a href="{% pageurl article.specific %}" class="teaser-card__anchor">
                        {% image article.get_effective_image width-480 format-jpeg as teaser_thumbnail %}
                        <img alt="{{ article.title }}" src="{{ teaser_thumbnail.url }}" class="teaser-card__thumbnail"/>
                      </a>
                    </div>
                  {% endif %}
                {% endif %}
              {% endfor %}
              {# <!-- END REVIEW IMAGE BACKUP --> #}
              <div class="teaser-card__container">
                <a href="{% pageurl article.specific %}" class="teaser-card__anchor">
                  <h3 class="teaser-card__title {% if article.title_highlight %}teaser-card__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-card__subtitle">
                    {% if article.subtitle_highlight %}
                      {{article.subtitle_highlight|smarttruncatechars:100|safe}}
                    {% elif article.body_highlight %}
                      {{article.body_highlight|smarttruncatechars:100|safe}}
                    {% endif %}
                  </h6>
                {% elif article.subtitle %}
                  <h6 class="teaser-card__subtitle">
                    {{ article.subtitle|smarttruncatechars:100|safe}}
                  </h6>
                {% endif %}
                {% with article.body|first as block %}
                  {% if block.block_type == 'paragraph' %}
                    <p class="teaser-card__excerpt">{{block.value|smarttruncatechars:100|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="search-page__wrapper">
        <div class="heading heading--secondary">
          <h1 class="heading__headline">{% 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_general">{% trans "Search" %}</label>
          <input name="q" type="search" aria-label="Search Input" id="search_general" placeholder="{% trans "Search" %}">
          <input type="submit" value="{% trans "Seach" %}" class="call-to-action__button call-to-action__button--secondary">
        </form>
      </div>
    </div>
  {% endif %}
{% endblock %}