{% if config.isFeatureActivated('searchPlace') or config.isFeatureActivated('searchElements') or config.isFeatureActivated('searchCategories') %}

{% import 'components/spinner-loader.html.njk' as spinnerLoader %}
<div class="search-bar-with-options-container">

    {# Search Input #}
    <div class="input-field search-bar-container autocomplete-container">
        <a class="gogo-icon-search gogo-h-primary search-icon search-bar-icon">
            {{ spinnerLoader.create('search-spinner-loader') }}
        </a>

        {% if config.isFeatureActivated('searchGeolocate') %}
            <a class="gogo-icon-locate gogo-h-primary search-icon tooltipped search-geolocalize"
                data-position="right" data-delay="0" data-tooltip="{{ 'geolocalize' | i18n }}">
            </a>
        {% endif %}

        <input class="validate search-bar gogo-section-content"
        	     type="text"
        	     name="adresse"
                 placeholder="{{ 'search' | i18n }}"
        	     onClick="this.setSelectionRange(0, this.value.length)"
        	     {% if config.address %}
        	     value="{{ config.address | replace({'-': ' '}) | capitalize }}"
        	     {% endif %}
        />
    </div>

    <div class='search-no-result' style="display:none"> {{ 'no.result.found' | i18n }}</div>

</div>

{#{% if config.range %}
    <div id="search-distance-component">
        <div class="range-field" id="search-distance-container">
          <input type="range" id="search-distance-input" min="30" max="150" value="{{ config.range }}" />
        </div>

        <div id='search-distance-value-container'>
            <span id='search-distance-value'>{{ config.range }} km</span>
        </div>
    </div>
{% endif %}#}

{% endif %}