{% extends "wagtail_design_system/base.html" %}

{% load static design_system_tags wagtailcore_tags wagtailimages_tags wagtailsettings_tags %}


{% block title %}
    <title>
        {% if object_list.count %}
            {{ object_list.count }} résultat{{ object_list.count|pluralize }}
        {% else %}
            Aucun résultat
        {% endif %}
    pour la recherche « {{ query }} » {% comment %} — {{ settings('wagtail_design_system.WagtailDesignSystemConfig', use_default_site=True).site_title }}{% endcomment %}
    </title>
{% endblock title %}


{% if page.search_description %}
    {% block description %}
        <meta name="description"
              content="{% if object_list.count %} {{ object_list.count }} résultat{{ object_list.count|pluralize }} {% else %} Aucun résultat {% endif %} pour la recherche « {{ query }} »" />
    {% endblock description %}
{% endif %}

{% block content %}
    <div class="design-system-container design-system-my-4w">
        <h1>
            {% if object_list.count %}
                {{ object_list.count }} résultat{{ object_list.count|pluralize }}
            {% else %}
                Aucun résultat
            {% endif %}
            pour la recherche « {{ query }} »
        </h1>
        {% if object_list.count %}
            <ol>
                {% for result in object_list %}
                    <li>
                        <h2 class="design-system-h4">
                            <a href="{% pageurl result %}">{{ result }}</a>
                        </h2>
                        {% if result.search_description %}<p>{{ result.search_description|safe }}</p>{% endif %}

                    </li>
                {% endfor %}
            </ol>
        {% else %}
            <div class="design-system-my-7w design-system-mt-md-12w design-system-mb-md-10w design-system-grid-row design-system-grid-row--gutters design-system-grid-row--middle design-system-grid-row--center">
                <div class="design-system-py-0 design-system-col-12 design-system-col-md-6">
                    <h2 class="design-system-mb-3w">Nous n’avons trouvé aucun contenu correspondant à votre recherche.</h2>
                    <p>Pour continuer votre visite, vous pouvez consulter notre page d’accueil.</p>
                    <ul class="design-system-btns-group design-system-btns-group--inline-md">
                        <li>
                            <a class="design-system-btn" href="/">Page d’accueil</a>
                        </li>
                    </ul>
                </div>
                <div class="design-system-col-12 design-system-col-md-3 design-system-col-offset-md-1 design-system-px-6w design-system-px-md-0 design-system-py-0">
                    <img src="{% static 'design-system/dist/artwork/pictograms/digital/search.svg' %}"
                         class="design-system-responsive-img"
                         alt=""
                         width="300"
                         height="300" />
                </div>
            </div>
        {% endif %}
    </div>

{% endblock content %}
