{% set query = query ?? '' %}
 
<section class="field">
    <div class="w-100">
        <span class="search-icon mx-2"><img width="20" height="20" src="/assets/img/search.png" alt="search"></span>
        <input style="width:80%;font-weight: 600;" sprig s-trigger="keyup changed" s-replace="#{{id}}" type="text" name="query" value="{{ query }}"
        placeholder="{{ 'Búsqueda'|t }}" class="text" />
    </div>

    <div class="blockresultsSearch {{query is not empty ? 'active': 'inactive'}}" id="{{id}}" style="max-height: 200px;overflow:auto;">
        {% if query %}
        {% set data = [] %}
        {% set get_entries =
        craft.entries({
        section: [
        'And',
        'not productsEntries',
        'not home',
        'not componentsCatalog'
        ],
        limit: 100
        }).search(
        query
        ).all()
        %}

        {% set get_categories =
        craft.categories({
        limit: 100
        }).search(
        query
        ).all()
        %}

        {% for group in [get_entries, get_categories] %}
        {% for result in group %}
        {% set data =
        data|merge(
        [
        {
        title: result.title ?? '',
        url: result.url ?? ''
        }
        ]
        )
        %}
        {% endfor %}
        {% endfor %}

        {% if data|length %}
        <p class="text-white px-4 pt-3 pb-2 m-0 results-group--item">
            {{ 'Tu búsqueda para'|t }} <strong>{{ query }}</strong>
            {{ 'regreso'|t }}
            <strong>{{ data|length }} {{ 'resultados'|t }}</strong>
        </p>
        <ul class="p-0 m-0 results-group">
            {% for entry in data %}
            {% set url = entry.url ?? null %}
            {% set title = entry.title ?? null %}
            {% if url and title %}
            <li class="results-group--item {{
                loop.last
                  ? 'pb-3 pt-2'
                  : 'py-2'
                }} px-4 m-0">
                {% if url %}
                <a href="{{ url }}" class="results-group--link">
                    {{ entry.title }}
                </a>
                {% else %}
                {{ entry.title }}
                {% endif %}
            </li>
            {% endif %}
            {% endfor %}
        </ul>
        {% else %}
        <p class="px-4 py-3 m-0 results-group--item">
            {{ 'No hay resultados'|t }}
        </p>
        {% endif %}
        {% endif %}
    </div>
</section>