{% extends "base.html" %}
{% load el_pagination_tags wagtailcore_tags core_tags wagtailimages_tags gem_tags comments %}

{% block content %}
{% if search_results %}
  <div class="search search-page {% if self.get_effective_extra_style_hints %}search-page--{{self.get_effective_extra_style_hints}}{% endif %}">
    <div class="heading heading--hero">
      <h1 class="heading__component">{% trans "Search" %}</h1>
    </div>
    <h3 class="heading__headline">{{results|length}} {% trans "results found for" %}:
      <span class="search__query-term">'{{search_query}}'</span>
    </h3>
    {% comment %}{% include "search/search_block.html" %}{% endcomment %}
    <ul class="teaser-stacklist">
      {% for article in search_results %}
        <li class="teaser-stacklist__item">
          {% if article.image %}
            <div class="article-teaser__images">
              <a href="{% pageurl article.specific %}" class="article-teaser__anchor">
                {% image article.image width-480 format-jpeg as teaser_thumbnail %}
                <img alt="{{ article.title }}" src="{{ teaser_thumbnail.url }}" class="article-teaser__thumbnail"/>
              </a>
            </div>
          {% endif %}
          <div class="article-teaser__container">
            {% get_comment_count for article as comment_count %}
            {% load_tags_for_article article as tags %}
            <ul class="teaser-tags">
              {% if comment_count > 0 %}
              <li class="teaser-tags__item">
                <a href="{% pageurl article.specific %}?#comments" class="comments-counter">
                  <span class="comments-counter__numeral">{{comment_count}}</span>
                </a>
              </li>
              {% endif %}
              {% 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__anchor">{{ 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>
            <h3 class="article-teaser__title {% if article.title_highlight %}article-teaser__title--highlight{% endif %}">
               <a href="{% pageurl article.specific %}" class="article-teaser__heading">
              {% if article.title_highlight %}
                {{ article.title_highlight|smarttruncatechars:50|safe}}
              {% else %}
                {{ article.title|safe}}
              {% endif %}
            </a>
            </h3>
            {% if article.subtitle_highlight or article.body_highlight %}
              <h6 class="article-teaser__subtitle">
                {% if article.subtitle_highlight %}
                  {{article.subtitle_highlight|smarttruncatechars:50|safe}}
                {% elif article.body_highlight %}
                  {{article.body_highlight|smarttruncatechars:50|safe}}
                {% endif %}
              </h6>
            {% elif article.subtitle %}
              <h6 class="article-teaser__subtitle">
                {{ article.subtitle|smarttruncatechars:50|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__button call-to-action__button--primary" href="{% pageurl article.specific %}">
              {% trans "Read article" %}
            </a>
          </div>
        </li>
      {% endfor %}
    </ul>
    {% 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 "Page" %} {{ search_results.number }} {% trans "of" %} {{ search_results.paginator.num_pages }}</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>
{% else %}
  <div class="search search-page">
    <div class="heading heading--hero">
      <h1 class="heading__component">{% trans "Search" %}</h1>
    </div>
    <h4 class="heading__micro">{% trans "No search results for" %}:
      <span class="search__query-term">'{{ search_query }}'</span>
    </h4>
    <form action="{% url 'search' %}" class="search__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 "I am looking for" %}">
      <input type="submit" value="{% trans "Search" %}" class="call-to-action__item call-to-action__item--text">
    </form>
  </div>
{% endif %}
{% endblock %}