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

{% block title %}{{ 'help.search.title'|trans }} · {{ 'help.meta.indexTitle'|trans }}{% endblock %}
{% block robots %}noindex, follow{% endblock %}
{% block navigation %}{% endblock %}

{% block styles %}
    {% include 'help/_styles.html.twig' %}
{% endblock %}

{% block body %}
<div class="help-page">
    <div class="gradient-background container-fluid p-0 mb-4">
        <div class="home-container-new-content">
            {% include 'general/navigation.html.twig' %}
            <div class="pt-5 pb-3">
                <nav class="help-breadcrumb" aria-label="Breadcrumb">
                    <a href="{{ path('app_help_index') }}">{{ 'help.breadcrumb.home'|trans }}</a>
                    <span aria-hidden="true">/</span>
                    <span>{{ 'help.search.title'|trans }}</span>
                </nav>
                <h1 class="dark-blue-title">{{ 'help.search.title'|trans }}</h1>

                <form class="help-search-form mt-3" action="{{ path('app_help_search') }}" method="get" role="search" style="max-width:720px;">
                    <label class="visually-hidden" for="help-search-q">{{ 'help.search.label'|trans }}</label>
                    <input id="help-search-q" class="help-search-input" type="search" name="q" value="{{ q }}" placeholder="{{ 'help.search.placeholder'|trans }}">
                    <button type="submit" class="button button-blue">{{ 'help.search.submit'|trans }}</button>
                </form>
            </div>
        </div>
    </div>

    <div class="container pb-5">
        {% if q == '' %}
            <p>{{ 'help.search.emptyQuery'|trans }}</p>
            <div class="help-popular-terms justify-content-start">
                {% for term in popular_terms %}
                    <a href="{{ path('app_help_search', {q: term}) }}">{{ term }}</a>
                {% endfor %}
            </div>
        {% else %}
            <p style="color:#667085;">{{ 'help.search.resultCount'|trans({'%count%': total, '%q%': q}) }}</p>
            <ul class="help-article-list">
                {% for article in results %}
                    <li>
                        <a href="{{ path('app_help_article', {slug: article.localizedSlug(app.request.locale)}) }}">
                            <strong>{{ help_highlight(article.localizedTitle(app.request.locale), q)|raw }}</strong>
                            <br><span style="color:#667085;font-size:13px;">{{ article.category.localizedTitle(app.request.locale) }}</span>
                            {% if article.localizedSummary(app.request.locale) %}<br><span style="color:#667085;font-weight:300;">{{ help_highlight(article.localizedSummary(app.request.locale), q)|raw }}</span>{% endif %}
                        </a>
                    </li>
                {% else %}
                    <li>{{ 'help.search.noResults'|trans }}</li>
                {% endfor %}
            </ul>

            {% if pages > 1 %}
                <nav class="mt-4" aria-label="Pagination">
                    {% for p in 1..pages %}
                        {% if p == page %}
                            <span class="button button-blue" aria-current="page">{{ p }}</span>
                        {% else %}
                            <a class="button" href="{{ path('app_help_search', {q: q, page: p}) }}">{{ p }}</a>
                        {% endif %}
                    {% endfor %}
                </nav>
            {% endif %}
        {% endif %}
    </div>
</div>
{% include 'help/_assistant.html.twig' %}
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    {{ encore_entry_script_tags('help') }}
{% endblock %}