{% sw_extends '@Storefront/storefront/layout/header/search.html.twig' %}
{% block layout_header_search %}
    <div class="collapse"
         id="searchCollapse">
        <div class="header-search my-2 m-sm-auto">
        {% block layout_header_search_form %}
            {{ parent() }}
            <div class="header-phone">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-phone-icon lucide-phone"><path d="M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384"/></svg>
                {{ 'header.phone.text'|trans }}
                <span class="phone-number">{{ 'header.phone.number'|trans }}</span>
            </div>
        {% endblock %}
        </div>

    </div>
{% endblock %}

{% block layout_header_search_button %}
    <button type="submit"
            class="btn header-search-btn"
            aria-label="{{ "header.searchButton"|trans|striptags }}">

        <i class="fa-kit fa-search"></i>
    </button>
{% endblock %}