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

{% block title %}{{ 'help.faq.title'|trans }} · {{ 'help.meta.indexTitle'|trans }}{% 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.faq.title'|trans }}</span>
                </nav>
                <h1 class="dark-blue-title">{{ 'help.faq.title'|trans }}</h1>
                <p style="max-width:720px;color:#475569;">{{ 'help.faq.intro'|trans }}</p>
            </div>
        </div>
    </div>

    <div class="container pb-5">
        <ul class="help-article-list">
            {% for article in articles %}
                <li>
                    <a href="{{ path('app_help_article', {slug: article.localizedSlug(app.request.locale)}) }}">
                        <strong>{{ article.localizedTitle(app.request.locale) }}</strong>
                        {% if article.localizedSummary(app.request.locale) %}<br><span style="color:#667085;font-weight:300;">{{ article.localizedSummary(app.request.locale) }}</span>{% endif %}
                    </a>
                </li>
            {% else %}
                <li>{{ 'help.empty.articles'|trans }}</li>
            {% endfor %}
        </ul>
        <a class="button button-blue mt-3" href="{{ path('app_help_contact') }}">{{ 'help.cta.support'|trans }}</a>
    </div>
</div>
{% include 'help/_assistant.html.twig' %}
{% endblock %}

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