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

{% block body_class %}default-container{% endblock %}

{% block search_input_header %}
  <input placeholder="{% trans "Search" %}" name="q" type="text" value="{{search_query}}" id="input__none">
{% endblock %}

{% block search_input_footer %}
  <input placeholder="{% trans "Search" %}" name="q" type="text" value="{{search_query}}" id="input__none">
{% endblock %}

{% block content %}
<div class="search search-results">
  <div class="heading heading__component">
    <h1>{% trans "Search" %}</h1>
  </div>
  {% if search_results %}
    <div class="heading heading__subheading">
      <h6>{{ results|length }} {% trans "results found for" %} "{{search_query}}".</h6>
    </div>
  {% paginate 10 results as articles %}
  <div class="article-teaser">
  {% if articles %}
    <ul class="teaser-stacklist">
      {% for article in articles %}
      <li class="teaser-stacklist__item">
        {% if article.get_effective_image %}
          <a href="{% pageurl article.specific %}" class="base-teaser__thumbnail-link">
            {% image article.get_effective_image fill-96x96 as teaser_thumbnail %}
            <img alt="{{ article.title }}" src="{{ teaser_thumbnail.url }}" class="base-teaser__thumbnail" />
          </a>
        {% endif %}
        <div class="teaser-stacklist__item--content">
          <h3 class="base-teaser__title base-teaser__title--highlight block-with-text">
            <a href="{% pageurl article.specific %}" class="base-teaser__title-link">
              {% if article.title_highlight %}
                {{ article.title_highlight|smarttruncatechars:45|safe}}
              {% else %}
                {{ article.title|smarttruncatechars:45|safe}}
              {% endif %}
            </a>
          </h3>
          {% if article.subtitle_highlight or article.body_highlight %}
            <p class="carousel-teaser__subtitle highlight-description">
              {% if article.subtitle_highlight %}
                {{article.subtitle_highlight|smarttruncatechars:28|safe}}
              {% elif article.body_highlight %}
                {{article.body_highlight|smarttruncatechars:28|safe}}
              {% endif %}
            </p>
          {% elif article.subtitle %}
            <p class="base-teaser__subtitle block-with-text">
              {% if article.title.30 %}
                {{ article.subtitle|smarttruncatechars:28|safe}}
              {% else %}
                {{ article.subtitle|smarttruncatechars:50|safe}}
              {% endif %}
            </p>
          {% endif %}
          {% load_tags_for_article article as tags %}
          {% if tags %}
            {% if settings.core.SiteSettings.enable_tag_navigation %}
              <div class="teaser-stacklist-tags-container">
                <ul class="teaser-stacklist-tags">
                  {% for tag in tags %}
                  {% if not tag.title.20 %}
                    <li class="teaser-stacklist-tags__item">
                      <a href="{% url 'tags_list' tag.slug %}" class="teaser-stacklist-tags__anchor">{{ tag.title }}</a>
                    </li>
                    {% endif %}
                  {% endfor %}
                </ul>
              </div>
            {% endif %}
          {% endif %}
          {% get_comment_count for article as comment_count %}
          {% if article.is_commenting_enabled %}
            {% if comment_count > 0 %}
              <a href="{% pageurl article.specific %}?#comments" class="comment-counter{% if not article.allow_commenting %} comment-counter--disabled{% endif %}">
                <img alt="Comments" srcset="{% static 'img/icons/comment.svg' %}" src="{% static 'img/icons/check@2x.png' %}" class="comment-counter__icon">
                <span class="comment-counter__numeral">{{comment_count}}</span>
              </a>
            {% endif %}
          {% endif %}
        </div>
      </li>
      {% endfor %}
    </ul>
  {% endif %}
  </div>
  {% get_pages %}
    <div class="pagination">
    {% if pages.previous %}
      {% if pages.previous.number == 1 and pagelink == request.path %}
        <a href="/" class="pagination__nav-anchor-previous"></a>
      {% else %}
        <a href="{{ pagelink }}?page={{ pages.previous.number }}" class="pagination__nav-anchor-previous"></a>
      {% endif %}
    {% endif %}
      <span class="pagination__current-page">
        Page {{ pages.current }} of {{ pages|length }}
      </span>
    {% if pages.next %}
      <a href="{{ pagelink }}?page={{ pages.next.number }}" class="pagination__nav-anchor-next"></a>
    {% endif %}
  </div>
    {% if pages.next %}
      <a id="more-link" href="#" data-next="{% url 'search_index' %}?page={{pages.next.number}}&q={{search_query}}&locale={{locale_code}}" class="more-link call-to-action__button call-to-action__button--primary">
        <span class="call-to-action__button-text call-to-action__button-text--primary">
          {% trans "Load more" %}
        </span>
      </a>
    {% endif %}
  {% else %}
    <div class="heading heading__subheading">
      <h6>{% trans "No search results for " %}&quot;{{search_query}}&quot;.</h6>
    </div>
    <div class="search-bar">
      <form action="{% url 'search' %}" novalidate>
        <input placeholder="{% trans "Search" %}" name="q" type="text" value="{{search_query}}" id="input__none">
        <input type="submit" value="{% trans "Search" %}" class="call-to-action__item call-to-action__item--with-icon call-to-action__item--search-icon">
      </form>
    </div>
  {% endif %}
</div>
{% endblock %}
{% block search %}
  {% if search_results %}
      {% include "search/search_block.html" %}
  {% endif %}
{% endblock %}