{% 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 == '' %} 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|replace({'bi bi-': '', 'bi-': ''}), 'me-1') }}{% endif %}
            {{ cat.name }}
        </a>
        {% endfor %}
    </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 %}