{% load i18n cms_tags %}

<div class="content__frame">
    <div class="content__container">
        <div class="content__main">
            <div class="search__content">
                <div class="search__content__main">
                    <form action="{% url 'search' %}" method="get" class="search__form">
                        <input id="search__query" type="text" name="{{ search_form.q.html_name }}"
                               placeholder="{% trans 'Elementa entdecken...' %}" autocomplete="off"
                               {% if search_form.q.value %}value="{{ search_form.q.value }}"{% endif %}>
                        <button type="submit">
                            {% include 'project/assets/search.svg' %}
                            {% trans 'Suchen' %}
                        </button>
                    </form>

                    <div class="search__results">
                        <p class="section__text search__results__amount">
                            {% if search_results|length > 0 %}
                                {% blocktrans with amount=search_results|length q=search_form.q.value %}
                                    {{ amount }} Resultate für «{{ q }}»:
                                {% endblocktrans %}
                            {% else %}
                                <strong>
                                    {% blocktrans with q=search_form.q.value %}
                                        Leider wurden keine Resultate mit dem Begriff «{{ q }}» gefunden.<br>
                                        Sie erreichen uns auch über andere Kanäle:
                                    {% endblocktrans %}
                                    {% page_url 'contact' as contact_url %}
                                    <a href="{{ contact_url }}">{% trans 'Zum Kontakt' %}</a>
                                </strong>
                            {% endif %}
                        </p>
                        <ul>
                            {% for page in search_results %}
                                {% include "project/includes/page_item.html" with search=True image=page.object.page.imageextension.image cropping=page.object.page.imageextension.cropping %}
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>