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

{% block title %}{{ category.localizedTitle(app.request.locale) }} · {{ '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>{{ category.localizedTitle(app.request.locale) }}</span>
                </nav>
                <h1 class="dark-blue-title">{{ category.localizedTitle(app.request.locale) }}</h1>
                {% if category.localizedDescription(app.request.locale) %}
                    <p style="max-width:720px;color:#475569;">{{ category.localizedDescription(app.request.locale) }}</p>
                {% endif %}
            </div>
        </div>
    </div>

    <div class="container pb-5">
        {% if articles is not empty %}
            <div class="help-category-intro">
                <p>{{ 'help.category.intro'|trans({'%category%': category.localizedTitle(app.request.locale)}) }}</p>
                {% if starter_article %}
                    <p>
                        {{ 'help.category.starter'|trans }}
                        <a href="{{ path('app_help_article', {slug: starter_article.localizedSlug(app.request.locale)}) }}">{{ starter_article.localizedTitle(app.request.locale) }}</a>
                    </p>
                {% endif %}
            </div>

            <div class="help-article-cards">
                {% for article in articles %}
                    <a class="help-article-card" href="{{ path('app_help_article', {slug: article.localizedSlug(app.request.locale)}) }}">
                        <div>
                            <h2 class="help-article-card__title">{{ article.localizedTitle(app.request.locale) }}</h2>
                            {% if article.localizedSummary(app.request.locale) %}
                                <p class="help-article-card__summary">{{ article.localizedSummary(app.request.locale) }}</p>
                            {% endif %}
                            <div class="help-article-card__meta">
                                {% if article.estimatedReadingTime %}
                                    <span>{{ 'help.article.readingTime'|trans({'%min%': article.estimatedReadingTime}) }}</span>
                                {% endif %}
                                {% if article.isFeatured %}
                                    <span class="help-article-card__badge">{{ 'help.category.popular'|trans }}</span>
                                {% endif %}
                            </div>
                        </div>
                        <span class="help-article-card__arrow" aria-hidden="true">→</span>
                    </a>
                {% endfor %}
            </div>
        {% else %}
            <div class="help-empty-category">
                <h2 class="h4" style="color:var(--dark-blue-color);">{{ 'help.empty.categoryTitle'|trans }}</h2>
                <p style="color:#475569;">{{ 'help.empty.categoryText'|trans }}</p>
                <form class="help-search-form" action="{{ path('app_help_search') }}" method="get" role="search">
                    <label class="visually-hidden" for="help-empty-q">{{ 'help.search.label'|trans }}</label>
                    <input id="help-empty-q" class="help-search-input" type="search" name="q" placeholder="{{ 'help.search.placeholder'|trans }}">
                    <button type="submit" class="button button-blue">{{ 'help.search.submit'|trans }}</button>
                </form>
                <div class="mt-3 d-flex flex-wrap gap-2">
                    <a class="button button-blue" href="{{ path('app_help_index') }}">{{ 'help.breadcrumb.home'|trans }}</a>
                    <a class="button" href="{{ path('app_help_contact') }}">{{ 'help.cta.support'|trans }}</a>
                </div>
                {% if suggested_articles is not empty %}
                    <h3 class="h5 mt-4" style="color:var(--dark-blue-color);">{{ 'help.empty.suggestions'|trans }}</h3>
                    <div class="help-article-cards mt-2">
                        {% for article in suggested_articles %}
                            <a class="help-article-card" href="{{ path('app_help_article', {slug: article.localizedSlug(app.request.locale)}) }}">
                                <div>
                                    <h2 class="help-article-card__title">{{ article.localizedTitle(app.request.locale) }}</h2>
                                    {% if article.localizedSummary(app.request.locale) %}
                                        <p class="help-article-card__summary">{{ article.localizedSummary(app.request.locale) }}</p>
                                    {% endif %}
                                </div>
                                <span class="help-article-card__arrow" aria-hidden="true">→</span>
                            </a>
                        {% endfor %}
                    </div>
                {% endif %}
            </div>
        {% endif %}
    </div>
</div>
{% include 'help/_assistant.html.twig' %}
{% endblock %}

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