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

{% block seo %}
    <title>{{ seo.title|default('Annuaire') }} — {{ site.name|default('') }}</title>
    <meta name="description" content="{{ seo.description|default('Decouvrez les professionnels de notre annuaire') }}">
{% endblock %}

{% block body %}
<div class="container py-5 directory-section">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ path('app_home') }}">Accueil</a></li>
            <li class="breadcrumb-item active" aria-current="page">Annuaire</li>
        </ol>
    </nav>

    <h1 class="title-one mb-4">{{ title_page }}</h1>

    {# --- Recherche --- #}
    <form class="directory-search mb-4" method="get" action="{{ path('app_directory') }}">
        <div class="input-group" style="max-width: 480px;">
            <input type="text" name="q" class="form-control" placeholder="Rechercher un nom, metier, ville..." value="{{ search }}" autocomplete="off">
            <button class="btn btn-primary" type="submit">{{ bi('search') }}</button>
        </div>
    </form>

    {# --- Filtres categories --- #}
    {% if directoryCategories|length > 1 %}
    <div class="directory-filters mb-4">
        <a href="{{ path('app_directory') }}"
           class="directory-filters__pill{% if not activeCategory and search == '' and activeTagSlugs is empty %} directory-filters__pill--active{% endif %}">
            Tous
        </a>
        {% for cat in directoryCategories %}
        <a href="{{ path('app_directory', {categorie: cat.slug}) }}"
           class="directory-filters__pill{% if activeCategory and activeCategory.id == cat.id %} directory-filters__pill--active{% endif %}">
            {% if cat.icon %}{{ bi(cat.icon, 'me-1') }}{% endif %}
            {{ cat.name }}
        </a>
        {% endfor %}
    </div>
    {% endif %}

    {# --- Filtres par familles de tags (genere automatiquement) --- #}
    {% if activeTagGroups is not empty %}
    <div class="directory-tag-filters mb-4">
        {% for group in activeTagGroups %}
            {% set groupTags = group.tags|filter(t => t.directoryEntries|filter(d => d.isActive)|length > 0) %}
            {% if groupTags|length > 0 %}
                <div class="directory-tag-filters__group mb-2">
                    <span class="directory-tag-filters__label" style="--tg-color: {{ group.color }};">
                        {{ group.name }}
                    </span>
                    {% for tag in groupTags %}
                        {% set isActiveTag = tag.slug in activeTagSlugs %}
                        {% set newTags = isActiveTag
                            ? activeTagSlugs|filter(s => s != tag.slug)
                            : activeTagSlugs|merge([tag.slug]) %}
                        <a href="{{ path('app_directory', {
                                q: search ?: null,
                                categorie: activeCategory ? activeCategory.slug : null,
                                tags: newTags
                            }) }}"
                           class="directory-tag-filters__pill{% if isActiveTag %} directory-tag-filters__pill--active{% endif %}"
                           style="--tg-color: {{ group.color }};">
                            {{ tag.name }}
                        </a>
                    {% endfor %}
                </div>
            {% endif %}
        {% endfor %}
        {% if activeTagSlugs is not empty %}
            <a href="{{ path('app_directory', {
                    q: search ?: null,
                    categorie: activeCategory ? activeCategory.slug : null
                }) }}"
               class="directory-tag-filters__clear">
                Effacer les filtres tags
            </a>
        {% endif %}
    </div>
    {% endif %}

    {# --- Grille --- #}
    {% if entries|length > 0 %}
        <p class="directory-count text-muted mb-3">{{ entries|length }} professionnel{{ entries|length > 1 ? 's' : '' }}{% if search %} pour « {{ search }} »{% endif %}</p>
        <div class="directory-grid">
            {% for entry in entries %}
                {% include '_partials/_directory_card.html.twig' with { entry: entry } %}
            {% endfor %}
        </div>
    {% else %}
        <div class="text-center py-5">
            <p class="text-muted">Aucun professionnel trouve{% if search %} pour « {{ search }} »{% endif %}.</p>
            {% if search %}
                <a href="{{ path('app_directory') }}" class="btn btn-outline-primary btn-sm mt-2">Effacer la recherche</a>
            {% endif %}
        </div>
    {% endif %}
</div>
{% endblock %}