{% set filterTags = app.request.get('tags') %}
{% if filterTags|length > 0 %}
    {% set filterTags = filterTags|split(',') %}
{% else %}
    {% set filterTags = [] %}
{% endif %}
{% set tagText = '' %}
{% for i, filterTag in filterTags %}
    {% set tagText = tagText ~ blogTags[(filterTag)] %}
    {% if i+1 != filterTags|length %}
        {% set tagText = tagText ~ ', ' %}
    {% endif %}
{% endfor %}
{% if not tagText %}
    {% set tagText = 'sorting_any'|trans|title %}
{% endif %}

<div class="search-wrapper blog-search-wrapper">
    <div class="search search-desktop hide_1024">
        <div class="filter-button"><div class="icon filter-icon colored"></div></div>
        <div class="search-content">
            <div class="query-search input-parent" tabindex="0">
                <span>{{'blog_search'|trans|title}}</span>
                <input type="text" class="input" placeholder="{{'enter_keywords'|trans|capitalize}}" value="{{app.request.get('s')}}">
            </div>
            <div class="vertical-divider"></div>
            <div class="tag-search activate focusout_inactivate no_propagation input-select input-arrow arrow-down arrow-dark" tabindex="0">
                <span>{{ 'blog_search_blog_section'|trans|title }}</span>
                <div class="selected input" data-placeholder="{{ 'sorting_any'|trans|title }}">{{ tagText }}</div>
                <div class="select-menu no_propagation">
                    <ul>
                        {% for identifier, tag in blogTags %}
                            <li><a class="{% if identifier in filterTags %}active {% endif %}hvr" data-identifier="{{ identifier }}">{{ tag }}</a></li>
                        {% endfor %}
                    </ul>
                    {#
                    <hr>
                    <div class="button-container flex">
                        <a class="standart-button big-button border-button arrow-anim arrow-dark reset-button">{{ 'reset'|trans|title }}</a>
                        <a class="standart-button big-button black-button arrow-anim apply-button">{{ 'apply'|trans|title }}</a>
                    </div>
                    #}
                </div>
            </div>
        </div>
    </div>
    <div class="search search-mobile show_1024">
        <div class="query-search">
            <div class="icon search-icon"></div>
            <input type="text" class="search-input" placeholder="{{ 'enter_keywords'|trans|capitalize }}" value="{{ app.request.get('s') }}">
        </div>
        <div class="full-width black-button standart-button filter-popup-button">{{ 'filters'|trans|title }}</div>
    </div>
</div>