{% extends 'base.html.twig' %}

{% block title %}Rechercher
{% endblock %}

{% block body %}
	<div class="search-title">
		<div class="container base-content content-padded">
			<h1 class="text-pinked">Rechercher{% if q %}: <strong style="color:#A9045D">{{q}}</strong>{% endif %}</h1>
            {% if q %}
                {% if results|length > 0 %}
                    <p>Voici les résultat de la recherche, {{results|length}} éléments ont été trouvés.</p>
                {% else %}
                    <p>Malheureusement nous n'avons rien trouvé correspondant à votre recherche.</p>
                {% endif %}
            {% else %}
                <p>Bienvenue sur notre page de recherche, où vous pouvez trouver facilement et rapidement les contenus qui vous intéressent à travers nos pages, évenements et articles.</p>
            {% endif %}
            <form method="get" class="flex v-centered" accept-charset="UTF-8">
                <input id="search" type="text" name="q" value="{% if q %}{{q}}{% endif %}">
                <button class="btn is-primary">Rechercher</button>
            </form>
		</div>
	</div>
	<div class="container blog-list">
        {% if pages|length > 0 %}
            <h2 class="underlined">Pages</h2>
            {% for page in pages %}
                <div class="search-item">
                    <figure>
                        <img src="{{page.cover}}" alt="{{page.title}}">
                    </figure>
                    <div class="content">
                        <h3><a href="{{page.url}}">{{page.title}}</a></h3>
                        <p>{{page.getMetaContent(400)|raw}}</p>
                    </div>
                </div>
            {% endfor %}
        {% endif %}
        {% if articles|length > 0 %}
            <h2 class="underlined">Articles</h2>
            {% for article in articles %}
                <div class="search-item">
                    <figure>
                        <img src="{{article.cover}}" alt="{{article.title}}">
                    </figure>
                    <div class="content">
                        <h3><a href="{{article.link}}">{{article.title}}</a></h3>
                        <p>{{article.getMetaContent(400)|raw}}</p>
                    </div>
                </div>
            {% endfor %}
        {% endif %}
        {% if events|length > 0 %}
            <h2 class="underlined">Évenements</h2>
            {% for event in events %}
                <div class="search-item">
                    <figure>
                        <img src="{{event.cover}}" alt="{{event.title}}">
                    </figure>
                    <div class="content">
                        <h3><a href="{{event.permalink}}">{{event.title}}</a></h3>
                        <p>{{event.getMetaContent(400)|raw}}</p>
                    </div>
                </div>
            {% endfor %}
        {% endif %}
	</div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/mark.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded',function(){
            var instance = new Mark(".content");
            instance.mark('{{q}}')
        })
    </script>
{% endblock %}