{% trans_default_domain 'products' %}
<div {{ attributes.defaults(stimulus_controller(this.shortName)) }} {{ stimulus_target(this.shortName, 'search') }}>
   <twig:Header:Icon type="search" icon="search" url_link="{{ path('kupshop_catalog_search_search') }}"
                     attributes="{{ stimulus_action(this.shortName, 'showSearch', 'click') }}"/>

   <div class="search-inner">
      <div class="responsive-header">
         <p class="title-default">{{ 'search.resp.title'|trans }}</p>
         <button type="button" class="btn btn-reset" title="{{ 'search.close'|trans }}"
                 aria-label="{{ 'search.close'|trans }}" {{ stimulus_action(this.shortName, 'hideSearch', 'click') }}>
            <twig:ux:icon name="close" class="c-icon"/>
         </button>
      </div>
      <div class="form-wrapper">
         <form method="get" action="{{ path('kupshop_catalog_search_search') }}" role="search" aria-label="{{ 'search.resp.title'|trans }}">
            <twig:ux:icon name="search"/>
            <input type="text" name="search" value="" maxlength="100" class="form-control"
                   placeholder="{{ this.placeholder|default('search.placeholder'|trans) }}"
                   aria-label="{{ this.placeholder|default('search.placeholder'|trans) }}"
                   autocomplete="off" {{ stimulus_target(this.shortName, 'input') }}>
            <button name="submit" type="submit" value="{{ this.btn_text|default('search.btn.text'|trans) }}"
                    class="{{ this.btn_class }}"
                    aria-label="{{ this.btn_text|default('search.btn.text'|trans) }}">{{ this.btn_text|default('search.btn.text'|trans) }}</button>
         </form>
      </div>
   </div>
</div>
